Merge branch 'master' into 'add-sentry-js-again-with-vue'

# Conflicts:
#   db/schema.rb

67 files changed, 1477 insertions, 457 deletions

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/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/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/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/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/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/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index bca62b7fc31..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;
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/controllers/concerns/uploads_actions.rb b/app/controllers/concerns/uploads_actions.rb
new file mode 100644
index 00000000000..dec2e27335a
--- /dev/null
+++ b/app/controllers/concerns/uploads_actions.rb
@@ -0,0 +1,27 @@
+module UploadsActions
+  def create
+    link_to_file = UploadService.new(model, params[:file], uploader_class).execute
+
+    respond_to do |format|
+      if link_to_file
+        format.json do
+          render json: { link: link_to_file }
+        end
+      else
+        format.json do
+          render json: 'Invalid file.', status: :unprocessable_entity
+        end
+      end
+    end
+  end
+
+  def show
+    return render_404 unless uploader.exists?
+
+    disposition = uploader.image_or_video? ? 'inline' : 'attachment'
+
+    expires_in 0.seconds, must_revalidate: true, private: true
+
+    send_file uploader.file.path, disposition: disposition
+  end
+end
diff --git a/app/controllers/projects/artifacts_controller.rb b/app/controllers/projects/artifacts_controller.rb
index a13588b4218..1224e9503c9 100644
--- a/app/controllers/projects/artifacts_controller.rb
+++ b/app/controllers/projects/artifacts_controller.rb
@@ -1,11 +1,13 @@
 class Projects::ArtifactsController < Projects::ApplicationController
   include ExtractsPath
+  include RendersBlob
 
   layout 'project'
   before_action :authorize_read_build!
   before_action :authorize_update_build!, only: [:keep]
   before_action :extract_ref_name_and_path
   before_action :validate_artifacts!
+  before_action :set_path_and_entry, only: [:file, :raw]
 
   def download
     if artifacts_file.file_storage?
@@ -24,15 +26,24 @@ class Projects::ArtifactsController < Projects::ApplicationController
   end
 
   def file
-    entry = build.artifacts_metadata_entry(params[:path])
+    blob = @entry.blob
+    override_max_blob_size(blob)
 
-    if entry.exists?
-      send_artifacts_entry(build, entry)
-    else
-      render_404
+    respond_to do |format|
+      format.html do
+        render 'file'
+      end
+
+      format.json do
+        render_blob_json(blob)
+      end
     end
   end
 
+  def raw
+    send_artifacts_entry(build, @entry)
+  end
+
   def keep
     build.keep_artifacts!
     redirect_to namespace_project_build_path(project.namespace, project, build)
@@ -81,4 +92,11 @@ class Projects::ArtifactsController < Projects::ApplicationController
   def artifacts_file
     @artifacts_file ||= build.artifacts_file
   end
+
+  def set_path_and_entry
+    @path = params[:path]
+    @entry = build.artifacts_metadata_entry(@path)
+
+    render_404 unless @entry.exists?
+  end
 end
diff --git a/app/controllers/projects/deploy_keys_controller.rb b/app/controllers/projects/deploy_keys_controller.rb
index d0c44e297e3..f27089b8590 100644
--- a/app/controllers/projects/deploy_keys_controller.rb
+++ b/app/controllers/projects/deploy_keys_controller.rb
@@ -8,7 +8,12 @@ class Projects::DeployKeysController < Projects::ApplicationController
   layout "project_settings"
 
   def index
-    redirect_to_repository_settings(@project)
+    respond_to do |format|
+      format.html { redirect_to_repository_settings(@project) }
+      format.json do
+        render json: Projects::Settings::DeployKeysPresenter.new(@project, current_user: current_user).as_json
+      end
+    end
   end
 
   def new
@@ -19,7 +24,7 @@ class Projects::DeployKeysController < Projects::ApplicationController
     @key = DeployKey.new(deploy_key_params.merge(user: current_user))
 
     unless @key.valid? && @project.deploy_keys << @key
-      flash[:alert] = @key.errors.full_messages.join(', ').html_safe      
+      flash[:alert] = @key.errors.full_messages.join(', ').html_safe
     end
     redirect_to_repository_settings(@project)
   end
@@ -27,7 +32,10 @@ class Projects::DeployKeysController < Projects::ApplicationController
   def enable
     Projects::EnableDeployKeyService.new(@project, current_user, params).execute
 
-    redirect_to_repository_settings(@project)
+    respond_to do |format|
+      format.html { redirect_to_repository_settings(@project) }
+      format.json { head :ok }
+    end
   end
 
   def disable
@@ -35,7 +43,11 @@ class Projects::DeployKeysController < Projects::ApplicationController
     return render_404 unless deploy_key_project
 
     deploy_key_project.destroy!
-    redirect_to_repository_settings(@project)
+
+    respond_to do |format|
+      format.html { redirect_to_repository_settings(@project) }
+      format.json { head :ok }
+    end
   end
 
   protected
diff --git a/app/controllers/projects/uploads_controller.rb b/app/controllers/projects/uploads_controller.rb
index 61686499bd3..6966a7c5fee 100644
--- a/app/controllers/projects/uploads_controller.rb
+++ b/app/controllers/projects/uploads_controller.rb
@@ -1,33 +1,11 @@
 class Projects::UploadsController < Projects::ApplicationController
+  include UploadsActions
+
   skip_before_action :project, :repository,
     if: -> { action_name == 'show' && image_or_video? }
 
   before_action :authorize_upload_file!, only: [:create]
 
-  def create
-    link_to_file = ::Projects::UploadService.new(project, params[:file]).
-      execute
-
-    respond_to do |format|
-      if link_to_file
-        format.json do
-          render json: { link: link_to_file }
-        end
-      else
-        format.json do
-          render json: 'Invalid file.', status: :unprocessable_entity
-        end
-      end
-    end
-  end
-
-  def show
-    return render_404 if uploader.nil? || !uploader.file.exists?
-
-    disposition = uploader.image_or_video? ? 'inline' : 'attachment'
-    send_file uploader.file.path, disposition: disposition
-  end
-
   private
 
   def uploader
@@ -52,4 +30,10 @@ class Projects::UploadsController < Projects::ApplicationController
   def image_or_video?
     uploader && uploader.file.exists? && uploader.image_or_video?
   end
+
+  def uploader_class
+    FileUploader
+  end
+
+  alias_method :model, :project
 end
diff --git a/app/controllers/uploads_controller.rb b/app/controllers/uploads_controller.rb
index f1bfd574f04..21a964fb391 100644
--- a/app/controllers/uploads_controller.rb
+++ b/app/controllers/uploads_controller.rb
@@ -1,50 +1,43 @@
 class UploadsController < ApplicationController
-  skip_before_action :authenticate_user!
-  before_action :find_model, :authorize_access!
-
-  def show
-    uploader = @model.send(upload_mount)
-
-    unless uploader.file_storage?
-      return redirect_to uploader.url
-    end
+  include UploadsActions
 
-    unless uploader.file && uploader.file.exists?
-      return render_404
-    end
-
-    disposition = uploader.image? ? 'inline' : 'attachment'
-
-    expires_in 0.seconds, must_revalidate: true, private: true
-    send_file uploader.file.path, disposition: disposition
-  end
+  skip_before_action :authenticate_user!
+  before_action :find_model
+  before_action :authorize_access!, only: [:show]
+  before_action :authorize_create_access!, only: [:create]
 
   private
 
   def find_model
-    unless upload_model && upload_mount
-      return render_404
-    end
+    return render_404 unless upload_model && upload_mount
 
     @model = upload_model.find(params[:id])
   end
 
   def authorize_access!
     authorized =
-      case @model
-      when Project
-        can?(current_user, :read_project, @model)
-      when Group
-        can?(current_user, :read_group, @model)
+      case model
       when Note
-        can?(current_user, :read_project, @model.project)
-      else
-        # No authentication required for user avatars.
+        can?(current_user, :read_project, model.project)
+      when User
         true
+      else
+        permission = "read_#{model.class.to_s.underscore}".to_sym
+
+        can?(current_user, permission, model)
       end
 
-    return if authorized
+    render_unauthorized unless authorized
+  end
+
+  def authorize_create_access!
+    # for now we support only personal snippets comments
+    authorized = can?(current_user, :comment_personal_snippet, model)
 
+    render_unauthorized unless authorized
+  end
+
+  def render_unauthorized
     if current_user
       render_404
     else
@@ -58,17 +51,44 @@ class UploadsController < ApplicationController
       "project" => Project,
       "note"    => Note,
       "group"   => Group,
-      "appearance" => Appearance
+      "appearance" => Appearance,
+      "personal_snippet" => PersonalSnippet
     }
 
     upload_models[params[:model]]
   end
 
   def upload_mount
+    return true unless params[:mounted_as]
+
     upload_mounts = %w(avatar attachment file logo header_logo)
 
     if upload_mounts.include?(params[:mounted_as])
       params[:mounted_as]
     end
   end
+
+  def uploader
+    return @uploader if defined?(@uploader)
+
+    if model.is_a?(PersonalSnippet)
+      @uploader = PersonalFileUploader.new(model, params[:secret])
+
+      @uploader.retrieve_from_store!(params[:filename])
+    else
+      @uploader = @model.send(upload_mount)
+
+      redirect_to @uploader.url unless @uploader.file_storage?
+    end
+
+    @uploader
+  end
+
+  def uploader_class
+    PersonalFileUploader
+  end
+
+  def model
+    @model ||= find_model
+  end
 end
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 37b6f4ad5cc..af430270ae4 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -119,7 +119,9 @@ module BlobHelper
   end
 
   def blob_raw_url
-    if @snippet
+    if @build && @entry
+      raw_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: @entry.path)
+    elsif @snippet
       if @snippet.project_id
         raw_namespace_project_snippet_path(@project.namespace, @project, @snippet)
       else
@@ -250,6 +252,8 @@ module BlobHelper
       case viewer.blob.external_storage
       when :lfs
         'it is stored in LFS'
+      when :build_artifact
+        'it is stored as a job artifact'
       else
         'it is stored externally'
       end
diff --git a/app/helpers/gitlab_routing_helper.rb b/app/helpers/gitlab_routing_helper.rb
index e9b7cbbad6a..1336c676134 100644
--- a/app/helpers/gitlab_routing_helper.rb
+++ b/app/helpers/gitlab_routing_helper.rb
@@ -208,6 +208,8 @@ module GitlabRoutingHelper
       browse_namespace_project_build_artifacts_path(*args)
     when 'file'
       file_namespace_project_build_artifacts_path(*args)
+    when 'raw'
+      raw_namespace_project_build_artifacts_path(*args)
     end
   end
 
diff --git a/app/helpers/sorting_helper.rb b/app/helpers/sorting_helper.rb
index 2fda98cae90..4882d9b71d2 100644
--- a/app/helpers/sorting_helper.rb
+++ b/app/helpers/sorting_helper.rb
@@ -70,6 +70,14 @@ module SortingHelper
     }
   end
 
+  def tags_sort_options_hash
+    {
+      sort_value_name => sort_title_name,
+      sort_value_recently_updated => sort_title_recently_updated,
+      sort_value_oldest_updated => sort_title_oldest_updated
+    }
+  end
+
   def sort_title_priority
     'Priority'
   end
diff --git a/app/models/ci/artifact_blob.rb b/app/models/ci/artifact_blob.rb
new file mode 100644
index 00000000000..b35febc9ac5
--- /dev/null
+++ b/app/models/ci/artifact_blob.rb
@@ -0,0 +1,35 @@
+module Ci
+  class ArtifactBlob
+    include BlobLike
+
+    attr_reader :entry
+
+    def initialize(entry)
+      @entry = entry
+    end
+
+    delegate :name, :path, to: :entry
+
+    def id
+      Digest::SHA1.hexdigest(path)
+    end
+
+    def size
+      entry.metadata[:size]
+    end
+
+    def data
+      "Build artifact #{path}"
+    end
+
+    def mode
+      entry.metadata[:mode]
+    end
+
+    def external_storage
+      :build_artifact
+    end
+
+    alias_method :external_size, :size
+  end
+end
diff --git a/app/models/event.rb b/app/models/event.rb
index b780c1faf81..e6fad46077a 100644
--- a/app/models/event.rb
+++ b/app/models/event.rb
@@ -30,6 +30,7 @@ class Event < ActiveRecord::Base
 
   # Callbacks
   after_create :reset_project_activity
+  after_create :set_last_repository_updated_at, if: :push?
 
   # Scopes
   scope :recent, -> { reorder(id: :desc) }
@@ -357,4 +358,9 @@ class Event < ActiveRecord::Base
   def recent_update?
     project.last_activity_at > RESET_PROJECT_ACTIVITY_INTERVAL.ago
   end
+
+  def set_last_repository_updated_at
+    Project.unscoped.where(id: project_id).
+      update_all(last_repository_updated_at: created_at)
+  end
 end
diff --git a/app/models/project.rb b/app/models/project.rb
index 025db89ebfd..edbca3b537b 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -53,6 +53,11 @@ class Project < ActiveRecord::Base
     update_column(:last_activity_at, self.created_at)
   end
 
+  after_create :set_last_repository_updated_at
+  def set_last_repository_updated_at
+    update_column(:last_repository_updated_at, self.created_at)
+  end
+
   after_destroy :remove_pages
 
   # update visibility_level of forks
diff --git a/app/models/project_wiki.rb b/app/models/project_wiki.rb
index 70eef359cdd..189c106b70b 100644
--- a/app/models/project_wiki.rb
+++ b/app/models/project_wiki.rb
@@ -183,6 +183,6 @@ class ProjectWiki
   end
 
   def update_project_activity
-    @project.touch(:last_activity_at)
+    @project.touch(:last_activity_at, :last_repository_updated_at)
   end
 end
diff --git a/app/policies/personal_snippet_policy.rb b/app/policies/personal_snippet_policy.rb
index d3913986cd8..e1e5336da8c 100644
--- a/app/policies/personal_snippet_policy.rb
+++ b/app/policies/personal_snippet_policy.rb
@@ -3,11 +3,16 @@ class PersonalSnippetPolicy < BasePolicy
     can! :read_personal_snippet if @subject.public?
     return unless @user
 
+    if @subject.public?
+      can! :comment_personal_snippet
+    end
+
     if @subject.author == @user
       can! :read_personal_snippet
       can! :update_personal_snippet
       can! :destroy_personal_snippet
       can! :admin_personal_snippet
+      can! :comment_personal_snippet
     end
 
     unless @user.external?
@@ -16,6 +21,7 @@ class PersonalSnippetPolicy < BasePolicy
 
     if @subject.internal? && !@user.external?
       can! :read_personal_snippet
+      can! :comment_personal_snippet
     end
   end
 end
diff --git a/app/presenters/projects/settings/deploy_keys_presenter.rb b/app/presenters/projects/settings/deploy_keys_presenter.rb
index 86ac513b3c0..070b0c35e36 100644
--- a/app/presenters/projects/settings/deploy_keys_presenter.rb
+++ b/app/presenters/projects/settings/deploy_keys_presenter.rb
@@ -48,6 +48,17 @@ module Projects
         available_public_keys.any?
       end
 
+      def as_json
+        serializer = DeployKeySerializer.new
+        opts = { user: current_user }
+
+        {
+          enabled_keys: serializer.represent(enabled_keys, opts),
+          available_project_keys: serializer.represent(available_project_keys, opts),
+          public_keys: serializer.represent(available_public_keys, opts)
+        }
+      end
+
       def to_partial_path
         'projects/deploy_keys/index'
       end
diff --git a/app/serializers/README.md b/app/serializers/README.md
new file mode 100644
index 00000000000..0337f88db5f
--- /dev/null
+++ b/app/serializers/README.md
@@ -0,0 +1,325 @@
+# Serializers
+
+This is a documentation for classes located in `app/serializers` directory.
+
+In GitLab, we use [grape-entities][grape-entity-project], accompanied by a
+serializer, to convert a Ruby object to its JSON representation.
+
+Serializers are typically used in controllers to build a JSON response
+that is usually consumed by a frontend code.
+
+## Why using a serializer is important?
+
+Using serializers, instead of `to_json` method, has several benefits:
+
+* it helps to prevent exposure of a sensitive data stored in the database
+* it makes it easier to test what should and should not be exposed
+* it makes it easier to reuse serialization entities that are building blocks
+* it makes it easier to move complexity from controllers to easily testable
+  classes
+* it encourages hiding complexity behind intentions-revealing interfaces
+* it makes it easier to take care about serialization performance concerns
+* it makes it easier to reduce merge conflicts between CE -> EE
+* it makes it easier to benefit from domain driven development techniques
+
+## What is a serializer?
+
+A serializer is a class that encapsulates all business rules for building a
+JSON response using serialization entities.
+
+It is designed to be testable and to support passing additional context from
+the controller.
+
+## What is a serialization entity?
+
+Entities are lightweight structures that allow to represent domain models
+in a consistent and abstracted way, and reuse them as building blocks to
+create a payload.
+
+Entities located in `app/serializers` are usually derived from a
+[`Grape::Entity`][grape-entity-class] class.
+
+Serialization entities that do require to have a knowledge about specific
+elements of the request, need to mix `RequestAwareEntity` in.
+
+A serialization entity usually maps a domain model class into its JSON
+representation. It rarely happens that a serialization entity exists without
+a corresponding domain model class. As an example, we have an `Issue` class and
+a corresponding `IssueSerializer`.
+
+Serialization entites are designed to reuse other serialization entities, which
+is a convenient way to create a multi-level JSON representation of a piece of
+a domain model you want to serialize.
+
+See [documentation for Grape Entites][grape-entity-readme] for more details.
+
+## How to implement a serializer?
+
+### Base implementation
+
+In order to effectively implement a serializer it is necessary to create a new
+class in `app/serializers`. See existing serializers as an example.
+
+A new serializer should inherit from a `BaseSerializer` class. It is necessary
+to specify which serialization entity will be used to serialize a resource.
+
+```ruby
+class MyResourceSerializer < BaseSerialize
+  entity MyResourceEntity
+end
+```
+
+The example above shows how a most simple serializer can look like.
+
+Given that the entity `MyResourceEntity` exists, you can now use
+`MyResourceSerializer` in the controller by creating an instance of it, and
+calling `MyResourceSerializer#represent(resource)` method.
+
+Note that a `resource` can be either a single object, an array of objects or an
+`ActiveRecord::Relation` object. A serialization entity should be smart enough
+to accurately represent each of these.
+
+It should not be necessary to use `Enumerable#map`, and it should be avoided
+from the performance reasons.
+
+### Choosing what gets serialized
+
+It often happens that you might want to use the same serializer in many places,
+but sometimes the intention is to only expose a small subset of object's
+attributes in one place, and a different subset in another.
+
+`BaseSerializer#represent(resource, opts = {})` method can take an additional
+hash argument, `opts`, that defines what is going to be serialized.
+
+`BaseSerializer` will pass these options to a serialization entity. See
+how it is [documented in the upstream project][grape-entity-only].
+
+With this approach you can extend the serializer to respond to methods that will
+create a JSON response according to your needs.
+
+```ruby
+class PipelineSerializer < BaseSerializer
+  entity PipelineEntity
+
+  def represent_details(resource)
+    represent(resource, only: [:details])
+  end
+
+  def represent_status(resource)
+    represent(resource, only: [:status])
+  end
+end
+```
+
+It is possible to use `only` and `except` keywords. Both keywords do support
+nested attributes, like `except: [:id, { user: [:id] }]`.
+
+Passing `only` and `except` to the `represent` method from a controller is
+possible, but it defies principles of encapsulation and testability, and it is
+better to avoid it, and to add a specific method to the serializer instead.
+
+### Reusing serialization entities from the API
+
+Public API in GitLab is implemented using [Grape][grape-project].
+
+Under the hood it also uses [`Grape::Entity`][grape-entity-class] classes.
+This means that it is possible to reuse these classes to implement internal
+serializers.
+
+You can either use such entity directly:
+
+```ruby
+class MyResourceSerializer < BaseSerializer
+  entity API::Entities::SomeEntity
+end
+```
+
+Or derive a new serialization entity class from it:
+
+```ruby
+class MyEntity < API::Entities::SomeEntity
+  include RequestAwareEntity
+
+  unexpose :something
+end
+```
+
+It might be a good idea to write specs for entities that do inherit from
+the API, because when API payloads are changed / extended, it is easy to forget
+about the impact on the internal API through a serializer that reuses API
+entities.
+
+It is usually safe to do that, because API entities rarely break backward
+compatibility, but additional exposure may have a performance impact when API
+gets extended significantly. Write tests that check if only necessary data is
+exposed.
+
+## How to write tests for a serializer?
+
+Like every other class in the project, creating a serializer warrants writing
+tests for it.
+
+It is usually a good idea to test each public method in the serializer against
+a valid payload. `BaseSerializer#represent` returns a hash, so it is possible
+to use usual RSpec matchers like `include`.
+
+Sometimes, when the payload is large, it makes sense to validate it entirely
+using `match_response_schema` matcher along with a new fixture that can be
+stored in `spec/fixtures/api/schemas/`. This matcher is using a `json-schema`
+gem, which is quite flexible, see a [documentation][json-schema-gem] for it.
+
+## How to use a serializer in a controller?
+
+Once a new serializer is implemented, it is possible to use it in a controller.
+
+Create an instance of the serializer and render the response.
+
+```ruby
+def index
+  format.json do
+    render json: MyResourceSerializer
+      .new(current_user: @current_user)
+      .represent_details(@project.resources)
+  nd
+end
+```
+
+If it is necessary to include additional information in the payload, it is
+possible to extend what is going to be rendered, the usual way:
+
+```ruby
+def index
+  format.json do
+    render json: {
+      resources: MyResourceSerializer
+        .new(current_user: @current_user)
+        .represent_details(@project.resources),
+      count: @project.resources.count
+    }
+  nd
+end
+```
+
+Note that in these examples an additional context is being passed to the
+serializer (`current_user: @current_user`).
+
+## How to pass an additional context from the controller?
+
+It is possible to pass an additional context from a controller to a
+serializer and each serialization entity that is used in the process.
+
+Serialization entities that do require an additional context have
+`RequestAwareEntity` concern mixed in. This piece of the code exposes a method
+called `request` in every serialization entity that is instantiated during
+serialization.
+
+An object returned by this method is an instance of `EntityRequest`, which
+behaves like an `OpenStruct` object, with the difference that it will raise
+an error if an unknown method is called.
+
+In other words, in the previous example, `request` method will return an
+instance of `EntityRequest` that responds to `current_user` method. It will be
+available in every serialization entity instantiated by `MyResourceSerializer`.
+
+`EntityRequest` is a workaround for [#20045][issue-20045] and is meant to be
+refactored soon. Please avoid passing an additional context that is not
+required by a serialization entity.
+
+At the moment, the context that is passed to entities most often is
+`current_user` and `project`.
+
+## How is this related to using presenters?
+
+Payload created by a serializer is usually a representation of the backed code,
+combined with the current request data. Therefore, technically, serializers
+are presenters that create payload consumed by a frontend code, usually Vue
+components.
+
+In GitLab, it is possible to use [presenters][presenters-readme], but
+`BaseSerializer` still needs to learn how to use it, see [#30898][issue-30898].
+
+It is possible to use presenters when serializer is used to represent only
+a single object. It is not supported when  `ActiveRecord::Relation` is being
+serialized.
+
+```ruby
+MyObjectSerializer.new.represent(object.present)
+```
+
+## Best practices
+
+1. Do not invoke a serializer from within a serialization entity.
+
+    If you need to use a serializer from within a serialization entity, it is
+    possible that you are missing a class for an important domain concept.
+
+    Consider creating a new domain class and a corresponding serialization
+    entity for it.
+
+1. Use only one approach to switch behavior of the serializer.
+
+    It is possible to use a few approaches to switch a behavior of the
+    serializer. Most common are using a [Fluent Interface][fluent-interface]
+    and creating a separate `represent_something` methods.
+
+    Whatever you choose, it might be better to use only one approach at a time.
+
+1. Do not forget about creating specs for serialization entities.
+
+    Writing tests for the serializer indeed does cover testing a behavior of
+    serialization entities that the serializer instantiates. However it might
+    be a good idea to write separate tests for entities as well, because these
+    are meant to be reused in different serializers, and a serializer can
+    change a behavior of a serialization entity.
+
+1. Use `ActiveRecord::Relation` where possible
+
+    Using an `ActiveRecord::Relation` might help from the performance perspective.
+
+1. Be diligent about passing an additional context from the controller.
+
+    Using `EntityRequest` and `RequestAwareEntity` is a workaround for the lack
+    of high-level mechanism. It is meant to be refactored, and current
+    implementation is error prone. Imagine the situation that one serialization
+    entity requires `request.user` attribute, but the second one wants
+    `request.current_user`. When it happens that these two entities are used in
+    the same serialization request, you might need to pass both parameters to
+    the serializer, which is obviously not a perfect situation.
+
+    When in doubt, pass only `current_user` and `project` if these are required.
+
+1. Keep performance concerns in mind
+
+    Using a serializer incorrectly can have significant impact on the
+    performance.
+
+    Because serializers are technically presenters, it is often necessary
+    to calculate, for example, paths to various controller-actions.
+    Since using URL helpers usually involve passing `project` and `namespace`
+    adding `includes(project: :namespace)` in the serializer, can help to avoid
+    N+1 queries.
+
+    Also, try to avoid using `Enumerable#map` or other methods that will
+    execute a database query eagerly.
+
+1. Avoid passing `only` and `except` from the controller.
+1. Write tests checking for N+1 queries.
+1. Write controller tests for actions / formats using serializers.
+1. Write tests that check if only necessary data is exposed.
+1. Write tests that check if no sensitive data is exposed.
+
+## Future
+
+* [Next iteration of serializers][issue-27569]
+
+[grape-project]: http://www.ruby-grape.org
+[grape-entity-project]: https://github.com/ruby-grape/grape-entity
+[grape-entity-readme]: https://github.com/ruby-grape/grape-entity/blob/master/README.md
+[grape-entity-class]: https://github.com/ruby-grape/grape-entity/blob/master/lib/grape_entity/entity.rb
+[grape-entity-only]: https://github.com/ruby-grape/grape-entity/blob/master/README.md#returning-only-the-fields-you-want
+[presenters-readme]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/presenters/README.md
+[fluent-interface]: https://en.wikipedia.org/wiki/Fluent_interface
+[json-schema-gem]: https://github.com/ruby-json-schema/json-schema
+[issue-20045]: https://gitlab.com/gitlab-org/gitlab-ce/issues/20045
+[issue-30898]: https://gitlab.com/gitlab-org/gitlab-ce/issues/30898
+[issue-27569]: https://gitlab.com/gitlab-org/gitlab-ce/issues/27569
diff --git a/app/serializers/deploy_key_entity.rb b/app/serializers/deploy_key_entity.rb
new file mode 100644
index 00000000000..d75a83d0fa5
--- /dev/null
+++ b/app/serializers/deploy_key_entity.rb
@@ -0,0 +1,14 @@
+class DeployKeyEntity < Grape::Entity
+  expose :id
+  expose :user_id
+  expose :title
+  expose :fingerprint
+  expose :can_push
+  expose :destroyed_when_orphaned?, as: :destroyed_when_orphaned
+  expose :almost_orphaned?, as: :almost_orphaned
+  expose :created_at
+  expose :updated_at
+  expose :projects, using: ProjectEntity do |deploy_key|
+    deploy_key.projects.select { |project| options[:user].can?(:read_project, project) }
+  end
+end
diff --git a/app/serializers/deploy_key_serializer.rb b/app/serializers/deploy_key_serializer.rb
new file mode 100644
index 00000000000..8f849eb88b7
--- /dev/null
+++ b/app/serializers/deploy_key_serializer.rb
@@ -0,0 +1,3 @@
+class DeployKeySerializer < BaseSerializer
+  entity DeployKeyEntity
+end
diff --git a/app/serializers/project_entity.rb b/app/serializers/project_entity.rb
new file mode 100644
index 00000000000..a471a7e6a88
--- /dev/null
+++ b/app/serializers/project_entity.rb
@@ -0,0 +1,14 @@
+class ProjectEntity < Grape::Entity
+  include RequestAwareEntity
+  
+  expose :id
+  expose :name
+
+  expose :full_path do |project|
+    namespace_project_path(project.namespace, project)
+  end
+
+  expose :full_name do |project|
+    project.full_name
+  end
+end
diff --git a/app/services/projects/upload_service.rb b/app/services/projects/upload_service.rb
deleted file mode 100644
index be34d4fa9b8..00000000000
--- a/app/services/projects/upload_service.rb
+++ /dev/null
@@ -1,22 +0,0 @@
-module Projects
-  class UploadService < BaseService
-    def initialize(project, file)
-      @project, @file = project, file
-    end
-
-    def execute
-      return nil unless @file && @file.size <= max_attachment_size
-
-      uploader = FileUploader.new(@project)
-      uploader.store!(@file)
-
-      uploader.to_h
-    end
-
-    private
-
-    def max_attachment_size
-      current_application_settings.max_attachment_size.megabytes.to_i
-    end
-  end
-end
diff --git a/app/services/upload_service.rb b/app/services/upload_service.rb
new file mode 100644
index 00000000000..6c5b2baff41
--- /dev/null
+++ b/app/services/upload_service.rb
@@ -0,0 +1,20 @@
+class UploadService
+  def initialize(model, file, uploader_class = FileUploader)
+    @model, @file, @uploader_class = model, file, uploader_class
+  end
+
+  def execute
+    return nil unless @file && @file.size <= max_attachment_size
+
+    uploader = @uploader_class.new(@model)
+    uploader.store!(@file)
+
+    uploader.to_h
+  end
+
+  private
+
+  def max_attachment_size
+    current_application_settings.max_attachment_size.megabytes.to_i
+  end
+end
diff --git a/app/uploaders/artifact_uploader.rb b/app/uploaders/artifact_uploader.rb
index e84944ed411..3e36ec91205 100644
--- a/app/uploaders/artifact_uploader.rb
+++ b/app/uploaders/artifact_uploader.rb
@@ -30,8 +30,4 @@ class ArtifactUploader < GitlabUploader
   def filename
     file.try(:filename)
   end
-
-  def exists?
-    file.try(:exists?)
-  end
 end
diff --git a/app/uploaders/file_uploader.rb b/app/uploaders/file_uploader.rb
index d2783ce5b2f..7e94218c23d 100644
--- a/app/uploaders/file_uploader.rb
+++ b/app/uploaders/file_uploader.rb
@@ -26,11 +26,11 @@ class FileUploader < GitlabUploader
     File.join(CarrierWave.root, base_dir, model.path_with_namespace)
   end
 
-  attr_accessor :project
+  attr_accessor :model
   attr_reader :secret
 
-  def initialize(project, secret = nil)
-    @project = project
+  def initialize(model, secret = nil)
+    @model = model
     @secret = secret || generate_secret
   end
 
@@ -38,10 +38,6 @@ class FileUploader < GitlabUploader
     File.join(dynamic_path_segment, @secret)
   end
 
-  def model
-    project
-  end
-
   def relative_path
     self.file.path.sub("#{dynamic_path_segment}/", '')
   end
diff --git a/app/uploaders/gitlab_uploader.rb b/app/uploaders/gitlab_uploader.rb
index d662ba6820c..e0a6c9b4067 100644
--- a/app/uploaders/gitlab_uploader.rb
+++ b/app/uploaders/gitlab_uploader.rb
@@ -33,4 +33,8 @@ class GitlabUploader < CarrierWave::Uploader::Base
   def relative_path
     self.file.path.sub("#{root}/", '')
   end
+
+  def exists?
+    file.try(:exists?)
+  end
 end
diff --git a/app/uploaders/lfs_object_uploader.rb b/app/uploaders/lfs_object_uploader.rb
index faab539b8e0..95a891111e1 100644
--- a/app/uploaders/lfs_object_uploader.rb
+++ b/app/uploaders/lfs_object_uploader.rb
@@ -9,10 +9,6 @@ class LfsObjectUploader < GitlabUploader
     "#{Gitlab.config.lfs.storage_path}/tmp/cache"
   end
 
-  def exists?
-    file.try(:exists?)
-  end
-
   def filename
     model.oid[4..-1]
   end
diff --git a/app/uploaders/personal_file_uploader.rb b/app/uploaders/personal_file_uploader.rb
new file mode 100644
index 00000000000..969b0a20d38
--- /dev/null
+++ b/app/uploaders/personal_file_uploader.rb
@@ -0,0 +1,15 @@
+class PersonalFileUploader < FileUploader
+  def self.dynamic_path_segment(model)
+    File.join(CarrierWave.root, model_path(model))
+  end
+
+  private
+
+  def secure_url
+    File.join(self.class.model_path(model), secret, file.filename)
+  end
+
+  def self.model_path(model)
+    File.join("/#{base_dir}", model.class.to_s.underscore, model.id.to_s)
+  end
+end
diff --git a/app/validators/dynamic_path_validator.rb b/app/validators/dynamic_path_validator.rb
index 226eb6b313c..d992b0c3725 100644
--- a/app/validators/dynamic_path_validator.rb
+++ b/app/validators/dynamic_path_validator.rb
@@ -115,13 +115,20 @@ class DynamicPathValidator < ActiveModel::EachValidator
   # this would map to the activity-page of it's parent.
   GROUP_ROUTES = %w[
     activity
+    analytics
+    audit_events
     avatar
     edit
     group_members
+    hooks
     issues
     labels
+    ldap
+    ldap_group_links
     merge_requests
     milestones
+    notification_setting
+    pipeline_quota
     projects
     subgroups
   ].freeze
diff --git a/app/views/layouts/project.html.haml b/app/views/layouts/project.html.haml
index f5e7ea7710d..e9e06e5c8e3 100644
--- a/app/views/layouts/project.html.haml
+++ b/app/views/layouts/project.html.haml
@@ -11,7 +11,7 @@
     - preview_markdown_path = preview_markdown_namespace_project_path(project.namespace, project)
   - if current_user
     :javascript
-      window.project_uploads_path = "#{namespace_project_uploads_path project.namespace,project}";
+      window.uploads_path = "#{namespace_project_uploads_path project.namespace,project}";
       window.preview_markdown_path = "#{preview_markdown_path}";
 
 - content_for :header_content do
diff --git a/app/views/projects/artifacts/_tree_file.html.haml b/app/views/projects/artifacts/_tree_file.html.haml
index 36fb4c998c9..ce7e25d774b 100644
--- a/app/views/projects/artifacts/_tree_file.html.haml
+++ b/app/views/projects/artifacts/_tree_file.html.haml
@@ -1,9 +1,10 @@
 - path_to_file = file_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: file.path)
 
 %tr.tree-item{ 'data-link' => path_to_file }
+  - blob = file.blob
   %td.tree-item-file-name
-    = tree_icon('file', '664', file.name)
-    %span.str-truncated
-      = link_to file.name, path_to_file
+    = tree_icon('file', blob.mode, blob.name)
+    = link_to path_to_file do
+      %span.str-truncated= blob.name
   %td
-    = number_to_human_size(file.metadata[:size], precision: 2)
+    = number_to_human_size(blob.size, precision: 2)
diff --git a/app/views/projects/artifacts/file.html.haml b/app/views/projects/artifacts/file.html.haml
new file mode 100644
index 00000000000..d8da83b9a80
--- /dev/null
+++ b/app/views/projects/artifacts/file.html.haml
@@ -0,0 +1,33 @@
+- page_title @path, 'Artifacts', "#{@build.name} (##{@build.id})", 'Jobs'
+= render "projects/pipelines/head"
+
+= render "projects/builds/header", show_controls: false
+
+#tree-holder.tree-holder
+  .nav-block
+    %ul.breadcrumb.repo-breadcrumb
+      %li
+        = link_to 'Artifacts', browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build)
+      - path_breadcrumbs do |title, path|
+        - title = truncate(title, length: 40)
+        %li
+          - if path == @path
+            = link_to file_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path) do
+              %strong= title
+          - else
+            = link_to title, browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path)
+
+
+  %article.file-holder
+    - blob = @entry.blob
+    .js-file-title.file-title-flex-parent
+      = render 'projects/blob/header_content', blob: blob
+
+      .file-actions.hidden-xs
+        = render 'projects/blob/viewer_switcher', blob: blob
+
+        .btn-group{ role: "group" }<
+          = copy_blob_source_button(blob)
+          = open_raw_blob_button(blob)
+
+    = render 'projects/blob/content', blob: blob
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index d3c3e40d518..796ecdfd014 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -1,4 +1,5 @@
 - page_title "New Branch"
+- default_ref = params[:ref] || @project.default_branch
 
 - if @error
   .alert.alert-danger
@@ -16,12 +17,11 @@
       .help-block.text-danger.js-branch-name-error
   .form-group
     = label_tag :ref, 'Create from', class: 'control-label'
-    .col-sm-10
-      = hidden_field_tag :ref, params[:ref] || @project.default_branch
-      = dropdown_tag(params[:ref] || @project.default_branch,
-                     options: { toggle_class: 'js-branch-select wide',
-                                filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search branches",
-                                data: { selected: params[:ref] || @project.default_branch, field_name: 'ref' } })
+    .col-sm-10.dropdown.create-from
+      = hidden_field_tag :ref, default_ref
+      = button_tag type: 'button', title: default_ref, class: 'dropdown-toggle form-control js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+        .text-left.dropdown-toggle-text= default_ref
+      = render 'shared/ref_dropdown', dropdown_class: 'wide'
       .help-block Existing branch name, tag, or commit SHA
   .form-actions
     = button_tag 'Create branch', class: 'btn btn-create', tabindex: 3
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index 0f080b6acee..1f4c9fac54c 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -9,7 +9,7 @@
         = hidden_field_tag :from, params[:from]
         = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
           .dropdown-toggle-text.str-truncated= params[:from] || 'Select branch/tag'
-      = render "ref_dropdown"
+      = render 'shared/ref_dropdown'
     .compare-ellipsis.inline ...
     .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
       .input-group.inline-input-group
@@ -17,7 +17,7 @@
         = hidden_field_tag :to, params[:to]
         = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
           .dropdown-toggle-text.str-truncated= params[:to] || 'Select branch/tag'
-      = render "ref_dropdown"
+      = render 'shared/ref_dropdown'
     &nbsp;
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"
     - if @merge_request.present?
diff --git a/app/views/projects/deploy_keys/_index.html.haml b/app/views/projects/deploy_keys/_index.html.haml
index 4cfbd9add00..74756b58439 100644
--- a/app/views/projects/deploy_keys/_index.html.haml
+++ b/app/views/projects/deploy_keys/_index.html.haml
@@ -10,25 +10,4 @@
     = render @deploy_keys.form_partial_path
   .col-lg-9.col-lg-offset-3
     %hr
-  .col-lg-9.col-lg-offset-3.append-bottom-default.deploy-keys
-    %h5.prepend-top-0
-      Enabled deploy keys for this project (#{@deploy_keys.enabled_keys_size})
-    - if @deploy_keys.any_keys_enabled?
-      %ul.well-list
-        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.enabled_keys, as: :deploy_key
-    - else
-      .settings-message.text-center
-        No deploy keys found. Create one with the form above.
-    %h5.prepend-top-default
-      Deploy keys from projects you have access to (#{@deploy_keys.available_project_keys_size})
-    - if @deploy_keys.any_available_project_keys_enabled?
-      %ul.well-list
-        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.available_project_keys, as: :deploy_key
-    - else
-      .settings-message.text-center
-        No deploy keys from your projects could be found. Create one with the form above or add existing one below.
-    - if @deploy_keys.any_available_public_keys_enabled?
-      %h5.prepend-top-default
-        Public deploy keys available to any project (#{@deploy_keys.available_public_keys_size})
-      %ul.well-list
-        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.available_public_keys, as: :deploy_key
+  #js-deploy-keys{ data: { endpoint: namespace_project_deploy_keys_path } }
diff --git a/app/views/projects/notes/_actions.html.haml b/app/views/projects/notes/_actions.html.haml
index 718b52dd82e..d70ec8a6062 100644
--- a/app/views/projects/notes/_actions.html.haml
+++ b/app/views/projects/notes/_actions.html.haml
@@ -31,14 +31,14 @@
 - if current_user
   - if note.emoji_awardable?
     - user_authored = note.user_authored?(current_user)
-    = link_to '#', title: 'Award Emoji', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored}", data: { position: 'right' } do
+    = link_to '#', title: 'Award Emoji', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored} has-tooltip", data: { position: 'right' } do
       = icon('spinner spin')
       %span{ class: 'link-highlight award-control-icon-neutral' }= custom_icon('emoji_slightly_smiling_face')
       %span{ class: 'link-highlight award-control-icon-positive' }= custom_icon('emoji_smiley')
       %span{ class: 'link-highlight award-control-icon-super-positive' }= custom_icon('emoji_smile')
 
   - if note_editable
-    = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
+    = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip' do
       = icon('pencil', class: 'link-highlight')
-    = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger' do
+    = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger has-tooltip' do
       = icon('trash-o', class: 'danger-highlight')
diff --git a/app/views/projects/settings/repository/show.html.haml b/app/views/projects/settings/repository/show.html.haml
index 5402320cb66..4e59033c4a3 100644
--- a/app/views/projects/settings/repository/show.html.haml
+++ b/app/views/projects/settings/repository/show.html.haml
@@ -1,6 +1,10 @@
 - page_title "Repository"
 = render "projects/settings/head"
 
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('deploy_keys')
+
 = render @deploy_keys
 = render "projects/protected_branches/index"
 = render "projects/protected_tags/index"
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 7f9a44e565f..56656ea3d86 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -1,4 +1,5 @@
 - @no_container = true
+- @sort ||= sort_value_recently_updated
 - page_title "Tags"
 = render "projects/commits/head"
 
@@ -14,16 +15,14 @@
       .dropdown
         %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown'} }
           %span.light
-            = projects_sort_options_hash[@sort]
+            = tags_sort_options_hash[@sort]
           = icon('chevron-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
-          %li
-            = link_to filter_tags_path(sort: sort_value_name) do
-              = sort_title_name
-            = link_to filter_tags_path(sort: sort_value_recently_updated) do
-              = sort_title_recently_updated
-            = link_to filter_tags_path(sort: sort_value_oldest_updated) do
-              = sort_title_oldest_updated
+        %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+          %li.dropdown-header
+            Sort by
+          - tags_sort_options_hash.each do |value, title|
+            %li
+              = link_to title, filter_tags_path(sort: value), class: ("is-active" if @sort == value)
       - if can?(current_user, :push_code, @project)
         = link_to new_namespace_project_tag_path(@project.namespace, @project), class: 'btn btn-create new-tag-btn' do
           New tag
diff --git a/app/views/shared/_mini_pipeline_graph.html.haml b/app/views/shared/_mini_pipeline_graph.html.haml
index b0778653d4e..07970ad9cba 100644
--- a/app/views/shared/_mini_pipeline_graph.html.haml
+++ b/app/views/shared/_mini_pipeline_graph.html.haml
@@ -11,8 +11,8 @@
           = icon('caret-down')
 
         %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
-          .arrow-up
-          .js-builds-dropdown-list.scrollable-menu
+          %li.js-builds-dropdown-list.scrollable-menu
 
-          .js-builds-dropdown-loading.builds-dropdown-loading.hidden
-            %span.fa.fa-spinner.fa-spin
+          %li.js-builds-dropdown-loading.hidden
+            .text-center
+              %i.fa.fa-spinner.fa-spin{ 'aria-hidden': 'true', 'aria-label': 'Loading' }
diff --git a/app/views/projects/compare/_ref_dropdown.html.haml b/app/views/shared/_ref_dropdown.html.haml
index 05fb37cdc0f..96f68c80c48 100644
--- a/app/views/projects/compare/_ref_dropdown.html.haml
+++ b/app/views/shared/_ref_dropdown.html.haml
@@ -1,4 +1,6 @@
-.dropdown-menu.dropdown-menu-selectable
+- dropdown_class = local_assigns.fetch(:dropdown_class, '')
+
+.dropdown-menu.dropdown-menu-selectable{ class: dropdown_class }
   = dropdown_title "Select Git revision"
   = dropdown_filter "Filter by Git revision"
   = dropdown_content
diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml
index 2793e7bcff4..f57b4d899ce 100644
--- a/app/views/shared/issuable/form/_branch_chooser.html.haml
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -10,12 +10,16 @@
     = form.label :source_branch, class: 'control-label'
     .col-sm-10
       .issuable-form-select-holder
-        = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2 span2', disabled: true })
+        = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2', disabled: true })
 .form-group
   = form.label :target_branch, class: 'control-label'
-  .col-sm-10
+  .col-sm-10.target-branch-select-dropdown-container
     .issuable-form-select-holder
-      = form.select(:target_branch, issuable.target_branches, { include_blank: true }, { class: 'target_branch select2 span2', disabled: issuable.new_record?, data: { placeholder: "Select branch" }})
+      = form.select(:target_branch, issuable.target_branches,
+        { include_blank: true },
+        { class: 'target_branch js-target-branch-select',
+          disabled: issuable.new_record?,
+          data: { placeholder: "Select branch" }})
     - if issuable.new_record?
       &nbsp;
       = link_to 'Change branches', mr_change_branches_path(issuable)
diff --git a/app/views/snippets/notes/_actions.html.haml b/app/views/snippets/notes/_actions.html.haml
index dace11e5474..679a5e934da 100644
--- a/app/views/snippets/notes/_actions.html.haml
+++ b/app/views/snippets/notes/_actions.html.haml
@@ -1,13 +1,13 @@
 - if current_user
   - if note.emoji_awardable?
     - user_authored = note.user_authored?(current_user)
-    = link_to '#', title: 'Award Emoji', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored}", data: { position: 'right' } do
+    = link_to '#', title: 'Award Emoji', class: "note-action-button note-emoji-button js-add-award js-note-emoji #{'js-user-authored' if user_authored} has-tooltip", data: { position: 'right' } do
       = icon('spinner spin')
       %span{ class: 'link-highlight award-control-icon-neutral' }= custom_icon('emoji_slightly_smiling_face')
       %span{ class: 'link-highlight award-control-icon-positive' }= custom_icon('emoji_smiley')
       %span{ class: 'link-highlight award-control-icon-super-positive' }= custom_icon('emoji_smile')
   - if note_editable
-    = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
+    = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip' do
       = icon('pencil', class: 'link-highlight')
-    = link_to snippet_note_path(note.noteable, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger' do
+    = link_to snippet_note_path(note.noteable, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger has-tooltip' do
       = icon('trash-o', class: 'danger-highlight')