Merge branch 'master' into feature/gb/manual-actions-protected-branches-permissions

* master: (641 commits)
  Revert "Fix registry for projects with uppercases in path"
  Fix registry for projects with uppercases in path
  Move event icons into events_helper
  Reset New branch button when issue state changes
  Add link to environments on kubernetes.md
  Indent system notes on desktop screens
  Improve webpack-dev-server compatibility with non-localhost setups.
  Add changelog entry
  Fix recent searches icon alignment in Safari
  Use preload to avoid Rails using JOIN
  Fix NUMBER_OF_TRUNCATED_DIFF_LINES re-definition error
  Prepare for zero downtime migrations
  Fix filtered search input width for IE
  Fix the `gitlab:gitlab_shell:check` task
  Fixed random failures with Poll spec
  Include CONTRIBUTING.md file when importing .gitlab-ci.yml templates
  Let uses hide verbose output by default
  Separate examples for each other
  Collapse similar sibling scenarios
  Use empty_project for resources that are independent of the repo
  ...

Conflicts:
	app/views/projects/ci/builds/_build.html.haml

77 files changed, 2586 insertions, 1880 deletions

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 67106e85a37..ce426741637 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -51,7 +51,7 @@ function renderCategory(name, emojiList, opts = {}) {
     <h5 class="emoji-menu-title">
       ${name}
     </h5>
-    <ul class="clearfix emoji-menu-list ${opts.menuListClass}">
+    <ul class="clearfix emoji-menu-list ${opts.menuListClass || ''}">
       ${emojiList.map(emojiName => `
         <li class="emoji-menu-list-item">
           <button class="emoji-menu-btn text-center js-emoji-btn" type="button">
diff --git a/app/assets/javascripts/behaviors/autosize.js b/app/assets/javascripts/behaviors/autosize.js
index f7f41d55b52..3bea460dcc6 100644
--- a/app/assets/javascripts/behaviors/autosize.js
+++ b/app/assets/javascripts/behaviors/autosize.js
@@ -1,28 +1,23 @@
-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, consistent-return, max-len */
-/* global autosize */
+import autosize from 'vendor/autosize';
 
-var autosize = require('vendor/autosize');
+$(() => {
+  const $fields = $('.js-autosize');
 
-(function() {
-  $(function() {
-    var $fields;
-    $fields = $('.js-autosize');
-    $fields.on('autosize:resized', function() {
-      var $field;
-      $field = $(this);
-      return $field.data('height', $field.outerHeight());
-    });
-    $fields.on('resize.autosize', function() {
-      var $field;
-      $field = $(this);
-      if ($field.data('height') !== $field.outerHeight()) {
-        $field.data('height', $field.outerHeight());
-        autosize.destroy($field);
-        return $field.css('max-height', window.outerHeight);
-      }
-    });
-    autosize($fields);
-    autosize.update($fields);
-    return $fields.css('resize', 'vertical');
+  $fields.on('autosize:resized', function resized() {
+    const $field = $(this);
+    $field.data('height', $field.outerHeight());
   });
-}).call(window);
+
+  $fields.on('resize.autosize', function resize() {
+    const $field = $(this);
+    if ($field.data('height') !== $field.outerHeight()) {
+      $field.data('height', $field.outerHeight());
+      autosize.destroy($field);
+      $field.css('max-height', window.outerHeight);
+    }
+  });
+
+  autosize($fields);
+  autosize.update($fields);
+  $fields.css('resize', 'vertical');
+});
diff --git a/app/assets/javascripts/behaviors/details_behavior.js b/app/assets/javascripts/behaviors/details_behavior.js
index fd0840fa117..7c9dbcc8d6e 100644
--- a/app/assets/javascripts/behaviors/details_behavior.js
+++ b/app/assets/javascripts/behaviors/details_behavior.js
@@ -1,26 +1,23 @@
-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, quotes, no-var, vars-on-top, max-len */
-(function() {
-  $(function() {
-    $("body").on("click", ".js-details-target", function() {
-      var container;
-      container = $(this).closest(".js-details-container");
-      return container.toggleClass("open");
-    });
-    // Show details content. Hides link after click.
-    //
-    // %div
-    //   %a.js-details-expand
-    //   %div.js-details-content
-    //
-    return $("body").on("click", ".js-details-expand", function(e) {
-      $(this).next('.js-details-content').removeClass("hide");
-      $(this).hide();
 
-      var truncatedItem = $(this).siblings('.js-details-short');
-      if (truncatedItem.length) {
-        truncatedItem.addClass("hide");
-      }
-      return e.preventDefault();
-    });
+$(() => {
+  $('body').on('click', '.js-details-target', function target() {
+    $(this).closest('.js-details-container').toggleClass('open');
   });
-}).call(window);
+
+  // Show details content. Hides link after click.
+  //
+  // %div
+  //   %a.js-details-expand
+  //   %div.js-details-content
+  //
+  $('body').on('click', '.js-details-expand', function expand(e) {
+    e.preventDefault();
+    $(this).next('.js-details-content').removeClass('hide');
+    $(this).hide();
+
+    const truncatedItem = $(this).siblings('.js-details-short');
+    if (truncatedItem.length) {
+      truncatedItem.addClass('hide');
+    }
+  });
+});
diff --git a/app/assets/javascripts/behaviors/index.js b/app/assets/javascripts/behaviors/index.js
new file mode 100644
index 00000000000..5b931e6cfa6
--- /dev/null
+++ b/app/assets/javascripts/behaviors/index.js
@@ -0,0 +1,9 @@
+import './autosize';
+import './bind_in_out';
+import './details_behavior';
+import { installGlEmojiElement } from './gl_emoji';
+import './quick_submit';
+import './requires_input';
+import './toggler_behavior';
+
+installGlEmojiElement();
diff --git a/app/assets/javascripts/behaviors/quick_submit.js b/app/assets/javascripts/behaviors/quick_submit.js
index 626f3503c91..3d162b24413 100644
--- a/app/assets/javascripts/behaviors/quick_submit.js
+++ b/app/assets/javascripts/behaviors/quick_submit.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, camelcase, consistent-return, quotes, object-shorthand, comma-dangle, max-len */
+import '../commons/bootstrap';
 
 // Quick Submit behavior
 //
@@ -6,9 +6,6 @@
 // "Meta+Enter" (Mac) or "Ctrl+Enter" (Linux/Windows) key combination, the form
 // is submitted.
 //
-import '../commons/bootstrap';
-
-//
 // ### Example Markup
 //
 //   <form action="/foo" class="js-quick-submit">
@@ -17,61 +14,59 @@ import '../commons/bootstrap';
 //     <input type="submit" value="Submit" />
 //   </form>
 //
-(function() {
-  var isMac, keyCodeIs;
 
-  isMac = function() {
-    return navigator.userAgent.match(/Macintosh/);
-  };
+function isMac() {
+  return navigator.userAgent.match(/Macintosh/);
+}
 
-  keyCodeIs = function(e, keyCode) {
-    if ((e.originalEvent && e.originalEvent.repeat) || e.repeat) {
-      return false;
-    }
-    return e.keyCode === keyCode;
-  };
+function keyCodeIs(e, keyCode) {
+  if ((e.originalEvent && e.originalEvent.repeat) || e.repeat) {
+    return false;
+  }
+  return e.keyCode === keyCode;
+}
 
-  $(document).on('keydown.quick_submit', '.js-quick-submit', function(e) {
-    var $form, $submit_button;
-    // Enter
-    if (!keyCodeIs(e, 13)) {
-      return;
-    }
-    if (!((e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey) || (e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey))) {
-      return;
-    }
-    e.preventDefault();
-    $form = $(e.target).closest('form');
-    $submit_button = $form.find('input[type=submit], button[type=submit]');
-    if ($submit_button.attr('disabled')) {
-      return;
-    }
-    $submit_button.disable();
-    return $form.submit();
-  });
+$(document).on('keydown.quick_submit', '.js-quick-submit', (e) => {
+  // Enter
+  if (!keyCodeIs(e, 13)) {
+    return;
+  }
+
+  const onlyMeta = e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey;
+  const onlyCtrl = e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey;
+  if (!onlyMeta && !onlyCtrl) {
+    return;
+  }
+
+  e.preventDefault();
+  const $form = $(e.target).closest('form');
+  const $submitButton = $form.find('input[type=submit], button[type=submit]');
+
+  if (!$submitButton.attr('disabled')) {
+    $submitButton.disable();
+    $form.submit();
+  }
+});
+
+// If the user tabs to a submit button on a `js-quick-submit` form, display a
+// tooltip to let them know they could've used the hotkey
+$(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]', function displayTooltip(e) {
+  // Tab
+  if (!keyCodeIs(e, 9)) {
+    return;
+  }
+
+  const $this = $(this);
+  const title = isMac() ?
+    'You can also press &#8984;-Enter' :
+    'You can also press Ctrl-Enter';
 
-  // If the user tabs to a submit button on a `js-quick-submit` form, display a
-  // tooltip to let them know they could've used the hotkey
-  $(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]', function(e) {
-    var $this, title;
-    // Tab
-    if (!keyCodeIs(e, 9)) {
-      return;
-    }
-    if (isMac()) {
-      title = "You can also press &#8984;-Enter";
-    } else {
-      title = "You can also press Ctrl-Enter";
-    }
-    $this = $(this);
-    return $this.tooltip({
-      container: 'body',
-      html: 'true',
-      placement: 'auto top',
-      title: title,
-      trigger: 'manual'
-    }).tooltip('show').one('blur', function() {
-      return $this.tooltip('hide');
-    });
+  $this.tooltip({
+    container: 'body',
+    html: 'true',
+    placement: 'auto top',
+    title,
+    trigger: 'manual',
   });
-}).call(window);
+  $this.tooltip('show').one('blur', () => $this.tooltip('hide'));
+});
diff --git a/app/assets/javascripts/behaviors/requires_input.js b/app/assets/javascripts/behaviors/requires_input.js
index eb7143f5b1a..b20d108aa25 100644
--- a/app/assets/javascripts/behaviors/requires_input.js
+++ b/app/assets/javascripts/behaviors/requires_input.js
@@ -1,12 +1,10 @@
-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, no-else-return, consistent-return, max-len */
+import '../commons/bootstrap';
+
 // Requires Input behavior
 //
 // When called on a form with input fields with the `required` attribute, the
 // form's submit button will be disabled until all required fields have values.
 //
-import '../commons/bootstrap';
-
-//
 // ### Example Markup
 //
 //   <form class="js-requires-input">
@@ -14,49 +12,43 @@ import '../commons/bootstrap';
 //     <input type="submit" value="Submit">
 //   </form>
 //
-(function() {
-  $.fn.requiresInput = function() {
-    var $button, $form, fieldSelector, requireInput, required;
-    $form = $(this);
-    $button = $('button[type=submit], input[type=submit]', $form);
-    required = '[required=required]';
-    fieldSelector = "input" + required + ", select" + required + ", textarea" + required;
-    requireInput = function() {
-      var values;
-      values = _.map($(fieldSelector, $form), function(field) {
-        // Collect the input values of *all* required fields
-        return field.value;
-      });
-      // Disable the button if any required fields are empty
-      if (values.length && _.any(values, _.isEmpty)) {
-        return $button.disable();
-      } else {
-        return $button.enable();
-      }
-    };
-    // Set initial button state
-    requireInput();
-    return $form.on('change input', fieldSelector, requireInput);
-  };
 
-  $(function() {
-    var $form, hideOrShowHelpBlock;
-    $form = $('form.js-requires-input');
-    $form.requiresInput();
-    // Hide or Show the help block when creating a new project
-    // based on the option selected
-    hideOrShowHelpBlock = function(form) {
-      var selected;
-      selected = $('.js-select-namespace option:selected');
-      if (selected.length && selected.data('options-parent') === 'groups') {
-        return form.find('.help-block').hide();
-      } else if (selected.length) {
-        return form.find('.help-block').show();
-      }
-    };
-    hideOrShowHelpBlock($form);
-    return $('.select2.js-select-namespace').change(function() {
-      return hideOrShowHelpBlock($form);
-    });
-  });
-}).call(window);
+$.fn.requiresInput = function requiresInput() {
+  const $form = $(this);
+  const $button = $('button[type=submit], input[type=submit]', $form);
+  const fieldSelector = 'input[required=required], select[required=required], textarea[required=required]';
+
+  function requireInput() {
+    // Collect the input values of *all* required fields
+    const values = _.map($(fieldSelector, $form), field => field.value);
+
+    // Disable the button if any required fields are empty
+    if (values.length && _.any(values, _.isEmpty)) {
+      $button.disable();
+    } else {
+      $button.enable();
+    }
+  }
+
+  // Set initial button state
+  requireInput();
+  $form.on('change input', fieldSelector, requireInput);
+};
+
+// Hide or Show the help block when creating a new project
+// based on the option selected
+function hideOrShowHelpBlock(form) {
+  const selected = $('.js-select-namespace option:selected');
+  if (selected.length && selected.data('options-parent') === 'groups') {
+    form.find('.help-block').hide();
+  } else if (selected.length) {
+    form.find('.help-block').show();
+  }
+}
+
+$(() => {
+  const $form = $('form.js-requires-input');
+  $form.requiresInput();
+  hideOrShowHelpBlock($form);
+  $('.select2.js-select-namespace').change(() => hideOrShowHelpBlock($form));
+});
diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js
index 576b8a0425f..4c9ad128e6c 100644
--- a/app/assets/javascripts/behaviors/toggler_behavior.js
+++ b/app/assets/javascripts/behaviors/toggler_behavior.js
@@ -1,44 +1,43 @@
-/* eslint-disable wrap-iife, func-names, space-before-function-paren, prefer-arrow-callback, vars-on-top, no-var, max-len */
-(function(w) {
-  $(function() {
-    var toggleContainer = function(container, /* optional */toggleState) {
-      var $container = $(container);
-
-      $container
-        .find('.js-toggle-button .fa')
-        .toggleClass('fa-chevron-up', toggleState)
-        .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
-
-      $container
-        .find('.js-toggle-content')
-        .toggle(toggleState);
-    };
-
-    // Toggle button. Show/hide content inside parent container.
-    // Button does not change visibility. If button has icon - it changes chevron style.
-    //
-    // %div.js-toggle-container
-    //   %button.js-toggle-button
-    //   %div.js-toggle-content
-    //
-    $('body').on('click', '.js-toggle-button', function(e) {
-      toggleContainer($(this).closest('.js-toggle-container'));
-
-      const targetTag = e.currentTarget.tagName.toLowerCase();
-      if (targetTag === 'a' || targetTag === 'button') {
-        e.preventDefault();
-      }
-    });
-
-    // If we're accessing a permalink, ensure it is not inside a
-    // closed js-toggle-container!
-    var hash = w.gl.utils.getLocationHash();
-    var anchor = hash && document.getElementById(hash);
-    var container = anchor && $(anchor).closest('.js-toggle-container');
-
-    if (container) {
-      toggleContainer(container, true);
-      anchor.scrollIntoView();
+
+// Toggle button. Show/hide content inside parent container.
+// Button does not change visibility. If button has icon - it changes chevron style.
+//
+// %div.js-toggle-container
+//   %button.js-toggle-button
+//   %div.js-toggle-content
+//
+
+$(() => {
+  function toggleContainer(container, toggleState) {
+    const $container = $(container);
+
+    $container
+      .find('.js-toggle-button .fa')
+      .toggleClass('fa-chevron-up', toggleState)
+      .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
+
+    $container
+      .find('.js-toggle-content')
+      .toggle(toggleState);
+  }
+
+  $('body').on('click', '.js-toggle-button', function toggleButton(e) {
+    toggleContainer($(this).closest('.js-toggle-container'));
+
+    const targetTag = e.currentTarget.tagName.toLowerCase();
+    if (targetTag === 'a' || targetTag === 'button') {
+      e.preventDefault();
     }
   });
-})(window);
+
+  // If we're accessing a permalink, ensure it is not inside a
+  // closed js-toggle-container!
+  const hash = window.gl.utils.getLocationHash();
+  const anchor = hash && document.getElementById(hash);
+  const container = anchor && $(anchor).closest('.js-toggle-container');
+
+  if (container) {
+    toggleContainer(container, true);
+    anchor.scrollIntoView();
+  }
+});
diff --git a/app/assets/javascripts/blob/blob_fork_suggestion.js b/app/assets/javascripts/blob/blob_fork_suggestion.js
new file mode 100644
index 00000000000..aa9a4e1c99a
--- /dev/null
+++ b/app/assets/javascripts/blob/blob_fork_suggestion.js
@@ -0,0 +1,15 @@
+function BlobForkSuggestion(openButton, cancelButton, suggestionSection) {
+  if (openButton) {
+    openButton.addEventListener('click', () => {
+      suggestionSection.classList.remove('hidden');
+    });
+  }
+
+  if (cancelButton) {
+    cancelButton.addEventListener('click', () => {
+      suggestionSection.classList.add('hidden');
+    });
+  }
+}
+
+export default BlobForkSuggestion;
diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index e057ac8df02..b749ef43cd3 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -38,6 +38,10 @@ $(() => {
 
   Store.create();
 
+  // hack to allow sidebar scripts like milestone_select manipulate the BoardsStore
+  gl.issueBoards.boardStoreIssueSet = (...args) => Vue.set(Store.detail.issue, ...args);
+  gl.issueBoards.boardStoreIssueDelete = (...args) => Vue.delete(Store.detail.issue, ...args);
+
   gl.IssueBoardsApp = new Vue({
     el: $boardApp,
     components: {
@@ -81,6 +85,7 @@ $(() => {
 
             if (list.type === 'closed') {
               list.position = Infinity;
+              list.label = { description: 'Shows all closed issues. Moving an issue to this list closes it' };
             }
           });
 
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index a4629b092bf..e48d3344a2b 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -20,6 +20,7 @@ import eventHub from '../eventhub';
       list: {
         type: Object,
         required: false,
+        default: () => ({}),
       },
       rootPath: {
         type: String,
@@ -31,6 +32,26 @@ import eventHub from '../eventhub';
         default: false,
       },
     },
+    computed: {
+      cardUrl() {
+        return `${this.issueLinkBase}/${this.issue.id}`;
+      },
+      assigneeUrl() {
+        return `${this.rootPath}${this.issue.assignee.username}`;
+      },
+      assigneeUrlTitle() {
+        return `Assigned to ${this.issue.assignee.name}`;
+      },
+      avatarUrlTitle() {
+        return `Avatar for ${this.issue.assignee.name}`;
+      },
+      issueId() {
+        return `#${this.issue.id}`;
+      },
+      showLabelFooter() {
+        return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
+      },
+    },
     methods: {
       showLabel(label) {
         if (!this.list) return true;
@@ -67,35 +88,41 @@ import eventHub from '../eventhub';
     },
     template: `
       <div>
-        <h4 class="card-title">
-          <i
-            class="fa fa-eye-slash confidential-icon"
-            v-if="issue.confidential"></i>
-          <a
-            :href="issueLinkBase + '/' + issue.id"
-            :title="issue.title">
-            {{ issue.title }}
-          </a>
-        </h4>
-        <div class="card-footer">
-          <span
-            class="card-number"
-            v-if="issue.id">
-            #{{ issue.id }}
-          </span>
+        <div class="card-header">
+          <h4 class="card-title">
+            <i
+              class="fa fa-eye-slash confidential-icon"
+              v-if="issue.confidential"
+              aria-hidden="true"
+            />
+            <a
+              class="js-no-trigger"
+              :href="cardUrl"
+              :title="issue.title">{{ issue.title }}</a>
+            <span
+              class="card-number"
+              v-if="issue.id"
+            >
+              {{ issueId }}
+            </span>
+          </h4>
           <a
             class="card-assignee has-tooltip js-no-trigger"
-            :href="rootPath + issue.assignee.username"
-            :title="'Assigned to ' + issue.assignee.name"
+            :href="assigneeUrl"
+            :title="assigneeUrlTitle"
             v-if="issue.assignee"
-            data-container="body">
+            data-container="body"
+          >
             <img
               class="avatar avatar-inline s20 js-no-trigger"
               :src="issue.assignee.avatar"
               width="20"
               height="20"
-              :alt="'Avatar for ' + issue.assignee.name" />
+              :alt="avatarUrlTitle"
+            />
           </a>
+        </div>
+        <div class="card-footer" v-if="showLabelFooter">
           <button
             class="label color-label has-tooltip js-no-trigger"
             v-for="label in issue.labels"
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index fe54ecffdfe..0aad95c2fe3 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -1,24 +1,28 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-param-reassign, quotes, yoda, no-else-return, consistent-return, comma-dangle, object-shorthand, prefer-template, one-var, one-var-declaration-per-line, no-unused-vars, max-len, vars-on-top */
+/* eslint-disable func-names, wrap-iife, no-use-before-define,
+consistent-return, prefer-rest-params */
 /* global Breakpoints */
 
-var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-var AUTO_SCROLL_OFFSET = 75;
-var DOWN_BUILD_TRACE = '#down-build-trace';
+const bind = function (fn, me) { return function () { return fn.apply(me, arguments); }; };
+const AUTO_SCROLL_OFFSET = 75;
+const DOWN_BUILD_TRACE = '#down-build-trace';
 
-window.Build = (function() {
+window.Build = (function () {
   Build.timeout = null;
 
   Build.state = null;
 
   function Build(options) {
-    options = options || $('.js-build-options').data();
-    this.pageUrl = options.pageUrl;
-    this.buildUrl = options.buildUrl;
-    this.buildStatus = options.buildStatus;
-    this.state = options.logState;
-    this.buildStage = options.buildStage;
-    this.updateDropdown = bind(this.updateDropdown, this);
+    this.options = options || $('.js-build-options').data();
+
+    this.pageUrl = this.options.pageUrl;
+    this.buildUrl = this.options.buildUrl;
+    this.buildStatus = this.options.buildStatus;
+    this.state = this.options.logState;
+    this.buildStage = this.options.buildStage;
     this.$document = $(document);
+
+    this.updateDropdown = bind(this.updateDropdown, this);
+
     this.$body = $('body');
     this.$buildTrace = $('#build-trace');
     this.$autoScrollContainer = $('.autoscroll-container');
@@ -29,112 +33,112 @@ window.Build = (function() {
     this.$scrollTopBtn = $('#scroll-top');
     this.$scrollBottomBtn = $('#scroll-bottom');
     this.$buildRefreshAnimation = $('.js-build-refresh');
+    this.$buildScroll = $('#js-build-scroll');
+    this.$truncatedInfo = $('.js-truncated-info');
 
     clearTimeout(Build.timeout);
     // Init breakpoint checker
     this.bp = Breakpoints.get();
 
     this.initSidebar();
-    this.$buildScroll = $('#js-build-scroll');
-
     this.populateJobs(this.buildStage);
     this.updateStageDropdownText(this.buildStage);
     this.sidebarOnResize();
 
-    this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
-    this.$document.off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
+    this.$document
+      .off('click', '.js-sidebar-build-toggle')
+      .on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
+
+    this.$document
+      .off('click', '.stage-item')
+      .on('click', '.stage-item', this.updateDropdown);
+
     this.$document.on('scroll', this.initScrollMonitor.bind(this));
-    $(window).off('resize.build').on('resize.build', this.sidebarOnResize.bind(this));
-    $('a', this.$buildScroll).off('click.stepTrace').on('click.stepTrace', this.stepTrace);
+
+    $(window)
+      .off('resize.build')
+      .on('resize.build', this.sidebarOnResize.bind(this));
+
+    $('a', this.$buildScroll)
+      .off('click.stepTrace')
+      .on('click.stepTrace', this.stepTrace);
+
     this.updateArtifactRemoveDate();
-    if ($('#build-trace').length) {
-      this.getInitialBuildTrace();
-      this.initScrollButtonAffix();
-    }
+    this.initScrollButtonAffix();
     this.invokeBuildTrace();
   }
 
-  Build.prototype.initSidebar = function() {
+  Build.prototype.initSidebar = function () {
     this.$sidebar = $('.js-build-sidebar');
     this.$sidebar.niceScroll();
-    this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
-  };
-
-  Build.prototype.location = function() {
-    return window.location.href.split("#")[0];
+    this.$document
+      .off('click', '.js-sidebar-build-toggle')
+      .on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
   };
 
-  Build.prototype.invokeBuildTrace = function() {
-    var continueRefreshStatuses = ['running', 'pending'];
-    // Continue to update build trace when build is running or pending
-    if (continueRefreshStatuses.indexOf(this.buildStatus) !== -1) {
-      // Check for new build output if user still watching build page
-      // Only valid for runnig build when output changes during time
-      Build.timeout = setTimeout((function(_this) {
-        return function() {
-          if (_this.location() === _this.pageUrl) {
-            return _this.getBuildTrace();
-          }
-        };
-      })(this), 4000);
-    }
+  Build.prototype.invokeBuildTrace = function () {
+    return this.getBuildTrace();
   };
 
-  Build.prototype.getInitialBuildTrace = function() {
-    var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped'];
-
+  Build.prototype.getBuildTrace = function () {
     return $.ajax({
-      url: this.buildUrl,
+      url: `${this.pageUrl}/trace.json`,
       dataType: 'json',
-      success: function(buildData) {
-        $('.js-build-output').html(buildData.trace_html);
+      data: {
+        state: this.state,
+      },
+      success: ((log) => {
+        const $buildContainer = $('.js-build-output');
+
         gl.utils.setCiStatusFavicon(`${this.pageUrl}/status.json`);
-        if (window.location.hash === DOWN_BUILD_TRACE) {
-          $("html,body").scrollTop(this.$buildTrace.height());
+
+        if (log.state) {
+          this.state = log.state;
         }
-        if (removeRefreshStatuses.indexOf(buildData.status) !== -1) {
+
+        if (log.append) {
+          $buildContainer.append(log.html);
+        } else {
+          $buildContainer.html(log.html);
+          if (log.truncated) {
+            $('.js-truncated-info-size').html(` ${log.size} `);
+            this.$truncatedInfo.removeClass('hidden');
+            this.initAffixTruncatedInfo();
+          } else {
+            this.$truncatedInfo.addClass('hidden');
+          }
+        }
+
+        this.checkAutoscroll();
+
+        if (!log.complete) {
+          Build.timeout = setTimeout(() => {
+            this.invokeBuildTrace();
+          }, 4000);
+        } else {
           this.$buildRefreshAnimation.remove();
-          return this.initScrollMonitor();
         }
-      }.bind(this)
-    });
-  };
 
-  Build.prototype.getBuildTrace = function() {
-    return $.ajax({
-      url: this.pageUrl + "/trace.json?state=" + (encodeURIComponent(this.state)),
-      dataType: "json",
-      success: (function(_this) {
-        return function(log) {
-          var pageUrl;
-
-          if (log.state) {
-            _this.state = log.state;
-          }
-          _this.invokeBuildTrace();
-          if (log.status === "running") {
-            if (log.append) {
-              $('.js-build-output').append(log.html);
-            } else {
-              $('.js-build-output').html(log.html);
-            }
-            return _this.checkAutoscroll();
-          } else if (log.status !== _this.buildStatus) {
-            pageUrl = _this.pageUrl;
-            if (_this.$autoScrollStatus.data('state') === 'enabled') {
-              pageUrl += DOWN_BUILD_TRACE;
-            }
-
-            return gl.utils.visitUrl(pageUrl);
+        if (log.status !== this.buildStatus) {
+          let pageUrl = this.pageUrl;
+
+          if (this.$autoScrollStatus.data('state') === 'enabled') {
+            pageUrl += DOWN_BUILD_TRACE;
           }
-        };
-      })(this)
+
+          gl.utils.visitUrl(pageUrl);
+        }
+      }),
+      error: () => {
+        this.$buildRefreshAnimation.remove();
+        return this.initScrollMonitor();
+      },
     });
   };
 
-  Build.prototype.checkAutoscroll = function() {
-    if (this.$autoScrollStatus.data("state") === "enabled") {
-      return $("html,body").scrollTop(this.$buildTrace.height());
+  Build.prototype.checkAutoscroll = function () {
+    if (this.$autoScrollStatus.data('state') === 'enabled') {
+      return $('html,body').scrollTop(this.$buildTrace.height());
     }
 
     // Handle a situation where user started new build
@@ -146,7 +150,7 @@ window.Build = (function() {
     }
   };
 
-  Build.prototype.initScrollButtonAffix = function() {
+  Build.prototype.initScrollButtonAffix = function () {
     // Hide everything initially
     this.$scrollTopBtn.hide();
     this.$scrollBottomBtn.hide();
@@ -167,15 +171,17 @@ window.Build = (function() {
   //      - Show Top Arrow button
   //      - Show Bottom Arrow button
   //      - Disable Autoscroll and hide indicator (when build is running)
-  Build.prototype.initScrollMonitor = function() {
-    if (!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+  Build.prototype.initScrollMonitor = function () {
+    if (!gl.utils.isInViewport(this.$upBuildTrace.get(0)) &&
+      !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
       // User is somewhere in middle of Build Log
 
       this.$scrollTopBtn.show();
 
       if (this.buildStatus === 'success' || this.buildStatus === 'failed') { // Check if Build is completed
         this.$scrollBottomBtn.show();
-      } else if (this.$buildRefreshAnimation.is(':visible') && !gl.utils.isInViewport(this.$buildRefreshAnimation.get(0))) {
+      } else if (this.$buildRefreshAnimation.is(':visible') &&
+        !gl.utils.isInViewport(this.$buildRefreshAnimation.get(0))) {
         this.$scrollBottomBtn.show();
       } else {
         this.$scrollBottomBtn.hide();
@@ -186,10 +192,13 @@ window.Build = (function() {
         this.$autoScrollContainer.hide();
         this.$autoScrollStatusText.removeClass('animate');
       } else {
-        this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show();
+        this.$autoScrollContainer.css({
+          top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET,
+        }).show();
         this.$autoScrollStatusText.addClass('animate');
       }
-    } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+    } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) &&
+      !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
       // User is at Top of Build Log
 
       this.$scrollTopBtn.hide();
@@ -197,17 +206,22 @@ window.Build = (function() {
 
       this.$autoScrollContainer.hide();
       this.$autoScrollStatusText.removeClass('animate');
-    } else if ((!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && gl.utils.isInViewport(this.$downBuildTrace.get(0))) ||
-               (this.$buildRefreshAnimation.is(':visible') && gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)))) {
+    } else if ((!gl.utils.isInViewport(this.$upBuildTrace.get(0)) &&
+      gl.utils.isInViewport(this.$downBuildTrace.get(0))) ||
+      (this.$buildRefreshAnimation.is(':visible') &&
+      gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)))) {
       // User is at Bottom of Build Log
 
       this.$scrollTopBtn.show();
       this.$scrollBottomBtn.hide();
 
       // Show and Reposition Autoscroll Status Indicator
-      this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show();
+      this.$autoScrollContainer.css({
+        top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET,
+      }).show();
       this.$autoScrollStatusText.addClass('animate');
-    } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+    } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) &&
+      gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
       // Build Log height is small
 
       this.$scrollTopBtn.hide();
@@ -218,65 +232,81 @@ window.Build = (function() {
       this.$autoScrollStatusText.removeClass('animate');
     }
 
-    if (this.buildStatus === "running" || this.buildStatus === "pending") {
+    if (this.buildStatus === 'running' || this.buildStatus === 'pending') {
       // Check if Refresh Animation is in Viewport and enable Autoscroll, disable otherwise.
-      this.$autoScrollStatus.data("state", gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)) ? 'enabled' : 'disabled');
+      this.$autoScrollStatus.data(
+        'state',
+        gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)) ? 'enabled' : 'disabled',
+      );
     }
   };
 
-  Build.prototype.shouldHideSidebarForViewport = function() {
-    var bootstrapBreakpoint;
-    bootstrapBreakpoint = this.bp.getBreakpointSize();
+  Build.prototype.shouldHideSidebarForViewport = function () {
+    const bootstrapBreakpoint = this.bp.getBreakpointSize();
     return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
   };
 
-  Build.prototype.toggleSidebar = function(shouldHide) {
-    var shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
+  Build.prototype.toggleSidebar = function (shouldHide) {
+    const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
+
     this.$buildScroll.toggleClass('sidebar-expanded', shouldShow)
       .toggleClass('sidebar-collapsed', shouldHide);
+    this.$truncatedInfo.toggleClass('sidebar-expanded', shouldShow)
+      .toggleClass('sidebar-collapsed', shouldHide);
     this.$sidebar.toggleClass('right-sidebar-expanded', shouldShow)
       .toggleClass('right-sidebar-collapsed', shouldHide);
   };
 
-  Build.prototype.sidebarOnResize = function() {
+  Build.prototype.sidebarOnResize = function () {
     this.toggleSidebar(this.shouldHideSidebarForViewport());
   };
 
-  Build.prototype.sidebarOnClick = function() {
+  Build.prototype.sidebarOnClick = function () {
     if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
   };
 
-  Build.prototype.updateArtifactRemoveDate = function() {
-    var $date, date;
-    $date = $('.js-artifacts-remove');
+  Build.prototype.updateArtifactRemoveDate = function () {
+    const $date = $('.js-artifacts-remove');
     if ($date.length) {
-      date = $date.text();
-      return $date.text(gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '));
+      const date = $date.text();
+      return $date.text(
+        gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '),
+      );
     }
   };
 
-  Build.prototype.populateJobs = function(stage) {
+  Build.prototype.populateJobs = function (stage) {
     $('.build-job').hide();
-    $('.build-job[data-stage="' + stage + '"]').show();
+    $(`.build-job[data-stage="${stage}"]`).show();
   };
 
-  Build.prototype.updateStageDropdownText = function(stage) {
+  Build.prototype.updateStageDropdownText = function (stage) {
     $('.stage-selection').text(stage);
   };
 
-  Build.prototype.updateDropdown = function(e) {
+  Build.prototype.updateDropdown = function (e) {
     e.preventDefault();
-    var stage = e.currentTarget.text;
+    const stage = e.currentTarget.text;
     this.updateStageDropdownText(stage);
     this.populateJobs(stage);
   };
 
-  Build.prototype.stepTrace = function(e) {
-    var $currentTarget;
+  Build.prototype.stepTrace = function (e) {
     e.preventDefault();
-    $currentTarget = $(e.currentTarget);
+
+    const $currentTarget = $(e.currentTarget);
     $.scrollTo($currentTarget.attr('href'), {
-      offset: 0
+      offset: 0,
+    });
+  };
+
+  Build.prototype.initAffixTruncatedInfo = function () {
+    const offsetTop = this.$buildTrace.offset().top;
+
+    this.$truncatedInfo.affix({
+      offset: {
+        top: offsetTop,
+      },
     });
   };
 
diff --git a/app/assets/javascripts/comment_type_toggle.js b/app/assets/javascripts/comment_type_toggle.js
new file mode 100644
index 00000000000..df0ba86198c
--- /dev/null
+++ b/app/assets/javascripts/comment_type_toggle.js
@@ -0,0 +1,60 @@
+import DropLab from './droplab/drop_lab';
+import InputSetter from './droplab/plugins/input_setter';
+
+class CommentTypeToggle {
+  constructor(opts = {}) {
+    this.dropdownTrigger = opts.dropdownTrigger;
+    this.dropdownList = opts.dropdownList;
+    this.noteTypeInput = opts.noteTypeInput;
+    this.submitButton = opts.submitButton;
+    this.closeButton = opts.closeButton;
+    this.reopenButton = opts.reopenButton;
+  }
+
+  initDroplab() {
+    this.droplab = new DropLab();
+
+    const config = this.setConfig();
+
+    this.droplab.init(this.dropdownTrigger, this.dropdownList, [InputSetter], config);
+  }
+
+  setConfig() {
+    const config = {
+      InputSetter: [{
+        input: this.noteTypeInput,
+        valueAttribute: 'data-value',
+      },
+      {
+        input: this.submitButton,
+        valueAttribute: 'data-submit-text',
+      }],
+    };
+
+    if (this.closeButton) {
+      config.InputSetter.push({
+        input: this.closeButton,
+        valueAttribute: 'data-close-text',
+      }, {
+        input: this.closeButton,
+        valueAttribute: 'data-close-text',
+        inputAttribute: 'data-alternative-text',
+      });
+    }
+
+    if (this.reopenButton) {
+      config.InputSetter.push({
+        input: this.reopenButton,
+        valueAttribute: 'data-reopen-text',
+      }, {
+        input: this.reopenButton,
+        valueAttribute: 'data-reopen-text',
+        inputAttribute: 'data-alternative-text',
+      });
+    }
+
+    return config;
+  }
+}
+
+export default CommentTypeToggle;
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
index a92e068ca5a..86d99dd87da 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
@@ -8,25 +8,22 @@ Vue.use(VueResource);
 
 /**
  * Commits View > Pipelines Tab > Pipelines Table.
- * Merge Request View > Pipelines Tab > Pipelines Table.
  *
  * Renders Pipelines table in pipelines tab in the commits show view.
- * Renders Pipelines table in pipelines tab in the merge request show view.
  */
 
+// export for use in merge_request_tabs.js (TODO: remove this hack)
+window.gl = window.gl || {};
+window.gl.CommitPipelinesTable = CommitPipelinesTable;
+
 $(() => {
-  window.gl = window.gl || {};
   gl.commits = gl.commits || {};
   gl.commits.pipelines = gl.commits.pipelines || {};
 
-  if (gl.commits.PipelinesTableBundle) {
-    gl.commits.PipelinesTableBundle.$destroy(true);
-  }
-
   const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-  gl.commits.pipelines.PipelinesTableBundle = new CommitPipelinesTable();
 
   if (pipelineTableViewEl && pipelineTableViewEl.dataset.disableInitialization === undefined) {
-    gl.commits.pipelines.PipelinesTableBundle.$mount(pipelineTableViewEl);
+    gl.commits.pipelines.PipelinesTableBundle = new CommitPipelinesTable().$mount();
+    pipelineTableViewEl.appendChild(gl.commits.pipelines.PipelinesTableBundle.$el);
   }
 });
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index 4d5a857d705..1d16c64e07e 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -1,12 +1,14 @@
 import Vue from 'vue';
+import Visibility from 'visibilityjs';
 import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
 import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
 import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
 import eventHub from '../../vue_pipelines_index/event_hub';
-import EmptyState from '../../vue_pipelines_index/components/empty_state';
-import ErrorState from '../../vue_pipelines_index/components/error_state';
+import EmptyState from '../../vue_pipelines_index/components/empty_state.vue';
+import ErrorState from '../../vue_pipelines_index/components/error_state.vue';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
+import Poll from '../../lib/utils/poll';
 
 /**
  *
@@ -20,6 +22,7 @@ import '../../vue_shared/vue_resource_interceptor';
  */
 
 export default Vue.component('pipelines-table', {
+
   components: {
     'pipelines-table-component': PipelinesTableComponent,
     'error-state': ErrorState,
@@ -42,6 +45,7 @@ export default Vue.component('pipelines-table', {
       state: store.state,
       isLoading: false,
       hasError: false,
+      isMakingRequest: false,
     };
   },
 
@@ -64,17 +68,41 @@ export default Vue.component('pipelines-table', {
    *
    */
   beforeMount() {
-    this.endpoint = this.$el.dataset.endpoint;
-    this.helpPagePath = this.$el.dataset.helpPagePath;
+    const element = document.querySelector('#commit-pipeline-table-view');
+
+    this.endpoint = element.dataset.endpoint;
+    this.helpPagePath = element.dataset.helpPagePath;
     this.service = new PipelinesService(this.endpoint);
 
-    this.fetchPipelines();
+    this.poll = new Poll({
+      resource: this.service,
+      method: 'getPipelines',
+      successCallback: this.successCallback,
+      errorCallback: this.errorCallback,
+      notificationCallback: this.setIsMakingRequest,
+    });
+
+    if (!Visibility.hidden()) {
+      this.isLoading = true;
+      this.poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        this.poll.restart();
+      } else {
+        this.poll.stop();
+      }
+    });
 
     eventHub.$on('refreshPipelines', this.fetchPipelines);
   },
 
   beforeUpdate() {
-    if (this.state.pipelines.length && this.$children) {
+    if (this.state.pipelines.length &&
+        this.$children &&
+        !this.isMakingRequest &&
+        !this.isLoading) {
       this.store.startTimeAgoLoops.call(this, Vue);
     }
   },
@@ -83,21 +111,35 @@ export default Vue.component('pipelines-table', {
     eventHub.$off('refreshPipelines');
   },
 
+  destroyed() {
+    this.poll.stop();
+  },
+
   methods: {
     fetchPipelines() {
       this.isLoading = true;
+
       return this.service.getPipelines()
-        .then(response => response.json())
-        .then((json) => {
-          // depending of the endpoint the response can either bring a `pipelines` key or not.
-          const pipelines = json.pipelines || json;
-          this.store.storePipelines(pipelines);
-          this.isLoading = false;
-        })
-        .catch(() => {
-          this.hasError = true;
-          this.isLoading = false;
-        });
+        .then(response => this.successCallback(response))
+        .catch(() => this.errorCallback());
+    },
+
+    successCallback(resp) {
+      const response = resp.json();
+
+      // depending of the endpoint the response can either bring a `pipelines` key or not.
+      const pipelines = response.pipelines || response;
+      this.store.storePipelines(pipelines);
+      this.isLoading = false;
+    },
+
+    errorCallback() {
+      this.hasError = true;
+      this.isLoading = false;
+    },
+
+    setIsMakingRequest(isMakingRequest) {
+      this.isMakingRequest = isMakingRequest;
     },
   },
 
diff --git a/app/assets/javascripts/copy_to_clipboard.js b/app/assets/javascripts/copy_to_clipboard.js
index 6dbec50b890..ab9a8e43dd1 100644
--- a/app/assets/javascripts/copy_to_clipboard.js
+++ b/app/assets/javascripts/copy_to_clipboard.js
@@ -38,9 +38,35 @@ showTooltip = function(target, title) {
 };
 
 $(function() {
-  var clipboard;
-
-  clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
+  const clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
   clipboard.on('success', genericSuccess);
-  return clipboard.on('error', genericError);
+  clipboard.on('error', genericError);
+
+  // This a workaround around ClipboardJS limitations to allow the context-specific copy/pasting of plain text or GFM.
+  // The Ruby `clipboard_button` helper sneaks a JSON hash with `text` and `gfm` keys into the `data-clipboard-text`
+  // attribute that ClipboardJS reads from.
+  // When ClipboardJS creates a new `textarea` (directly inside `body`, with a `readonly` attribute`), sets its value
+  // to the value of this data attribute, focusses on it, and finally programmatically issues the 'Copy' command,
+  // this code intercepts the copy command/event at the last minute to deconstruct this JSON hash and set the
+  // `text/plain` and `text/x-gfm` copy data types to the intended values.
+  $(document).on('copy', 'body > textarea[readonly]', function(e) {
+    const clipboardData = e.originalEvent.clipboardData;
+    if (!clipboardData) return;
+
+    const text = e.target.value;
+
+    let json;
+    try {
+      json = JSON.parse(text);
+    } catch (ex) {
+      return;
+    }
+
+    if (!json.text || !json.gfm) return;
+
+    e.preventDefault();
+
+    clipboardData.setData('text/plain', json.text);
+    clipboardData.setData('text/x-gfm', json.gfm);
+  });
 });
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 88180149715..5aa3eb46a69 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -13,10 +13,6 @@ class Diff {
 
     $diffFile.each((index, file) => new gl.ImageFile(file));
 
-    if (this.diffViewType() === 'parallel') {
-      $('.content-wrapper .container-fluid').removeClass('container-limited');
-    }
-
     if (!isBound) {
       $(document)
         .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
index fc2f20e3bcb..eb76b7d15fd 100644
--- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
@@ -42,10 +42,14 @@ import Vue from 'vue';
       }
     },
     created() {
-      this.discussion = CommentsStore.state[this.discussionId];
+      if (this.discussionId) {
+        this.discussion = CommentsStore.state[this.discussionId];
+      }
     },
     mounted: function () {
-      const $textarea = $(`#new-discussion-note-form-${this.discussionId} .note-textarea`);
+      if (!this.discussionId) return;
+
+      const $textarea = $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`);
       this.textareaIsEmpty = $textarea.val() === '';
 
       $textarea.on('input.comment-and-resolve-btn', () => {
@@ -53,7 +57,9 @@ import Vue from 'vue';
       });
     },
     destroyed: function () {
-      $(`#new-discussion-note-form-${this.discussionId} .note-textarea`).off('input.comment-and-resolve-btn');
+      if (!this.discussionId) return;
+
+      $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`).off('input.comment-and-resolve-btn');
     }
   });
 
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 9c7acc903d1..f277e1dddc7 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -24,7 +24,6 @@
 /* global Search */
 /* global Admin */
 /* global NamespaceSelects */
-/* global ShortcutsDashboardNavigation */
 /* global Project */
 /* global ProjectAvatar */
 /* global CompareAutocomplete */
@@ -38,12 +37,15 @@
 import Issue from './issue';
 
 import BindInOut from './behaviors/bind_in_out';
+import Group from './group';
 import GroupName from './group_name';
 import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
 import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
 import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
+import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
+import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 
@@ -86,6 +88,12 @@ const ShortcutsBlob = require('./shortcuts_blob');
           skipResetBindings: true,
           fileBlobPermalinkUrl,
         });
+
+        new BlobForkSuggestion(
+          document.querySelector('.js-edit-blob-link-fork-toggler'),
+          document.querySelector('.js-cancel-fork-suggestion'),
+          document.querySelector('.js-file-fork-suggestion-section'),
+        );
       }
 
       switch (page) {
@@ -264,8 +272,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'groups:create':
         case 'admin:groups:create':
           BindInOut.initAll();
-        case 'groups:new':
-        case 'admin:groups:new':
+          new Group();
+          new GroupAvatar();
+          break;
         case 'groups:edit':
         case 'admin:groups:edit':
           new GroupAvatar();
@@ -323,8 +332,12 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new Search();
           break;
         case 'projects:repository:show':
+          // Initialize Protected Branch Settings
           new gl.ProtectedBranchCreate();
           new gl.ProtectedBranchEditList();
+          // Initialize Protected Tag Settings
+          new ProtectedTagCreate();
+          new ProtectedTagEditList();
           break;
         case 'projects:ci_cd:show':
           new gl.ProjectVariables();
@@ -371,7 +384,6 @@ const ShortcutsBlob = require('./shortcuts_blob');
           break;
         case 'dashboard':
         case 'root':
-          shortcut_handler = new ShortcutsDashboardNavigation();
           new UserCallout();
           break;
         case 'groups':
diff --git a/app/assets/javascripts/droplab/constants.js b/app/assets/javascripts/droplab/constants.js
new file mode 100644
index 00000000000..a23d914772a
--- /dev/null
+++ b/app/assets/javascripts/droplab/constants.js
@@ -0,0 +1,11 @@
+const DATA_TRIGGER = 'data-dropdown-trigger';
+const DATA_DROPDOWN = 'data-dropdown';
+const SELECTED_CLASS = 'droplab-item-selected';
+const ACTIVE_CLASS = 'droplab-item-active';
+
+export {
+  DATA_TRIGGER,
+  DATA_DROPDOWN,
+  SELECTED_CLASS,
+  ACTIVE_CLASS,
+};
diff --git a/app/assets/javascripts/droplab/drop_down.js b/app/assets/javascripts/droplab/drop_down.js
new file mode 100644
index 00000000000..9588921ebcd
--- /dev/null
+++ b/app/assets/javascripts/droplab/drop_down.js
@@ -0,0 +1,139 @@
+/* eslint-disable */
+
+import utils from './utils';
+import { SELECTED_CLASS } from './constants';
+
+var DropDown = function(list) {
+  this.currentIndex = 0;
+  this.hidden = true;
+  this.list = typeof list === 'string' ? document.querySelector(list) : list;
+  this.items = [];
+
+  this.eventWrapper = {};
+
+  this.getItems();
+  this.initTemplateString();
+  this.addEvents();
+
+  this.initialState = list.innerHTML;
+};
+
+Object.assign(DropDown.prototype, {
+  getItems: function() {
+    this.items = [].slice.call(this.list.querySelectorAll('li'));
+    return this.items;
+  },
+
+  initTemplateString: function() {
+    var items = this.items || this.getItems();
+
+    var templateString = '';
+    if (items.length > 0) templateString = items[items.length - 1].outerHTML;
+    this.templateString = templateString;
+
+    return this.templateString;
+  },
+
+  clickEvent: function(e) {
+    if (e.target.tagName === 'UL') return;
+
+    var selected = utils.closest(e.target, 'LI');
+    if (!selected) return;
+
+    this.addSelectedClass(selected);
+
+    e.preventDefault();
+    this.hide();
+
+    var listEvent = new CustomEvent('click.dl', {
+      detail: {
+        list: this,
+        selected: selected,
+        data: e.target.dataset,
+      },
+    });
+    this.list.dispatchEvent(listEvent);
+  },
+
+  addSelectedClass: function (selected) {
+    this.removeSelectedClasses();
+    selected.classList.add(SELECTED_CLASS);
+  },
+
+  removeSelectedClasses: function () {
+    const items = this.items || this.getItems();
+
+    items.forEach(item => item.classList.remove(SELECTED_CLASS));
+  },
+
+  addEvents: function() {
+    this.eventWrapper.clickEvent = this.clickEvent.bind(this)
+    this.list.addEventListener('click', this.eventWrapper.clickEvent);
+  },
+
+  toggle: function() {
+    this.hidden ? this.show() : this.hide();
+  },
+
+  setData: function(data) {
+    this.data = data;
+    this.render(data);
+  },
+
+  addData: function(data) {
+    this.data = (this.data || []).concat(data);
+    this.render(this.data);
+  },
+
+  render: function(data) {
+    const children = data ? data.map(this.renderChildren.bind(this)) : [];
+    const renderableList = this.list.querySelector('ul[data-dynamic]') || this.list;
+
+    renderableList.innerHTML = children.join('');
+  },
+
+  renderChildren: function(data) {
+    var html = utils.t(this.templateString, data);
+    var template = document.createElement('div');
+
+    template.innerHTML = html;
+    this.setImagesSrc(template);
+    template.firstChild.style.display = data.droplab_hidden ? 'none' : 'block';
+
+    return template.firstChild.outerHTML;
+  },
+
+  setImagesSrc: function(template) {
+    const images = [].slice.call(template.querySelectorAll('img[data-src]'));
+
+    images.forEach((image) => {
+      image.src = image.getAttribute('data-src');
+      image.removeAttribute('data-src');
+    });
+  },
+
+  show: function() {
+    if (!this.hidden) return;
+    this.list.style.display = 'block';
+    this.currentIndex = 0;
+    this.hidden = false;
+  },
+
+  hide: function() {
+    if (this.hidden) return;
+    this.list.style.display = 'none';
+    this.currentIndex = 0;
+    this.hidden = true;
+  },
+
+  toggle: function () {
+    this.hidden ? this.show() : this.hide();
+  },
+
+  destroy: function() {
+    this.hide();
+    this.list.removeEventListener('click', this.eventWrapper.clickEvent);
+  }
+});
+
+export default DropDown;
diff --git a/app/assets/javascripts/droplab/drop_lab.js b/app/assets/javascripts/droplab/drop_lab.js
new file mode 100644
index 00000000000..6eb9f314af7
--- /dev/null
+++ b/app/assets/javascripts/droplab/drop_lab.js
@@ -0,0 +1,152 @@
+/* eslint-disable */
+
+import HookButton from './hook_button';
+import HookInput from './hook_input';
+import utils from './utils';
+import Keyboard from './keyboard';
+import { DATA_TRIGGER } from './constants';
+
+var DropLab = function() {
+  this.ready = false;
+  this.hooks = [];
+  this.queuedData = [];
+  this.config = {};
+
+  this.eventWrapper = {};
+};
+
+Object.assign(DropLab.prototype, {
+  loadStatic: function(){
+    var dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`));
+    this.addHooks(dropdownTriggers);
+  },
+
+  addData: function () {
+    var args = [].slice.apply(arguments);
+    this.applyArgs(args, '_addData');
+  },
+
+  setData: function() {
+    var args = [].slice.apply(arguments);
+    this.applyArgs(args, '_setData');
+  },
+
+  destroy: function() {
+    this.hooks.forEach(hook => hook.destroy());
+    this.hooks = [];
+    this.removeEvents();
+  },
+
+  applyArgs: function(args, methodName) {
+    if (this.ready) return this[methodName].apply(this, args);
+
+    this.queuedData = this.queuedData || [];
+    this.queuedData.push(args);
+  },
+
+  _addData: function(trigger, data) {
+    this._processData(trigger, data, 'addData');
+  },
+
+  _setData: function(trigger, data) {
+    this._processData(trigger, data, 'setData');
+  },
+
+  _processData: function(trigger, data, methodName) {
+    this.hooks.forEach((hook) => {
+      if (Array.isArray(trigger)) hook.list[methodName](trigger);
+
+      if (hook.trigger.id === trigger) hook.list[methodName](data);
+    });
+  },
+
+  addEvents: function() {
+    this.eventWrapper.documentClicked = this.documentClicked.bind(this)
+    document.addEventListener('click', this.eventWrapper.documentClicked);
+  },
+
+  documentClicked: function(e) {
+    let thisTag = e.target;
+
+    if (thisTag.tagName !== 'UL') thisTag = utils.closest(thisTag, 'UL');
+    if (utils.isDropDownParts(thisTag, this.hooks) || utils.isDropDownParts(e.target, this.hooks)) return;
+
+    this.hooks.forEach(hook => hook.list.hide());
+  },
+
+  removeEvents: function(){
+    document.removeEventListener('click', this.eventWrapper.documentClicked);
+  },
+
+  changeHookList: function(trigger, list, plugins, config) {
+    const availableTrigger =  typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
+
+
+    this.hooks.forEach((hook, i) => {
+      hook.list.list.dataset.dropdownActive = false;
+
+      if (hook.trigger !== availableTrigger) return;
+
+      hook.destroy();
+      this.hooks.splice(i, 1);
+      this.addHook(availableTrigger, list, plugins, config);
+    });
+  },
+
+  addHook: function(hook, list, plugins, config) {
+    const availableHook = typeof hook === 'string' ? document.querySelector(hook) : hook;
+    let availableList;
+
+    if (typeof list === 'string') {
+      availableList = document.querySelector(list);
+    } else if (list instanceof Element) {
+      availableList = list;
+    } else {
+      availableList = document.querySelector(hook.dataset[utils.toCamelCase(DATA_TRIGGER)]);
+    }
+
+    availableList.dataset.dropdownActive = true;
+
+    const HookObject = availableHook.tagName === 'INPUT' ? HookInput : HookButton;
+    this.hooks.push(new HookObject(availableHook, availableList, plugins, config));
+
+    return this;
+  },
+
+  addHooks: function(hooks, plugins, config) {
+    hooks.forEach(hook => this.addHook(hook, null, plugins, config));
+    return this;
+  },
+
+  setConfig: function(obj){
+    this.config = obj;
+  },
+
+  fireReady: function() {
+    const readyEvent = new CustomEvent('ready.dl', {
+      detail: {
+        dropdown: this,
+      },
+    });
+    document.dispatchEvent(readyEvent);
+
+    this.ready = true;
+  },
+
+  init: function (hook, list, plugins, config) {
+    hook ? this.addHook(hook, list, plugins, config) : this.loadStatic();
+
+    this.addEvents();
+
+    Keyboard();
+
+    this.fireReady();
+
+    this.queuedData.forEach(data => this.addData(data));
+    this.queuedData = [];
+
+    return this;
+  },
+});
+
+export default DropLab;
diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js
deleted file mode 100644
index 8b14191395b..00000000000
--- a/app/assets/javascripts/droplab/droplab.js
+++ /dev/null
@@ -1,741 +0,0 @@
-/* eslint-disable */
-// Determine where to place this
-if (typeof Object.assign != 'function') {
-  Object.assign = function (target, varArgs) { // .length of function is 2
-    'use strict';
-    if (target == null) { // TypeError if undefined or null
-      throw new TypeError('Cannot convert undefined or null to object');
-    }
-
-    var to = Object(target);
-
-    for (var index = 1; index < arguments.length; index++) {
-      var nextSource = arguments[index];
-
-      if (nextSource != null) { // Skip over if undefined or null
-        for (var nextKey in nextSource) {
-          // Avoid bugs when hasOwnProperty is shadowed
-          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
-            to[nextKey] = nextSource[nextKey];
-          }
-        }
-      }
-    }
-    return to;
-  };
-}
-
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.droplab = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-var DATA_TRIGGER = 'data-dropdown-trigger';
-var DATA_DROPDOWN = 'data-dropdown';
-
-module.exports = {
-  DATA_TRIGGER: DATA_TRIGGER,
-  DATA_DROPDOWN: DATA_DROPDOWN,
-}
-
-},{}],2:[function(require,module,exports){
-// Custom event support for IE
-if ( typeof CustomEvent === "function" ) {
-  module.exports = CustomEvent;
-} else {
-  require('./window')(function(w){
-    var CustomEvent = function ( event, params ) {
-      params = params || { bubbles: false, cancelable: false, detail: undefined };
-      var evt = document.createEvent( 'CustomEvent' );
-      evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
-      return evt;
-    }
-    CustomEvent.prototype = w.Event.prototype;
-
-    w.CustomEvent = CustomEvent;
-  });
-  module.exports = CustomEvent;
-}
-
-},{"./window":11}],3:[function(require,module,exports){
-var CustomEvent = require('./custom_event_polyfill');
-var utils = require('./utils');
-
-var DropDown = function(list) {
-  this.currentIndex = 0;
-  this.hidden = true;
-  this.list = list;
-  this.items = [];
-  this.getItems();
-  this.initTemplateString();
-  this.addEvents();
-  this.initialState = list.innerHTML;
-};
-
-Object.assign(DropDown.prototype, {
-  getItems: function() {
-    this.items = [].slice.call(this.list.querySelectorAll('li'));
-    return this.items;
-  },
-
-  initTemplateString: function() {
-    var items = this.items || this.getItems();
-
-    var templateString = '';
-    if(items.length > 0) {
-      templateString = items[items.length - 1].outerHTML;
-    }
-    this.templateString = templateString;
-    return this.templateString;
-  },
-
-  clickEvent: function(e) {
-    // climb up the tree to find the LI
-    var selected = utils.closest(e.target, 'LI');
-
-    if(selected) {
-      e.preventDefault();
-      this.hide();
-      var listEvent = new CustomEvent('click.dl', {
-        detail: {
-          list: this,
-          selected: selected,
-          data: e.target.dataset,
-        },
-      });
-      this.list.dispatchEvent(listEvent);
-    }
-  },
-
-  addEvents: function() {
-    this.clickWrapper = this.clickEvent.bind(this);
-    // event delegation.
-    this.list.addEventListener('click', this.clickWrapper);
-  },
-
-  toggle: function() {
-    if(this.hidden) {
-      this.show();
-    } else {
-      this.hide();
-    }
-  },
-
-  setData: function(data) {
-    this.data = data;
-    this.render(data);
-  },
-
-  addData: function(data) {
-    this.data = (this.data || []).concat(data);
-    this.render(this.data);
-  },
-
-  // call render manually on data;
-  render: function(data){
-    // debugger
-    // empty the list first
-    var templateString = this.templateString;
-    var newChildren = [];
-    var toAppend;
-
-    newChildren = (data ||[]).map(function(dat){
-      var html = utils.t(templateString, dat);
-      var template = document.createElement('div');
-      template.innerHTML = html;
-
-      // Help set the image src template
-      var imageTags = template.querySelectorAll('img[data-src]');
-      // debugger
-      for(var i = 0; i < imageTags.length; i++) {
-        var imageTag = imageTags[i];
-        imageTag.src = imageTag.getAttribute('data-src');
-        imageTag.removeAttribute('data-src');
-      }
-
-      if(dat.hasOwnProperty('droplab_hidden') && dat.droplab_hidden){
-        template.firstChild.style.display = 'none'
-      }else{
-        template.firstChild.style.display = 'block';
-      }
-      return template.firstChild.outerHTML;
-    });
-    toAppend = this.list.querySelector('ul[data-dynamic]');
-    if(toAppend) {
-      toAppend.innerHTML = newChildren.join('');
-    } else {
-      this.list.innerHTML = newChildren.join('');
-    }
-  },
-
-  show: function() {
-    if (this.hidden) {
-      // debugger
-      this.list.style.display = 'block';
-      this.currentIndex = 0;
-      this.hidden = false;
-    }
-  },
-
-  hide: function() {
-    if (!this.hidden) {
-      // debugger
-      this.list.style.display = 'none';
-      this.currentIndex = 0;
-      this.hidden = true;
-    }
-  },
-
-  destroy: function() {
-    this.hide();
-    this.list.removeEventListener('click', this.clickWrapper);
-  }
-});
-
-module.exports = DropDown;
-
-},{"./custom_event_polyfill":2,"./utils":10}],4:[function(require,module,exports){
-require('./window')(function(w){
-  module.exports = function(deps) {
-    deps = deps || {};
-    var window = deps.window || w;
-    var document = deps.document || window.document;
-    var CustomEvent = deps.CustomEvent || require('./custom_event_polyfill');
-    var HookButton = deps.HookButton || require('./hook_button');
-    var HookInput = deps.HookInput || require('./hook_input');
-    var utils = deps.utils || require('./utils');
-    var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
-
-    var DropLab = function(hook){
-      if (!(this instanceof DropLab)) return new DropLab(hook);
-      this.ready = false;
-      this.hooks = [];
-      this.queuedData = [];
-      this.config = {};
-      this.loadWrapper;
-      if(typeof hook !== 'undefined'){
-        this.addHook(hook);
-      }
-    };
-
-
-    Object.assign(DropLab.prototype, {
-      load: function() {
-        this.loadWrapper();
-      },
-
-      loadWrapper: function(){
-        var dropdownTriggers = [].slice.apply(document.querySelectorAll('['+DATA_TRIGGER+']'));
-        this.addHooks(dropdownTriggers).init();
-      },
-
-      addData: function () {
-        var args = [].slice.apply(arguments);
-        this.applyArgs(args, '_addData');
-      },
-
-      setData: function() {
-        var args = [].slice.apply(arguments);
-        this.applyArgs(args, '_setData');
-      },
-
-      destroy: function() {
-        for(var i = 0; i < this.hooks.length; i++) {
-          this.hooks[i].destroy();
-        }
-        this.hooks = [];
-        this.removeEvents();
-      },
-
-      applyArgs: function(args, methodName) {
-        if(this.ready) {
-          this[methodName].apply(this, args);
-        } else {
-          this.queuedData = this.queuedData || [];
-          this.queuedData.push(args);
-        }
-      },
-
-      _addData: function(trigger, data) {
-        this._processData(trigger, data, 'addData');
-      },
-
-      _setData: function(trigger, data) {
-        this._processData(trigger, data, 'setData');
-      },
-
-      _processData: function(trigger, data, methodName) {
-        for(var i = 0; i < this.hooks.length; i++) {
-          var hook = this.hooks[i];
-          if(hook.trigger.dataset.hasOwnProperty('id')) {
-            if(hook.trigger.dataset.id === trigger) {
-              hook.list[methodName](data);
-            }
-          }
-        }
-      },
-
-      addEvents: function() {
-        var self = this;
-        this.windowClickedWrapper = function(e){
-          var thisTag = e.target;
-          if(thisTag.tagName !== 'UL'){
-            // climb up the tree to find the UL
-            thisTag = utils.closest(thisTag, 'UL');
-          }
-          if(utils.isDropDownParts(thisTag)){ return }
-          if(utils.isDropDownParts(e.target)){ return }
-          for(var i = 0; i < self.hooks.length; i++) {
-            self.hooks[i].list.hide();
-          }
-        }.bind(this);
-        document.addEventListener('click', this.windowClickedWrapper);
-      },
-
-      removeEvents: function(){
-        w.removeEventListener('click', this.windowClickedWrapper);
-        w.removeEventListener('load', this.loadWrapper);
-      },
-
-      changeHookList: function(trigger, list, plugins, config) {
-        trigger = document.querySelector('[data-id="'+trigger+'"]');
-        // list = document.querySelector(list);
-        this.hooks.every(function(hook, i) {
-          if(hook.trigger === trigger) {
-            hook.destroy();
-            this.hooks.splice(i, 1);
-            this.addHook(trigger, list, plugins, config);
-            return false;
-          }
-          return true
-        }.bind(this));
-      },
-
-      addHook: function(hook, list, plugins, config) {
-        if(!(hook instanceof HTMLElement) && typeof hook === 'string'){
-          hook = document.querySelector(hook);
-        }
-        if(!list){
-          list = document.querySelector(hook.dataset[utils.toDataCamelCase(DATA_TRIGGER)]);
-        }
-
-        if(hook) {
-          if(hook.tagName === 'A' || hook.tagName === 'BUTTON') {
-            this.hooks.push(new HookButton(hook, list, plugins, config));
-          } else if(hook.tagName === 'INPUT') {
-            this.hooks.push(new HookInput(hook, list, plugins, config));
-          }
-        }
-        return this;
-      },
-
-      addHooks: function(hooks, plugins, config) {
-        for(var i = 0; i < hooks.length; i++) {
-          var hook = hooks[i];
-          this.addHook(hook, null, plugins, config);
-        }
-        return this;
-      },
-
-      setConfig: function(obj){
-        this.config = obj;
-      },
-
-      init: function () {
-        this.addEvents();
-        var readyEvent = new CustomEvent('ready.dl', {
-          detail: {
-            dropdown: this,
-          },
-        });
-        window.dispatchEvent(readyEvent);
-        this.ready = true;
-        for(var i = 0; i < this.queuedData.length; i++) {
-          this.addData.apply(this, this.queuedData[i]);
-        }
-        this.queuedData = [];
-        return this;
-      },
-    });
-
-    return DropLab;
-  };
-});
-
-},{"./constants":1,"./custom_event_polyfill":2,"./hook_button":6,"./hook_input":7,"./utils":10,"./window":11}],5:[function(require,module,exports){
-var DropDown = require('./dropdown');
-
-var Hook = function(trigger, list, plugins, config){
-  this.trigger = trigger;
-  this.list = new DropDown(list);
-  this.type = 'Hook';
-  this.event = 'click';
-  this.plugins = plugins || [];
-  this.config = config || {};
-  this.id = trigger.dataset.id;
-};
-
-Object.assign(Hook.prototype, {
-
-  addEvents: function(){},
-
-  constructor: Hook,
-});
-
-module.exports = Hook;
-
-},{"./dropdown":3}],6:[function(require,module,exports){
-var CustomEvent = require('./custom_event_polyfill');
-var Hook = require('./hook');
-
-var HookButton = function(trigger, list, plugins, config) {
-  Hook.call(this, trigger, list, plugins, config);
-  this.type = 'button';
-  this.event = 'click';
-  this.addEvents();
-  this.addPlugins();
-};
-
-HookButton.prototype = Object.create(Hook.prototype);
-
-Object.assign(HookButton.prototype, {
-  addPlugins: function() {
-    for(var i = 0; i < this.plugins.length; i++) {
-      this.plugins[i].init(this);
-    }
-  },
-
-  clicked: function(e){
-    var buttonEvent = new CustomEvent('click.dl', {
-      detail: {
-        hook: this,
-      },
-      bubbles: true,
-      cancelable: true
-    });
-    this.list.show();
-    e.target.dispatchEvent(buttonEvent);
-  },
-
-  addEvents: function(){
-    this.clickedWrapper = this.clicked.bind(this);
-    this.trigger.addEventListener('click', this.clickedWrapper);
-  },
-
-  removeEvents: function(){
-    this.trigger.removeEventListener('click', this.clickedWrapper);
-  },
-
-  restoreInitialState: function() {
-    this.list.list.innerHTML = this.list.initialState;
-  },
-
-  removePlugins: function() {
-    for(var i = 0; i < this.plugins.length; i++) {
-      this.plugins[i].destroy();
-    }
-  },
-
-  destroy: function() {
-    this.restoreInitialState();
-    this.removeEvents();
-    this.removePlugins();
-  },
-
-
-  constructor: HookButton,
-});
-
-
-module.exports = HookButton;
-
-},{"./custom_event_polyfill":2,"./hook":5}],7:[function(require,module,exports){
-var CustomEvent = require('./custom_event_polyfill');
-var Hook = require('./hook');
-
-var HookInput = function(trigger, list, plugins, config) {
-  Hook.call(this, trigger, list, plugins, config);
-  this.type = 'input';
-  this.event = 'input';
-  this.addPlugins();
-  this.addEvents();
-};
-
-Object.assign(HookInput.prototype, {
-  addPlugins: function() {
-    var self = this;
-    for(var i = 0; i < this.plugins.length; i++) {
-      this.plugins[i].init(self);
-    }
-  },
-
-  addEvents: function(){
-    var self = this;
-
-    this.mousedown = function mousedown(e) {
-      if(self.hasRemovedEvents) return;
-
-      var mouseEvent = new CustomEvent('mousedown.dl', {
-        detail: {
-          hook: self,
-          text: e.target.value,
-        },
-        bubbles: true,
-        cancelable: true
-      });
-      e.target.dispatchEvent(mouseEvent);
-    }
-
-    this.input = function input(e) {
-      if(self.hasRemovedEvents) return;
-
-      self.list.show();
-
-      var inputEvent = new CustomEvent('input.dl', {
-        detail: {
-          hook: self,
-          text: e.target.value,
-        },
-        bubbles: true,
-        cancelable: true
-      });
-      e.target.dispatchEvent(inputEvent);
-    }
-
-    this.keyup = function keyup(e) {
-      if(self.hasRemovedEvents) return;
-
-      keyEvent(e, 'keyup.dl');
-    }
-
-    this.keydown = function keydown(e) {
-      if(self.hasRemovedEvents) return;
-
-      keyEvent(e, 'keydown.dl');
-    }
-
-    function keyEvent(e, keyEventName){
-      self.list.show();
-
-      var keyEvent = new CustomEvent(keyEventName, {
-        detail: {
-          hook: self,
-          text: e.target.value,
-          which: e.which,
-          key: e.key,
-        },
-        bubbles: true,
-        cancelable: true
-      });
-      e.target.dispatchEvent(keyEvent);
-    }
-
-    this.events = this.events || {};
-    this.events.mousedown = this.mousedown;
-    this.events.input = this.input;
-    this.events.keyup = this.keyup;
-    this.events.keydown = this.keydown;
-    this.trigger.addEventListener('mousedown', this.mousedown);
-    this.trigger.addEventListener('input', this.input);
-    this.trigger.addEventListener('keyup', this.keyup);
-    this.trigger.addEventListener('keydown', this.keydown);
-  },
-
-  removeEvents: function() {
-    this.hasRemovedEvents = true;
-    this.trigger.removeEventListener('mousedown', this.mousedown);
-    this.trigger.removeEventListener('input', this.input);
-    this.trigger.removeEventListener('keyup', this.keyup);
-    this.trigger.removeEventListener('keydown', this.keydown);
-  },
-
-  restoreInitialState: function() {
-    this.list.list.innerHTML = this.list.initialState;
-  },
-
-  removePlugins: function() {
-    for(var i = 0; i < this.plugins.length; i++) {
-      this.plugins[i].destroy();
-    }
-  },
-
-  destroy: function() {
-    this.restoreInitialState();
-    this.removeEvents();
-    this.removePlugins();
-    this.list.destroy();
-  }
-});
-
-module.exports = HookInput;
-
-},{"./custom_event_polyfill":2,"./hook":5}],8:[function(require,module,exports){
-var DropLab = require('./droplab')();
-var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
-var keyboard = require('./keyboard')();
-var setup = function() {
-  window.DropLab = DropLab;
-};
-
-
-module.exports = setup();
-
-},{"./constants":1,"./droplab":4,"./keyboard":9}],9:[function(require,module,exports){
-require('./window')(function(w){
-  module.exports = function(){
-    var currentKey;
-    var currentFocus;
-    var isUpArrow = false;
-    var isDownArrow = false;
-    var removeHighlight = function removeHighlight(list) {
-      var listItems = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider)'), 0);
-      var listItemsTmp = [];
-      for(var i = 0; i < listItems.length; i++) {
-        var listItem = listItems[i];
-        listItem.classList.remove('dropdown-active');
-
-        if (listItem.style.display !== 'none') {
-          listItemsTmp.push(listItem);
-        }
-      }
-      return listItemsTmp;
-    };
-
-    var setMenuForArrows = function setMenuForArrows(list) {
-      var listItems = removeHighlight(list);
-      if(list.currentIndex>0){
-        if(!listItems[list.currentIndex-1]){
-          list.currentIndex = list.currentIndex-1;
-        }
-
-        if (listItems[list.currentIndex-1]) {
-          var el = listItems[list.currentIndex-1];
-          var filterDropdownEl = el.closest('.filter-dropdown');
-          el.classList.add('dropdown-active');
-
-          if (filterDropdownEl) {
-            var filterDropdownBottom = filterDropdownEl.offsetHeight;
-            var elOffsetTop = el.offsetTop - 30;
-
-            if (elOffsetTop > filterDropdownBottom) {
-              filterDropdownEl.scrollTop = elOffsetTop - filterDropdownBottom;
-            }
-          }
-        }
-      }
-    };
-
-    var mousedown = function mousedown(e) {
-      var list = e.detail.hook.list;
-      removeHighlight(list);
-      list.show();
-      list.currentIndex = 0;
-      isUpArrow = false;
-      isDownArrow = false;
-    };
-    var selectItem = function selectItem(list) {
-      var listItems = removeHighlight(list);
-      var currentItem = listItems[list.currentIndex-1];
-      var listEvent = new CustomEvent('click.dl', {
-        detail: {
-          list: list,
-          selected: currentItem,
-          data: currentItem.dataset,
-        },
-      });
-      list.list.dispatchEvent(listEvent);
-      list.hide();
-    }
-
-    var keydown = function keydown(e){
-      var typedOn = e.target;
-      var list = e.detail.hook.list;
-      var currentIndex = list.currentIndex;
-      isUpArrow = false;
-      isDownArrow = false;
-
-      if(e.detail.which){
-        currentKey = e.detail.which;
-        if(currentKey === 13){
-          selectItem(e.detail.hook.list);
-          return;
-        }
-        if(currentKey === 38) {
-          isUpArrow = true;
-        }
-        if(currentKey === 40) {
-          isDownArrow = true;
-        }
-      } else if(e.detail.key) {
-        currentKey = e.detail.key;
-        if(currentKey === 'Enter'){
-          selectItem(e.detail.hook.list);
-          return;
-        }
-        if(currentKey === 'ArrowUp') {
-          isUpArrow = true;
-        }
-        if(currentKey === 'ArrowDown') {
-          isDownArrow = true;
-        }
-      }
-      if(isUpArrow){ currentIndex--; }
-      if(isDownArrow){ currentIndex++; }
-      if(currentIndex < 0){ currentIndex = 0; }
-      list.currentIndex = currentIndex;
-      setMenuForArrows(e.detail.hook.list);
-    };
-
-    w.addEventListener('mousedown.dl', mousedown);
-    w.addEventListener('keydown.dl', keydown);
-  };
-});
-},{"./window":11}],10:[function(require,module,exports){
-var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
-var DATA_DROPDOWN = require('./constants').DATA_DROPDOWN;
-
-var toDataCamelCase = function(attr){
-  return this.camelize(attr.split('-').slice(1).join(' '));
-};
-
-// the tiniest damn templating I can do
-var t = function(s,d){
-  for(var p in d)
-    s=s.replace(new RegExp('{{'+p+'}}','g'), d[p]);
-  return s;
-};
-
-var camelize = function(str) {
-  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) {
-    return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
-  }).replace(/\s+/g, '');
-};
-
-var closest = function(thisTag, stopTag) {
-  while(thisTag && thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){
-    thisTag = thisTag.parentNode;
-  }
-  return thisTag;
-};
-
-var isDropDownParts = function(target) {
-  if(!target || target.tagName === 'HTML') { return false; }
-  return (
-    target.hasAttribute(DATA_TRIGGER) ||
-      target.hasAttribute(DATA_DROPDOWN)
-  );
-};
-
-module.exports = {
-  toDataCamelCase: toDataCamelCase,
-  t: t,
-  camelize: camelize,
-  closest: closest,
-  isDropDownParts: isDropDownParts,
-};
-
-},{"./constants":1}],11:[function(require,module,exports){
-module.exports = function(callback) {
-  return (function() {
-    callback(this);
-  }).call(null);
-};
-
-},{}]},{},[8])(8)
-});
diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js
deleted file mode 100644
index 020f8b4ac65..00000000000
--- a/app/assets/javascripts/droplab/droplab_ajax.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/* eslint-disable */
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-/* global droplab */
-
-require('../window')(function(w){
-  function droplabAjaxException(message) {
-    this.message = message;
-  }
-
-  w.droplabAjax = {
-    _loadUrlData: function _loadUrlData(url) {
-      var self = this;
-      return new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest;
-        xhr.open('GET', url, true);
-        xhr.onreadystatechange = function () {
-          if(xhr.readyState === XMLHttpRequest.DONE) {
-            if (xhr.status === 200) {
-              var data = JSON.parse(xhr.responseText);
-              self.cache[url] = data;
-              return resolve(data);
-            } else {
-              return reject([xhr.responseText, xhr.status]);
-            }
-          }
-        };
-        xhr.send();
-      });
-    },
-
-    _loadData: function _loadData(data, config, self) {
-      if (config.loadingTemplate) {
-        var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
-
-        if (dataLoadingTemplate) {
-          dataLoadingTemplate.outerHTML = self.listTemplate;
-        }
-      }
-
-      if (!self.destroyed) {
-        self.hook.list[config.method].call(self.hook.list, data);
-      }
-    },
-
-    init: function init(hook) {
-      var self = this;
-      self.destroyed = false;
-      self.cache = self.cache || {};
-      var config = hook.config.droplabAjax;
-      this.hook = hook;
-
-      if (!config || !config.endpoint || !config.method) {
-        return;
-      }
-
-      if (config.method !== 'setData' && config.method !== 'addData') {
-        return;
-      }
-
-      if (config.loadingTemplate) {
-        var dynamicList = hook.list.list.querySelector('[data-dynamic]');
-
-        var loadingTemplate = document.createElement('div');
-        loadingTemplate.innerHTML = config.loadingTemplate;
-        loadingTemplate.setAttribute('data-loading-template', '');
-
-        this.listTemplate = dynamicList.outerHTML;
-        dynamicList.outerHTML = loadingTemplate.outerHTML;
-      }
-
-      if (self.cache[config.endpoint]) {
-        self._loadData(self.cache[config.endpoint], config, self);
-      } else {
-        this._loadUrlData(config.endpoint)
-          .then(function(d) {
-            self._loadData(d, config, self);
-          }, function(xhrError) {
-            // TODO: properly handle errors due to XHR cancellation
-            return;
-          }).catch(function(e) {
-            throw new droplabAjaxException(e.message || e);
-          });
-      }
-    },
-
-    destroy: function() {
-      var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
-      this.destroyed = true;
-      if (this.listTemplate && dynamicList) {
-        dynamicList.outerHTML = this.listTemplate;
-      }
-    }
-  };
-});
-},{"../window":2}],2:[function(require,module,exports){
-module.exports = function(callback) {
-  return (function() {
-    callback(this);
-  }).call(null);
-};
-
-},{}]},{},[1])(1)
-});
diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js
deleted file mode 100644
index 05eba7aef56..00000000000
--- a/app/assets/javascripts/droplab/droplab_ajax_filter.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/* eslint-disable */
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-/* global droplab */
-
-require('../window')(function(w){
-  w.droplabAjaxFilter = {
-    init: function(hook) {
-      this.destroyed = false;
-      this.hook = hook;
-      this.notLoading();
-
-      this.debounceTriggerWrapper = this.debounceTrigger.bind(this);
-      this.hook.trigger.addEventListener('keydown.dl', this.debounceTriggerWrapper);
-      this.hook.trigger.addEventListener('focus', this.debounceTriggerWrapper);
-      this.trigger(true);
-    },
-
-    notLoading: function notLoading() {
-      this.loading = false;
-    },
-
-    debounceTrigger: function debounceTrigger(e) {
-      var NON_CHARACTER_KEYS = [16, 17, 18, 20, 37, 38, 39, 40, 91, 93];
-      var invalidKeyPressed = NON_CHARACTER_KEYS.indexOf(e.detail.which || e.detail.keyCode) > -1;
-      var focusEvent = e.type === 'focus';
-
-      if (invalidKeyPressed || this.loading) {
-        return;
-      }
-
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-      }
-
-      this.timeout = setTimeout(this.trigger.bind(this, focusEvent), 200);
-    },
-
-    trigger: function trigger(getEntireList) {
-      var config = this.hook.config.droplabAjaxFilter;
-      var searchValue = this.trigger.value;
-
-      if (!config || !config.endpoint || !config.searchKey) {
-        return;
-      }
-
-      if (config.searchValueFunction) {
-        searchValue = config.searchValueFunction();
-      }
-
-      if (config.loadingTemplate && this.hook.list.data === undefined ||
-        this.hook.list.data.length === 0) {
-        var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
-
-        var loadingTemplate = document.createElement('div');
-        loadingTemplate.innerHTML = config.loadingTemplate;
-        loadingTemplate.setAttribute('data-loading-template', true);
-
-        this.listTemplate = dynamicList.outerHTML;
-        dynamicList.outerHTML = loadingTemplate.outerHTML;
-      }
-
-      if (getEntireList) {
-        searchValue = '';
-      }
-
-      if (config.searchKey === searchValue) {
-        return this.list.show();
-      }
-
-      this.loading = true;
-
-      var params = config.params || {};
-      params[config.searchKey] = searchValue;
-      var self = this;
-      self.cache = self.cache || {};
-      var url = config.endpoint + this.buildParams(params);
-      var urlCachedData = self.cache[url];
-
-      if (urlCachedData) {
-        self._loadData(urlCachedData, config, self);
-      } else {
-        this._loadUrlData(url)
-          .then(function(data) {
-            self._loadData(data, config, self);
-          }, function(xhrError) {
-            // TODO: properly handle errors due to XHR cancellation
-            return;
-          });
-      }
-    },
-
-    _loadUrlData: function _loadUrlData(url) {
-      var self = this;
-      return new Promise(function(resolve, reject) {
-        var xhr = new XMLHttpRequest;
-        xhr.open('GET', url, true);
-        xhr.onreadystatechange = function () {
-          if(xhr.readyState === XMLHttpRequest.DONE) {
-            if (xhr.status === 200) {
-              var data = JSON.parse(xhr.responseText);
-              self.cache[url] = data;
-              return resolve(data);
-            } else {
-              return reject([xhr.responseText, xhr.status]);
-            }
-          }
-        };
-        xhr.send();
-      });
-    },
-
-    _loadData: function _loadData(data, config, self) {
-      if (config.loadingTemplate && self.hook.list.data === undefined ||
-        self.hook.list.data.length === 0) {
-        const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
-
-        if (dataLoadingTemplate) {
-          dataLoadingTemplate.outerHTML = self.listTemplate;
-        }
-      }
-
-      if (!self.destroyed) {
-        var hookListChildren = self.hook.list.list.children;
-        var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
-
-        if (onlyDynamicList && data.length === 0) {
-          self.hook.list.hide();
-        }
-
-        self.hook.list.setData.call(self.hook.list, data);
-      }
-      self.notLoading();
-      self.hook.list.currentIndex = 0;
-    },
-
-    buildParams: function(params) {
-      if (!params) return '';
-      var paramsArray = Object.keys(params).map(function(param) {
-        return param + '=' + (params[param] || '');
-      });
-      return '?' + paramsArray.join('&');
-    },
-
-    destroy: function destroy() {
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-      }
-
-      this.destroyed = true;
-
-      this.hook.trigger.removeEventListener('keydown.dl', this.debounceTriggerWrapper);
-      this.hook.trigger.removeEventListener('focus', this.debounceTriggerWrapper);
-    }
-  };
-});
-},{"../window":2}],2:[function(require,module,exports){
-module.exports = function(callback) {
-  return (function() {
-    callback(this);
-  }).call(null);
-};
-
-},{}]},{},[1])(1)
-});
diff --git a/app/assets/javascripts/droplab/droplab_filter.js b/app/assets/javascripts/droplab/droplab_filter.js
deleted file mode 100644
index 7f7d93f3e27..00000000000
--- a/app/assets/javascripts/droplab/droplab_filter.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/* eslint-disable */
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.filter||(g.filter = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-/* global droplab */
-
-require('../window')(function(w){
-  w.droplabFilter = {
-
-    keydownWrapper: function(e){
-        var hiddenCount = 0;
-        var dataHiddenCount = 0;
-        var list = e.detail.hook.list;
-        var data = list.data;
-        var value = e.detail.hook.trigger.value.toLowerCase();
-        var config = e.detail.hook.config.droplabFilter;
-        var matches = [];
-        var filterFunction;
-        // will only work on dynamically set data
-        if(!data){
-          return;
-        }
-
-        if (config && config.filterFunction && typeof config.filterFunction === 'function') {
-          filterFunction = config.filterFunction;
-        } else {
-          filterFunction = function(o){
-            // cheap string search
-            o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1;
-            return o;
-          };
-        }
-
-        dataHiddenCount = data.filter(function(o) {
-          return !o.droplab_hidden;
-        }).length;
-
-        matches = data.map(function(o) {
-          return filterFunction(o, value);
-        });
-
-        hiddenCount = matches.filter(function(o) {
-          return !o.droplab_hidden;
-        }).length;
-
-        if (dataHiddenCount !== hiddenCount) {
-          list.render(matches);
-          list.currentIndex = 0;
-        }
-    },
-
-    init: function init(hookInput) {
-      var config = hookInput.config.droplabFilter;
-
-      if (!config || (!config.template && !config.filterFunction)) {
-        return;
-      }
-
-      this.hookInput = hookInput;
-      this.hookInput.trigger.addEventListener('keyup.dl', this.keydownWrapper);
-      this.hookInput.trigger.addEventListener('mousedown.dl', this.keydownWrapper);
-    },
-
-    destroy: function destroy(){
-      this.hookInput.trigger.removeEventListener('keyup.dl', this.keydownWrapper);
-      this.hookInput.trigger.removeEventListener('mousedown.dl', this.keydownWrapper);
-    }
-  };
-});
-},{"../window":2}],2:[function(require,module,exports){
-module.exports = function(callback) {
-  return (function() {
-    callback(this);
-  }).call(null);
-};
-
-},{}]},{},[1])(1)
-});
diff --git a/app/assets/javascripts/droplab/hook.js b/app/assets/javascripts/droplab/hook.js
new file mode 100644
index 00000000000..2f840083571
--- /dev/null
+++ b/app/assets/javascripts/droplab/hook.js
@@ -0,0 +1,22 @@
+/* eslint-disable */
+
+import DropDown from './drop_down';
+
+var Hook = function(trigger, list, plugins, config){
+  this.trigger = trigger;
+  this.list = new DropDown(list);
+  this.type = 'Hook';
+  this.event = 'click';
+  this.plugins = plugins || [];
+  this.config = config || {};
+  this.id = trigger.id;
+};
+
+Object.assign(Hook.prototype, {
+
+  addEvents: function(){},
+
+  constructor: Hook,
+});
+
+export default Hook;
diff --git a/app/assets/javascripts/droplab/hook_button.js b/app/assets/javascripts/droplab/hook_button.js
new file mode 100644
index 00000000000..be8aead1303
--- /dev/null
+++ b/app/assets/javascripts/droplab/hook_button.js
@@ -0,0 +1,65 @@
+/* eslint-disable */
+
+import Hook from './hook';
+
+var HookButton = function(trigger, list, plugins, config) {
+  Hook.call(this, trigger, list, plugins, config);
+
+  this.type = 'button';
+  this.event = 'click';
+
+  this.eventWrapper = {};
+
+  this.addEvents();
+  this.addPlugins();
+};
+
+HookButton.prototype = Object.create(Hook.prototype);
+
+Object.assign(HookButton.prototype, {
+  addPlugins: function() {
+    this.plugins.forEach(plugin => plugin.init(this));
+  },
+
+  clicked: function(e){
+    var buttonEvent = new CustomEvent('click.dl', {
+      detail: {
+        hook: this,
+      },
+      bubbles: true,
+      cancelable: true
+    });
+    e.target.dispatchEvent(buttonEvent);
+
+    this.list.toggle();
+  },
+
+  addEvents: function(){
+    this.eventWrapper.clicked = this.clicked.bind(this);
+    this.trigger.addEventListener('click', this.eventWrapper.clicked);
+  },
+
+  removeEvents: function(){
+    this.trigger.removeEventListener('click', this.eventWrapper.clicked);
+  },
+
+  restoreInitialState: function() {
+    this.list.list.innerHTML = this.list.initialState;
+  },
+
+  removePlugins: function() {
+    this.plugins.forEach(plugin => plugin.destroy());
+  },
+
+  destroy: function() {
+    this.restoreInitialState();
+
+    this.removeEvents();
+    this.removePlugins();
+  },
+
+  constructor: HookButton,
+});
+
+
+export default HookButton;
diff --git a/app/assets/javascripts/droplab/hook_input.js b/app/assets/javascripts/droplab/hook_input.js
new file mode 100644
index 00000000000..05082334045
--- /dev/null
+++ b/app/assets/javascripts/droplab/hook_input.js
@@ -0,0 +1,119 @@
+/* eslint-disable */
+
+import Hook from './hook';
+
+var HookInput = function(trigger, list, plugins, config) {
+  Hook.call(this, trigger, list, plugins, config);
+
+  this.type = 'input';
+  this.event = 'input';
+
+  this.eventWrapper = {};
+
+  this.addEvents();
+  this.addPlugins();
+};
+
+Object.assign(HookInput.prototype, {
+  addPlugins: function() {
+    this.plugins.forEach(plugin => plugin.init(this));
+  },
+
+  addEvents: function(){
+    this.eventWrapper.mousedown = this.mousedown.bind(this);
+    this.eventWrapper.input = this.input.bind(this);
+    this.eventWrapper.keyup = this.keyup.bind(this);
+    this.eventWrapper.keydown = this.keydown.bind(this);
+
+    this.trigger.addEventListener('mousedown', this.eventWrapper.mousedown);
+    this.trigger.addEventListener('input', this.eventWrapper.input);
+    this.trigger.addEventListener('keyup', this.eventWrapper.keyup);
+    this.trigger.addEventListener('keydown', this.eventWrapper.keydown);
+  },
+
+  removeEvents: function() {
+    this.hasRemovedEvents = true;
+
+    this.trigger.removeEventListener('mousedown', this.eventWrapper.mousedown);
+    this.trigger.removeEventListener('input', this.eventWrapper.input);
+    this.trigger.removeEventListener('keyup', this.eventWrapper.keyup);
+    this.trigger.removeEventListener('keydown', this.eventWrapper.keydown);
+  },
+
+  input: function(e) {
+    if(this.hasRemovedEvents) return;
+
+    this.list.show();
+
+    const inputEvent = new CustomEvent('input.dl', {
+      detail: {
+        hook: this,
+        text: e.target.value,
+      },
+      bubbles: true,
+      cancelable: true
+    });
+    e.target.dispatchEvent(inputEvent);
+  },
+
+  mousedown: function(e) {
+    if (this.hasRemovedEvents) return;
+
+    const mouseEvent = new CustomEvent('mousedown.dl', {
+      detail: {
+        hook: this,
+        text: e.target.value,
+      },
+      bubbles: true,
+      cancelable: true,
+    });
+    e.target.dispatchEvent(mouseEvent);
+  },
+
+  keyup: function(e) {
+    if (this.hasRemovedEvents) return;
+
+    this.keyEvent(e, 'keyup.dl');
+  },
+
+  keydown: function(e) {
+    if (this.hasRemovedEvents) return;
+
+    this.keyEvent(e, 'keydown.dl');
+  },
+
+  keyEvent: function(e, eventName) {
+    this.list.show();
+
+    const keyEvent = new CustomEvent(eventName, {
+      detail: {
+        hook: this,
+        text: e.target.value,
+        which: e.which,
+        key: e.key,
+      },
+      bubbles: true,
+      cancelable: true,
+    });
+    e.target.dispatchEvent(keyEvent);
+  },
+
+  restoreInitialState: function() {
+    this.list.list.innerHTML = this.list.initialState;
+  },
+
+  removePlugins: function() {
+    this.plugins.forEach(plugin => plugin.destroy());
+  },
+
+  destroy: function() {
+    this.restoreInitialState();
+
+    this.removeEvents();
+    this.removePlugins();
+
+    this.list.destroy();
+  }
+});
+
+export default HookInput;
diff --git a/app/assets/javascripts/droplab/keyboard.js b/app/assets/javascripts/droplab/keyboard.js
new file mode 100644
index 00000000000..36740a430e1
--- /dev/null
+++ b/app/assets/javascripts/droplab/keyboard.js
@@ -0,0 +1,113 @@
+/* eslint-disable */
+
+import { ACTIVE_CLASS } from './constants';
+
+const Keyboard = function () {
+  var currentKey;
+  var currentFocus;
+  var isUpArrow = false;
+  var isDownArrow = false;
+  var removeHighlight = function removeHighlight(list) {
+    var itemElements = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider)'), 0);
+    var listItems = [];
+    for(var i = 0; i < itemElements.length; i++) {
+      var listItem = itemElements[i];
+      listItem.classList.remove(ACTIVE_CLASS);
+
+      if (listItem.style.display !== 'none') {
+        listItems.push(listItem);
+      }
+    }
+    return listItems;
+  };
+
+  var setMenuForArrows = function setMenuForArrows(list) {
+    var listItems = removeHighlight(list);
+    if(list.currentIndex>0){
+      if(!listItems[list.currentIndex-1]){
+        list.currentIndex = list.currentIndex-1;
+      }
+
+      if (listItems[list.currentIndex-1]) {
+        var el = listItems[list.currentIndex-1];
+        var filterDropdownEl = el.closest('.filter-dropdown');
+        el.classList.add(ACTIVE_CLASS);
+
+        if (filterDropdownEl) {
+          var filterDropdownBottom = filterDropdownEl.offsetHeight;
+          var elOffsetTop = el.offsetTop - 30;
+
+          if (elOffsetTop > filterDropdownBottom) {
+            filterDropdownEl.scrollTop = elOffsetTop - filterDropdownBottom;
+          }
+        }
+      }
+    }
+  };
+
+  var mousedown = function mousedown(e) {
+    var list = e.detail.hook.list;
+    removeHighlight(list);
+    list.show();
+    list.currentIndex = 0;
+    isUpArrow = false;
+    isDownArrow = false;
+  };
+  var selectItem = function selectItem(list) {
+    var listItems = removeHighlight(list);
+    var currentItem = listItems[list.currentIndex-1];
+    var listEvent = new CustomEvent('click.dl', {
+      detail: {
+        list: list,
+        selected: currentItem,
+        data: currentItem.dataset,
+      },
+    });
+    list.list.dispatchEvent(listEvent);
+    list.hide();
+  }
+
+  var keydown = function keydown(e){
+    var typedOn = e.target;
+    var list = e.detail.hook.list;
+    var currentIndex = list.currentIndex;
+    isUpArrow = false;
+    isDownArrow = false;
+
+    if(e.detail.which){
+      currentKey = e.detail.which;
+      if(currentKey === 13){
+        selectItem(e.detail.hook.list);
+        return;
+      }
+      if(currentKey === 38) {
+        isUpArrow = true;
+      }
+      if(currentKey === 40) {
+        isDownArrow = true;
+      }
+    } else if(e.detail.key) {
+      currentKey = e.detail.key;
+      if(currentKey === 'Enter'){
+        selectItem(e.detail.hook.list);
+        return;
+      }
+      if(currentKey === 'ArrowUp') {
+        isUpArrow = true;
+      }
+      if(currentKey === 'ArrowDown') {
+        isDownArrow = true;
+      }
+    }
+    if(isUpArrow){ currentIndex--; }
+    if(isDownArrow){ currentIndex++; }
+    if(currentIndex < 0){ currentIndex = 0; }
+    list.currentIndex = currentIndex;
+    setMenuForArrows(e.detail.hook.list);
+  };
+
+  document.addEventListener('mousedown.dl', mousedown);
+  document.addEventListener('keydown.dl', keydown);
+};
+
+export default Keyboard;
diff --git a/app/assets/javascripts/droplab/plugins/ajax.js b/app/assets/javascripts/droplab/plugins/ajax.js
new file mode 100644
index 00000000000..12afe53ed76
--- /dev/null
+++ b/app/assets/javascripts/droplab/plugins/ajax.js
@@ -0,0 +1,65 @@
+/* eslint-disable */
+
+const Ajax = {
+  _loadUrlData: function _loadUrlData(url) {
+    var self = this;
+    return new Promise(function(resolve, reject) {
+      var xhr = new XMLHttpRequest;
+      xhr.open('GET', url, true);
+      xhr.onreadystatechange = function () {
+        if(xhr.readyState === XMLHttpRequest.DONE) {
+          if (xhr.status === 200) {
+            var data = JSON.parse(xhr.responseText);
+            self.cache[url] = data;
+            return resolve(data);
+          } else {
+            return reject([xhr.responseText, xhr.status]);
+          }
+        }
+      };
+      xhr.send();
+    });
+  },
+  _loadData: function _loadData(data, config, self) {
+    if (config.loadingTemplate) {
+      var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
+      if (dataLoadingTemplate) dataLoadingTemplate.outerHTML = self.listTemplate;
+    }
+
+    if (!self.destroyed) self.hook.list[config.method].call(self.hook.list, data);
+  },
+  init: function init(hook) {
+    var self = this;
+    self.destroyed = false;
+    self.cache = self.cache || {};
+    var config = hook.config.Ajax;
+    this.hook = hook;
+    if (!config || !config.endpoint || !config.method) {
+      return;
+    }
+    if (config.method !== 'setData' && config.method !== 'addData') {
+      return;
+    }
+    if (config.loadingTemplate) {
+      var dynamicList = hook.list.list.querySelector('[data-dynamic]');
+      var loadingTemplate = document.createElement('div');
+      loadingTemplate.innerHTML = config.loadingTemplate;
+      loadingTemplate.setAttribute('data-loading-template', '');
+      this.listTemplate = dynamicList.outerHTML;
+      dynamicList.outerHTML = loadingTemplate.outerHTML;
+    }
+    if (self.cache[config.endpoint]) {
+      self._loadData(self.cache[config.endpoint], config, self);
+    } else {
+      this._loadUrlData(config.endpoint)
+        .then(function(d) {
+          self._loadData(d, config, self);
+        }, config.onError).catch(config.onError);
+    }
+  },
+  destroy: function() {
+    this.destroyed = true;
+  }
+};
+
+export default Ajax;
diff --git a/app/assets/javascripts/droplab/plugins/ajax_filter.js b/app/assets/javascripts/droplab/plugins/ajax_filter.js
new file mode 100644
index 00000000000..cfd7e2ca189
--- /dev/null
+++ b/app/assets/javascripts/droplab/plugins/ajax_filter.js
@@ -0,0 +1,133 @@
+/* eslint-disable */
+
+const AjaxFilter = {
+  init: function(hook) {
+    this.destroyed = false;
+    this.hook = hook;
+    this.notLoading();
+
+    this.eventWrapper = {};
+    this.eventWrapper.debounceTrigger = this.debounceTrigger.bind(this);
+    this.hook.trigger.addEventListener('keydown.dl', this.eventWrapper.debounceTrigger);
+    this.hook.trigger.addEventListener('focus', this.eventWrapper.debounceTrigger);
+
+    this.trigger(true);
+  },
+
+  notLoading: function notLoading() {
+    this.loading = false;
+  },
+
+  debounceTrigger: function debounceTrigger(e) {
+    var NON_CHARACTER_KEYS = [16, 17, 18, 20, 37, 38, 39, 40, 91, 93];
+    var invalidKeyPressed = NON_CHARACTER_KEYS.indexOf(e.detail.which || e.detail.keyCode) > -1;
+    var focusEvent = e.type === 'focus';
+    if (invalidKeyPressed || this.loading) {
+      return;
+    }
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+    this.timeout = setTimeout(this.trigger.bind(this, focusEvent), 200);
+  },
+
+  trigger: function trigger(getEntireList) {
+    var config = this.hook.config.AjaxFilter;
+    var searchValue = this.trigger.value;
+    if (!config || !config.endpoint || !config.searchKey) {
+      return;
+    }
+    if (config.searchValueFunction) {
+      searchValue = config.searchValueFunction();
+    }
+    if (config.loadingTemplate && this.hook.list.data === undefined ||
+      this.hook.list.data.length === 0) {
+      var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
+      var loadingTemplate = document.createElement('div');
+      loadingTemplate.innerHTML = config.loadingTemplate;
+      loadingTemplate.setAttribute('data-loading-template', true);
+      this.listTemplate = dynamicList.outerHTML;
+      dynamicList.outerHTML = loadingTemplate.outerHTML;
+    }
+    if (getEntireList) {
+      searchValue = '';
+    }
+    if (config.searchKey === searchValue) {
+      return this.list.show();
+    }
+    this.loading = true;
+    var params = config.params || {};
+    params[config.searchKey] = searchValue;
+    var self = this;
+    self.cache = self.cache || {};
+    var url = config.endpoint + this.buildParams(params);
+    var urlCachedData = self.cache[url];
+    if (urlCachedData) {
+      self._loadData(urlCachedData, config, self);
+    } else {
+      this._loadUrlData(url)
+        .then(function(data) {
+          self._loadData(data, config, self);
+        }, config.onError).catch(config.onError);
+    }
+  },
+
+  _loadUrlData: function _loadUrlData(url) {
+    var self = this;
+    return new Promise(function(resolve, reject) {
+      var xhr = new XMLHttpRequest;
+      xhr.open('GET', url, true);
+      xhr.onreadystatechange = function () {
+        if(xhr.readyState === XMLHttpRequest.DONE) {
+          if (xhr.status === 200) {
+            var data = JSON.parse(xhr.responseText);
+            self.cache[url] = data;
+            return resolve(data);
+          } else {
+            return reject([xhr.responseText, xhr.status]);
+          }
+        }
+      };
+      xhr.send();
+    });
+  },
+
+  _loadData: function _loadData(data, config, self) {
+    const list = self.hook.list;
+    if (config.loadingTemplate && list.data === undefined ||
+      list.data.length === 0) {
+      const dataLoadingTemplate = list.list.querySelector('[data-loading-template]');
+      if (dataLoadingTemplate) {
+        dataLoadingTemplate.outerHTML = self.listTemplate;
+      }
+    }
+    if (!self.destroyed) {
+      var hookListChildren = list.list.children;
+      var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
+      if (onlyDynamicList && data.length === 0) {
+        list.hide();
+      }
+      list.setData.call(list, data);
+    }
+    self.notLoading();
+    list.currentIndex = 0;
+  },
+
+  buildParams: function(params) {
+    if (!params) return '';
+    var paramsArray = Object.keys(params).map(function(param) {
+      return param + '=' + (params[param] || '');
+    });
+    return '?' + paramsArray.join('&');
+  },
+
+  destroy: function destroy() {
+    if (this.timeout)clearTimeout(this.timeout);
+    this.destroyed = true;
+
+    this.hook.trigger.removeEventListener('keydown.dl', this.eventWrapper.debounceTrigger);
+    this.hook.trigger.removeEventListener('focus', this.eventWrapper.debounceTrigger);
+  }
+};
+
+export default AjaxFilter;
diff --git a/app/assets/javascripts/droplab/plugins/filter.js b/app/assets/javascripts/droplab/plugins/filter.js
new file mode 100644
index 00000000000..d6a1aadd49c
--- /dev/null
+++ b/app/assets/javascripts/droplab/plugins/filter.js
@@ -0,0 +1,95 @@
+/* eslint-disable */
+
+const Filter = {
+  keydown: function(e){
+    if (this.destroyed) return;
+
+    var hiddenCount = 0;
+    var dataHiddenCount = 0;
+
+    var list = e.detail.hook.list;
+    var data = list.data;
+    var value = e.detail.hook.trigger.value.toLowerCase();
+    var config = e.detail.hook.config.Filter;
+    var matches = [];
+    var filterFunction;
+    // will only work on dynamically set data
+    if(!data){
+      return;
+    }
+
+    if (config && config.filterFunction && typeof config.filterFunction === 'function') {
+      filterFunction = config.filterFunction;
+    } else {
+      filterFunction = function(o){
+        // cheap string search
+        o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1;
+        return o;
+      };
+    }
+
+    dataHiddenCount = data.filter(function(o) {
+      return !o.droplab_hidden;
+    }).length;
+
+    matches = data.map(function(o) {
+      return filterFunction(o, value);
+    });
+
+    hiddenCount = matches.filter(function(o) {
+      return !o.droplab_hidden;
+    }).length;
+
+    if (dataHiddenCount !== hiddenCount) {
+      list.setData(matches);
+      list.currentIndex = 0;
+    }
+  },
+
+  debounceKeydown: function debounceKeydown(e) {
+    if ([
+      13, // enter
+      16, // shift
+      17, // ctrl
+      18, // alt
+      20, // caps lock
+      37, // left arrow
+      38, // up arrow
+      39, // right arrow
+      40, // down arrow
+      91, // left window
+      92, // right window
+      93, // select
+    ].indexOf(e.detail.which || e.detail.keyCode) > -1) return;
+
+    if (this.timeout) clearTimeout(this.timeout);
+    this.timeout = setTimeout(this.keydown.bind(this, e), 200);
+  },
+
+  init: function init(hook) {
+    var config = hook.config.Filter;
+
+    if (!config || !config.template) return;
+
+    this.hook = hook;
+    this.destroyed = false;
+
+    this.eventWrapper = {};
+    this.eventWrapper.debounceKeydown = this.debounceKeydown.bind(this);
+
+    this.hook.trigger.addEventListener('keydown.dl', this.eventWrapper.debounceKeydown);
+    this.hook.trigger.addEventListener('mousedown.dl', this.eventWrapper.debounceKeydown);
+
+    this.debounceKeydown({ detail: { hook: this.hook } });
+  },
+
+  destroy: function destroy() {
+    if (this.timeout) clearTimeout(this.timeout);
+    this.destroyed = true;
+
+    this.hook.trigger.removeEventListener('keydown.dl', this.eventWrapper.debounceKeydown);
+    this.hook.trigger.removeEventListener('mousedown.dl', this.eventWrapper.debounceKeydown);
+  }
+};
+
+export default Filter;
diff --git a/app/assets/javascripts/droplab/plugins/input_setter.js b/app/assets/javascripts/droplab/plugins/input_setter.js
new file mode 100644
index 00000000000..d01fbc5830d
--- /dev/null
+++ b/app/assets/javascripts/droplab/plugins/input_setter.js
@@ -0,0 +1,50 @@
+/* eslint-disable */
+
+const InputSetter = {
+  init(hook) {
+    this.hook = hook;
+    this.destroyed = false;
+    this.config = hook.config.InputSetter || (this.hook.config.InputSetter = {});
+
+    this.eventWrapper = {};
+
+    this.addEvents();
+  },
+
+  addEvents() {
+    this.eventWrapper.setInputs = this.setInputs.bind(this);
+    this.hook.list.list.addEventListener('click.dl', this.eventWrapper.setInputs);
+  },
+
+  removeEvents() {
+    this.hook.list.list.removeEventListener('click.dl', this.eventWrapper.setInputs);
+  },
+
+  setInputs(e) {
+    if (this.destroyed) return;
+
+    const selectedItem = e.detail.selected;
+
+    if (!Array.isArray(this.config)) this.config = [this.config];
+
+    this.config.forEach(config => this.setInput(config, selectedItem));
+  },
+
+  setInput(config, selectedItem) {
+    const input = config.input || this.hook.trigger;
+    const newValue = selectedItem.getAttribute(config.valueAttribute);
+    const inputAttribute = config.inputAttribute;
+
+    if (input.hasAttribute(inputAttribute)) return input.setAttribute(inputAttribute, newValue);
+    if (input.tagName === 'INPUT') return input.value = newValue;
+    return input.textContent = newValue;
+  },
+
+  destroy() {
+    this.destroyed = true;
+
+    this.removeEvents();
+  },
+};
+
+export default InputSetter;
diff --git a/app/assets/javascripts/droplab/utils.js b/app/assets/javascripts/droplab/utils.js
new file mode 100644
index 00000000000..c149a33a1e9
--- /dev/null
+++ b/app/assets/javascripts/droplab/utils.js
@@ -0,0 +1,38 @@
+/* eslint-disable */
+
+import { DATA_TRIGGER, DATA_DROPDOWN } from './constants';
+
+const utils = {
+  toCamelCase(attr) {
+    return this.camelize(attr.split('-').slice(1).join(' '));
+  },
+
+  t(s, d) {
+    for (const p in d) {
+      if (Object.prototype.hasOwnProperty.call(d, p)) {
+        s = s.replace(new RegExp(`{{${p}}}`, 'g'), d[p]);
+      }
+    }
+    return s;
+  },
+
+  camelize(str) {
+    return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => {
+      return index === 0 ? letter.toLowerCase() : letter.toUpperCase();
+    }).replace(/\s+/g, '');
+  },
+
+  closest(thisTag, stopTag) {
+    while (thisTag && thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML') {
+      thisTag = thisTag.parentNode;
+    }
+    return thisTag;
+  },
+
+  isDropDownParts(target) {
+    if (!target || target.tagName === 'HTML') return false;
+    return target.hasAttribute(DATA_TRIGGER) || target.hasAttribute(DATA_DROPDOWN);
+  },
+};
+
+export default utils;
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.js b/app/assets/javascripts/environments/folder/environments_folder_view.js
index 8abbcf0c227..d2514593e3a 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.js
@@ -31,12 +31,6 @@ export default Vue.component('environment-folder-view', {
       cssContainerClass: environmentsData.cssClass,
       canCreateDeployment: environmentsData.canCreateDeployment,
       canReadEnvironment: environmentsData.canReadEnvironment,
-
-      // svgs
-      commitIconSvg: environmentsData.commitIconSvg,
-      playIconSvg: environmentsData.playIconSvg,
-      terminalIconSvg: environmentsData.terminalIconSvg,
-
       // Pagination Properties,
       paginationInformation: {},
       pageNumber: 1,
@@ -163,9 +157,6 @@ export default Vue.component('environment-folder-view', {
             :environments="state.environments"
             :can-create-deployment="canCreateDeploymentParsed"
             :can-read-environment="canReadEnvironmentParsed"
-            :play-icon-svg="playIconSvg"
-            :terminal-icon-svg="terminalIconSvg"
-            :commit-icon-svg="commitIconSvg"
             :service="service"/>
 
           <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
diff --git a/app/assets/javascripts/files_comment_button.js b/app/assets/javascripts/files_comment_button.js
index 3f041172ff3..59d6508fc02 100644
--- a/app/assets/javascripts/files_comment_button.js
+++ b/app/assets/javascripts/files_comment_button.js
@@ -55,14 +55,19 @@ window.FilesCommentButton = (function() {
 
     textFileElement = this.getTextFileElement($currentTarget);
     buttonParentElement.append(this.buildButton({
+      discussionID: lineContentElement.attr('data-discussion-id'),
+      lineType: lineContentElement.attr('data-line-type'),
+
       noteableType: textFileElement.attr('data-noteable-type'),
       noteableID: textFileElement.attr('data-noteable-id'),
       commitID: textFileElement.attr('data-commit-id'),
       noteType: lineContentElement.attr('data-note-type'),
-      position: lineContentElement.attr('data-position'),
-      lineType: lineContentElement.attr('data-line-type'),
-      discussionID: lineContentElement.attr('data-discussion-id'),
-      lineCode: lineContentElement.attr('data-line-code')
+
+      // LegacyDiffNote
+      lineCode: lineContentElement.attr('data-line-code'),
+
+      // DiffNote
+      position: lineContentElement.attr('data-position')
     }));
   };
 
@@ -76,14 +81,19 @@ window.FilesCommentButton = (function() {
 
   FilesCommentButton.prototype.buildButton = function(buttonAttributes) {
     return $commentButtonTemplate.clone().attr({
+      'data-discussion-id': buttonAttributes.discussionID,
+      'data-line-type': buttonAttributes.lineType,
+
       'data-noteable-type': buttonAttributes.noteableType,
       'data-noteable-id': buttonAttributes.noteableID,
       'data-commit-id': buttonAttributes.commitID,
       'data-note-type': buttonAttributes.noteType,
+
+      // LegacyDiffNote
       'data-line-code': buttonAttributes.lineCode,
-      'data-position': buttonAttributes.position,
-      'data-discussion-id': buttonAttributes.discussionID,
-      'data-line-type': buttonAttributes.lineType
+
+      // DiffNote
+      'data-position': buttonAttributes.position
     });
   };
 
@@ -121,7 +131,7 @@ window.FilesCommentButton = (function() {
   };
 
   FilesCommentButton.prototype.validateLineContent = function(lineContentElement) {
-    return lineContentElement.attr('data-discussion-id') && lineContentElement.attr('data-discussion-id') !== '';
+    return lineContentElement.attr('data-note-type') && lineContentElement.attr('data-note-type') !== '';
   };
 
   return FilesCommentButton;
diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
new file mode 100644
index 00000000000..9126422b335
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js
@@ -0,0 +1,87 @@
+import eventHub from '../event_hub';
+
+export default {
+  name: 'RecentSearchesDropdownContent',
+
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  computed: {
+    processedItems() {
+      return this.items.map((item) => {
+        const { tokens, searchToken }
+          = gl.FilteredSearchTokenizer.processTokens(item);
+
+        const resultantTokens = tokens.map(token => ({
+          prefix: `${token.key}:`,
+          suffix: `${token.symbol}${token.value}`,
+        }));
+
+        return {
+          text: item,
+          tokens: resultantTokens,
+          searchToken,
+        };
+      });
+    },
+    hasItems() {
+      return this.items.length > 0;
+    },
+  },
+
+  methods: {
+    onItemActivated(text) {
+      eventHub.$emit('recentSearchesItemSelected', text);
+    },
+    onRequestClearRecentSearches(e) {
+      // Stop the dropdown from closing
+      e.stopPropagation();
+
+      eventHub.$emit('requestClearRecentSearches');
+    },
+  },
+
+  template: `
+    <div>
+      <ul v-if="hasItems">
+        <li
+          v-for="(item, index) in processedItems"
+          :key="index">
+          <button
+            type="button"
+            class="filtered-search-history-dropdown-item"
+            @click="onItemActivated(item.text)">
+            <span>
+              <span
+                v-for="(token, tokenIndex) in item.tokens"
+                class="filtered-search-history-dropdown-token">
+                <span class="name">{{ token.prefix }}</span><span class="value">{{ token.suffix }}</span>
+              </span>
+            </span>
+            <span class="filtered-search-history-dropdown-search-token">
+              {{ item.searchToken }}
+            </span>
+          </button>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <button
+            type="button"
+            class="filtered-search-history-clear-button"
+            @click="onRequestClearRecentSearches($event)">
+            Clear recent searches
+          </button>
+        </li>
+      </ul>
+      <div
+        v-else
+        class="dropdown-info-note">
+        You don't have any recent searches
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 98dcb697af9..381c40c03d8 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -1,13 +1,13 @@
-require('./filtered_search_dropdown');
+import Filter from '~/droplab/plugins/filter';
 
-/* global droplabFilter */
+require('./filtered_search_dropdown');
 
 (() => {
   class DropdownHint extends gl.FilteredSearchDropdown {
     constructor(droplab, dropdown, input, filter) {
       super(droplab, dropdown, input, filter);
       this.config = {
-        droplabFilter: {
+        Filter: {
           template: 'hint',
           filterFunction: gl.DropdownUtils.filterHint.bind(null, input),
         },
@@ -56,7 +56,7 @@ require('./filtered_search_dropdown');
     renderContent() {
       const dropdownData = [];
 
-      [].forEach.call(this.input.closest('.filtered-search-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
+      [].forEach.call(this.input.closest('.filtered-search-box-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
         const { icon, hint, tag, type } = dropdownMenu.dataset;
         if (icon && hint && tag) {
           dropdownData.push(
@@ -69,12 +69,12 @@ require('./filtered_search_dropdown');
         }
       });
 
-      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
+      this.droplab.changeHookList(this.hookId, this.dropdown, [Filter], this.config);
       this.droplab.setData(this.hookId, dropdownData);
     }
 
     init() {
-      this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init();
+      this.droplab.addHook(this.input, this.dropdown, [Filter], this.config).init();
     }
   }
 
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js
index b3dc3e502c5..6296965b911 100644
--- a/app/assets/javascripts/filtered_search/dropdown_non_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js
@@ -1,7 +1,9 @@
-require('./filtered_search_dropdown');
+/* global Flash */
+
+import Ajax from '~/droplab/plugins/ajax';
+import Filter from '~/droplab/plugins/filter';
 
-/* global droplabAjax */
-/* global droplabFilter */
+require('./filtered_search_dropdown');
 
 (() => {
   class DropdownNonUser extends gl.FilteredSearchDropdown {
@@ -9,13 +11,19 @@ require('./filtered_search_dropdown');
       super(droplab, dropdown, input, filter);
       this.symbol = symbol;
       this.config = {
-        droplabAjax: {
+        Ajax: {
           endpoint,
           method: 'setData',
           loadingTemplate: this.loadingTemplate,
+          onError() {
+            /* eslint-disable no-new */
+            new Flash('An error occured fetching the dropdown data.');
+            /* eslint-enable no-new */
+          },
         },
-        droplabFilter: {
+        Filter: {
           filterFunction: gl.DropdownUtils.filterWithSymbol.bind(null, this.symbol, input),
+          template: 'title',
         },
       };
     }
@@ -29,13 +37,13 @@ require('./filtered_search_dropdown');
 
     renderContent(forceShowList = false) {
       this.droplab
-        .changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config);
+        .changeHookList(this.hookId, this.dropdown, [Ajax, Filter], this.config);
       super.renderContent(forceShowList);
     }
 
     init() {
       this.droplab
-        .addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init();
+        .addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
     }
   }
 
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index 04e2afad02f..38b5d315bcf 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -1,13 +1,15 @@
-require('./filtered_search_dropdown');
+/* global Flash */
+
+import AjaxFilter from '~/droplab/plugins/ajax_filter';
 
-/* global droplabAjaxFilter */
+require('./filtered_search_dropdown');
 
 (() => {
   class DropdownUser extends gl.FilteredSearchDropdown {
     constructor(droplab, dropdown, input, filter) {
       super(droplab, dropdown, input, filter);
       this.config = {
-        droplabAjaxFilter: {
+        AjaxFilter: {
           endpoint: `${gon.relative_url_root || ''}/autocomplete/users.json`,
           searchKey: 'search',
           params: {
@@ -18,6 +20,11 @@ require('./filtered_search_dropdown');
           },
           searchValueFunction: this.getSearchInput.bind(this),
           loadingTemplate: this.loadingTemplate,
+          onError() {
+            /* eslint-disable no-new */
+            new Flash('An error occured fetching the dropdown data.');
+            /* eslint-enable no-new */
+          },
         },
       };
     }
@@ -28,7 +35,7 @@ require('./filtered_search_dropdown');
     }
 
     renderContent(forceShowList = false) {
-      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config);
+      this.droplab.changeHookList(this.hookId, this.dropdown, [AjaxFilter], this.config);
       super.renderContent(forceShowList);
     }
 
@@ -56,7 +63,7 @@ require('./filtered_search_dropdown');
     }
 
     init() {
-      this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init();
+      this.droplab.addHook(this.input, this.dropdown, [AjaxFilter], this.config).init();
     }
   }
 
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
index 432b0c0dfd2..6c5c20447f7 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -129,7 +129,9 @@ import FilteredSearchContainer from './container';
         }
       });
 
-      return values.join(' ');
+      return values
+        .map(value => value.trim())
+        .join(' ');
     }
 
     static getSearchInput(filteredSearchInput) {
diff --git a/app/assets/javascripts/filtered_search/event_hub.js b/app/assets/javascripts/filtered_search/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
index e7bf530d343..d58eeeebf81 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
@@ -4,7 +4,7 @@
   class FilteredSearchDropdown {
     constructor(droplab, dropdown, input, filter) {
       this.droplab = droplab;
-      this.hookId = input && input.getAttribute('data-id');
+      this.hookId = input && input.id;
       this.input = input;
       this.filter = filter;
       this.dropdown = dropdown;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
index 5fbe0450bb8..ec481b9ef97 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -1,4 +1,4 @@
-/* global DropLab */
+import DropLab from '~/droplab/drop_lab';
 import FilteredSearchContainer from './container';
 
 (() => {
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index 22352950452..b93a8f1d322 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -1,18 +1,56 @@
+/* global Flash */
+
 import FilteredSearchContainer from './container';
+import RecentSearchesRoot from './recent_searches_root';
+import RecentSearchesStore from './stores/recent_searches_store';
+import RecentSearchesService from './services/recent_searches_service';
+import eventHub from './event_hub';
 
 (() => {
   class FilteredSearchManager {
     constructor(page) {
       this.container = FilteredSearchContainer.container;
       this.filteredSearchInput = this.container.querySelector('.filtered-search');
+      this.filteredSearchInputForm = this.filteredSearchInput.form;
       this.clearSearchButton = this.container.querySelector('.clear-search');
       this.tokensContainer = this.container.querySelector('.tokens-container');
       this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
 
+      this.recentSearchesStore = new RecentSearchesStore();
+      let recentSearchesKey = 'issue-recent-searches';
+      if (page === 'merge_requests') {
+        recentSearchesKey = 'merge-request-recent-searches';
+      }
+      this.recentSearchesService = new RecentSearchesService(recentSearchesKey);
+
+      // Fetch recent searches from localStorage
+      this.fetchingRecentSearchesPromise = this.recentSearchesService.fetch()
+        .catch(() => {
+          // eslint-disable-next-line no-new
+          new Flash('An error occured while parsing recent searches');
+          // Gracefully fail to empty array
+          return [];
+        })
+        .then((searches) => {
+          // Put any searches that may have come in before
+          // we fetched the saved searches ahead of the already saved ones
+          const resultantSearches = this.recentSearchesStore.setRecentSearches(
+            this.recentSearchesStore.state.recentSearches.concat(searches),
+          );
+          this.recentSearchesService.save(resultantSearches);
+        });
+
       if (this.filteredSearchInput) {
         this.tokenizer = gl.FilteredSearchTokenizer;
         this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
 
+        this.recentSearchesRoot = new RecentSearchesRoot(
+          this.recentSearchesStore,
+          this.recentSearchesService,
+          document.querySelector('.js-filtered-search-history-dropdown'),
+        );
+        this.recentSearchesRoot.init();
+
         this.bindEvents();
         this.loadSearchParamsFromURL();
         this.dropdownManager.setDropdown();
@@ -25,6 +63,10 @@ import FilteredSearchContainer from './container';
     cleanup() {
       this.unbindEvents();
       document.removeEventListener('beforeunload', this.cleanupWrapper);
+
+      if (this.recentSearchesRoot) {
+        this.recentSearchesRoot.destroy();
+      }
     }
 
     bindEvents() {
@@ -34,7 +76,7 @@ import FilteredSearchContainer from './container';
       this.handleInputPlaceholderWrapper = this.handleInputPlaceholder.bind(this);
       this.handleInputVisualTokenWrapper = this.handleInputVisualToken.bind(this);
       this.checkForEnterWrapper = this.checkForEnter.bind(this);
-      this.clearSearchWrapper = this.clearSearch.bind(this);
+      this.onClearSearchWrapper = this.onClearSearch.bind(this);
       this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
       this.removeSelectedTokenWrapper = this.removeSelectedToken.bind(this);
       this.unselectEditTokensWrapper = this.unselectEditTokens.bind(this);
@@ -42,8 +84,8 @@ import FilteredSearchContainer from './container';
       this.tokenChange = this.tokenChange.bind(this);
       this.addInputContainerFocusWrapper = this.addInputContainerFocus.bind(this);
       this.removeInputContainerFocusWrapper = this.removeInputContainerFocus.bind(this);
+      this.onrecentSearchesItemSelectedWrapper = this.onrecentSearchesItemSelected.bind(this);
 
-      this.filteredSearchInputForm = this.filteredSearchInput.form;
       this.filteredSearchInputForm.addEventListener('submit', this.handleFormSubmit);
       this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
       this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
@@ -56,11 +98,12 @@ import FilteredSearchContainer from './container';
       this.filteredSearchInput.addEventListener('focus', this.addInputContainerFocusWrapper);
       this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
       this.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
-      this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
+      this.clearSearchButton.addEventListener('click', this.onClearSearchWrapper);
       document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
       document.addEventListener('click', this.unselectEditTokensWrapper);
       document.addEventListener('click', this.removeInputContainerFocusWrapper);
       document.addEventListener('keydown', this.removeSelectedTokenWrapper);
+      eventHub.$on('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
     }
 
     unbindEvents() {
@@ -76,11 +119,12 @@ import FilteredSearchContainer from './container';
       this.filteredSearchInput.removeEventListener('focus', this.addInputContainerFocusWrapper);
       this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
       this.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
-      this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
+      this.clearSearchButton.removeEventListener('click', this.onClearSearchWrapper);
       document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
       document.removeEventListener('click', this.unselectEditTokensWrapper);
       document.removeEventListener('click', this.removeInputContainerFocusWrapper);
       document.removeEventListener('keydown', this.removeSelectedTokenWrapper);
+      eventHub.$off('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
     }
 
     checkForBackspace(e) {
@@ -110,7 +154,7 @@ import FilteredSearchContainer from './container';
       if (e.keyCode === 13) {
         const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
         const dropdownEl = dropdown.element;
-        const activeElements = dropdownEl.querySelectorAll('.dropdown-active');
+        const activeElements = dropdownEl.querySelectorAll('.droplab-item-active');
 
         e.preventDefault();
 
@@ -131,7 +175,7 @@ import FilteredSearchContainer from './container';
     }
 
     addInputContainerFocus() {
-      const inputContainer = this.filteredSearchInput.closest('.filtered-search-input-container');
+      const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
 
       if (inputContainer) {
         inputContainer.classList.add('focus');
@@ -139,7 +183,7 @@ import FilteredSearchContainer from './container';
     }
 
     removeInputContainerFocus(e) {
-      const inputContainer = this.filteredSearchInput.closest('.filtered-search-input-container');
+      const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
       const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
       const isElementInDynamicFilterDropdown = e.target.closest('.filter-dropdown') !== null;
       const isElementInStaticFilterDropdown = e.target.closest('ul[data-dropdown]') !== null;
@@ -161,7 +205,7 @@ import FilteredSearchContainer from './container';
     }
 
     unselectEditTokens(e) {
-      const inputContainer = this.container.querySelector('.filtered-search-input-container');
+      const inputContainer = this.container.querySelector('.filtered-search-box');
       const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
       const isElementInFilterDropdown = e.target.closest('.filter-dropdown') !== null;
       const isElementTokensContainer = e.target.classList.contains('tokens-container');
@@ -215,9 +259,12 @@ import FilteredSearchContainer from './container';
       }
     }
 
-    clearSearch(e) {
+    onClearSearch(e) {
       e.preventDefault();
+      this.clearSearch();
+    }
 
+    clearSearch() {
       this.filteredSearchInput.value = '';
 
       const removeElements = [];
@@ -289,6 +336,17 @@ import FilteredSearchContainer from './container';
       this.search();
     }
 
+    saveCurrentSearchQuery() {
+      // Don't save before we have fetched the already saved searches
+      this.fetchingRecentSearchesPromise.then(() => {
+        const searchQuery = gl.DropdownUtils.getSearchQuery();
+        if (searchQuery.length > 0) {
+          const resultantSearches = this.recentSearchesStore.addRecentSearch(searchQuery);
+          this.recentSearchesService.save(resultantSearches);
+        }
+      });
+    }
+
     loadSearchParamsFromURL() {
       const params = gl.utils.getUrlParamsArray();
       const usernameParams = this.getUsernameParams();
@@ -343,6 +401,8 @@ import FilteredSearchContainer from './container';
         }
       });
 
+      this.saveCurrentSearchQuery();
+
       if (hasFilteredSearch) {
         this.clearSearchButton.classList.remove('hidden');
         this.handleInputPlaceholder();
@@ -351,8 +411,12 @@ import FilteredSearchContainer from './container';
 
     search() {
       const paths = [];
+      const searchQuery = gl.DropdownUtils.getSearchQuery();
+
+      this.saveCurrentSearchQuery();
+
       const { tokens, searchToken }
-        = this.tokenizer.processTokens(gl.DropdownUtils.getSearchQuery());
+        = this.tokenizer.processTokens(searchQuery);
       const currentState = gl.utils.getParameterByName('state') || 'opened';
       paths.push(`state=${currentState}`);
 
@@ -416,6 +480,13 @@ import FilteredSearchContainer from './container';
         currentDropdownRef.dispatchInputEvent();
       }
     }
+
+    onrecentSearchesItemSelected(text) {
+      this.clearSearch();
+      this.filteredSearchInput.value = text;
+      this.filteredSearchInput.dispatchEvent(new CustomEvent('input'));
+      this.search();
+    }
   }
 
   window.gl = window.gl || {};
diff --git a/app/assets/javascripts/filtered_search/recent_searches_root.js b/app/assets/javascripts/filtered_search/recent_searches_root.js
new file mode 100644
index 00000000000..4e38409e12a
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/recent_searches_root.js
@@ -0,0 +1,59 @@
+import Vue from 'vue';
+import RecentSearchesDropdownContent from './components/recent_searches_dropdown_content';
+import eventHub from './event_hub';
+
+class RecentSearchesRoot {
+  constructor(
+    recentSearchesStore,
+    recentSearchesService,
+    wrapperElement,
+  ) {
+    this.store = recentSearchesStore;
+    this.service = recentSearchesService;
+    this.wrapperElement = wrapperElement;
+  }
+
+  init() {
+    this.bindEvents();
+    this.render();
+  }
+
+  bindEvents() {
+    this.onRequestClearRecentSearchesWrapper = this.onRequestClearRecentSearches.bind(this);
+
+    eventHub.$on('requestClearRecentSearches', this.onRequestClearRecentSearchesWrapper);
+  }
+
+  unbindEvents() {
+    eventHub.$off('requestClearRecentSearches', this.onRequestClearRecentSearchesWrapper);
+  }
+
+  render() {
+    this.vm = new Vue({
+      el: this.wrapperElement,
+      data: this.store.state,
+      template: `
+        <recent-searches-dropdown-content
+          :items="recentSearches" />
+      `,
+      components: {
+        'recent-searches-dropdown-content': RecentSearchesDropdownContent,
+      },
+    });
+  }
+
+  onRequestClearRecentSearches() {
+    const resultantSearches = this.store.setRecentSearches([]);
+    this.service.save(resultantSearches);
+  }
+
+  destroy() {
+    this.unbindEvents();
+    if (this.vm) {
+      this.vm.$destroy();
+    }
+  }
+
+}
+
+export default RecentSearchesRoot;
diff --git a/app/assets/javascripts/filtered_search/services/recent_searches_service.js b/app/assets/javascripts/filtered_search/services/recent_searches_service.js
new file mode 100644
index 00000000000..3e402d5aed0
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/services/recent_searches_service.js
@@ -0,0 +1,26 @@
+class RecentSearchesService {
+  constructor(localStorageKey = 'issuable-recent-searches') {
+    this.localStorageKey = localStorageKey;
+  }
+
+  fetch() {
+    const input = window.localStorage.getItem(this.localStorageKey);
+
+    let searches = [];
+    if (input && input.length > 0) {
+      try {
+        searches = JSON.parse(input);
+      } catch (err) {
+        return Promise.reject(err);
+      }
+    }
+
+    return Promise.resolve(searches);
+  }
+
+  save(searches = []) {
+    window.localStorage.setItem(this.localStorageKey, JSON.stringify(searches));
+  }
+}
+
+export default RecentSearchesService;
diff --git a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
new file mode 100644
index 00000000000..066be69766a
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
@@ -0,0 +1,23 @@
+import _ from 'underscore';
+
+class RecentSearchesStore {
+  constructor(initialState = {}) {
+    this.state = Object.assign({
+      recentSearches: [],
+    }, initialState);
+  }
+
+  addRecentSearch(newSearch) {
+    this.setRecentSearches([newSearch].concat(this.state.recentSearches));
+
+    return this.state.recentSearches;
+  }
+
+  setRecentSearches(searches = []) {
+    const trimmedSearches = searches.map(search => search.trim());
+    this.state.recentSearches = _.uniq(trimmedSearches).slice(0, 5);
+    return this.state.recentSearches;
+  }
+}
+
+export default RecentSearchesStore;
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 9ac4c49d697..b62b2cec4d8 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -50,7 +50,7 @@ window.gl.GfmAutoComplete = {
     template: '<li>${title}</li>'
   },
   Loading: {
-    template: '<li style="pointer-events: none;"><i class="fa fa-refresh fa-spin"></i> Loading...</li>'
+    template: '<li style="pointer-events: none;"><i class="fa fa-spinner fa-spin"></i> Loading...</li>'
   },
   DefaultOptions: {
     sorter: function(query, items, searchKey) {
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index e7c98e16581..ff10f19a4fe 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -29,7 +29,8 @@ GLForm.prototype.setupForm = function() {
     this.form.find('.div-dropzone').remove();
     this.form.addClass('gfm-form');
     // remove notify commit author checkbox for non-commit notes
-    gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button'));
+    gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion'));
+
     gl.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
     new DropzoneInput(this.form);
     autosize(this.textarea);
diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js
new file mode 100644
index 00000000000..7732edde1e7
--- /dev/null
+++ b/app/assets/javascripts/group.js
@@ -0,0 +1,21 @@
+export default class Group {
+  constructor() {
+    this.groupPath = $('#group_path');
+    this.groupName = $('#group_name');
+    this.updateHandler = this.update.bind(this);
+    this.resetHandler = this.reset.bind(this);
+    if (this.groupName.val() === '') {
+      this.groupPath.on('keyup', this.updateHandler);
+      this.groupName.on('keydown', this.resetHandler);
+    }
+  }
+
+  update() {
+    this.groupName.val(this.groupPath.val());
+  }
+
+  reset() {
+    this.groupPath.off('keyup', this.updateHandler);
+    this.groupName.off('keydown', this.resetHandler);
+  }
+}
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 47e675f537e..011043e992f 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -20,57 +20,60 @@ class Issue {
       });
       Issue.initIssueBtnEventListeners();
     }
+
+    Issue.$btnNewBranch = $('#new-branch');
+
     Issue.initMergeRequests();
     Issue.initRelatedBranches();
     Issue.initCanCreateBranch();
   }
 
   static initIssueBtnEventListeners() {
-    var issueFailMessage;
-    issueFailMessage = 'Unable to update this issue at this time.';
-    return $('a.btn-close, a.btn-reopen').on('click', function(e) {
-      var $this, isClose, shouldSubmit, url;
+    const issueFailMessage = 'Unable to update this issue at this time.';
+
+    const closeButtons = $('a.btn-close');
+    const isClosedBadge = $('div.status-box-closed');
+    const isOpenBadge = $('div.status-box-open');
+    const projectIssuesCounter = $('.issue_counter');
+    const reopenButtons = $('a.btn-reopen');
+
+    return closeButtons.add(reopenButtons).on('click', function(e) {
+      var $this, shouldSubmit, url;
       e.preventDefault();
       e.stopImmediatePropagation();
       $this = $(this);
-      isClose = $this.hasClass('btn-close');
       shouldSubmit = $this.hasClass('btn-comment');
       if (shouldSubmit) {
         Issue.submitNoteForm($this.closest('form'));
       }
       $this.prop('disabled', true);
+      Issue.setNewBranchButtonState(true, null);
       url = $this.attr('href');
       return $.ajax({
         type: 'PUT',
-        url: url,
-        error: function(jqXHR, textStatus, errorThrown) {
-          var issueStatus;
-          issueStatus = isClose ? 'close' : 'open';
-          return new Flash(issueFailMessage, 'alert');
-        },
-        success: function(data, textStatus, jqXHR) {
-          if ('id' in data) {
-            $(document).trigger('issuable:change');
-            let total = Number($('.issue_counter').text().replace(/[^\d]/, ''));
-            if (isClose) {
-              $('a.btn-close').addClass('hidden');
-              $('a.btn-reopen').removeClass('hidden');
-              $('div.status-box-closed').removeClass('hidden');
-              $('div.status-box-open').addClass('hidden');
-              total -= 1;
-            } else {
-              $('a.btn-reopen').addClass('hidden');
-              $('a.btn-close').removeClass('hidden');
-              $('div.status-box-closed').addClass('hidden');
-              $('div.status-box-open').removeClass('hidden');
-              total += 1;
-            }
-            $('.issue_counter').text(gl.text.addDelimiter(total));
-          } else {
-            new Flash(issueFailMessage, 'alert');
-          }
-          return $this.prop('disabled', false);
+        url: url
+      }).fail(function(jqXHR, textStatus, errorThrown) {
+        new Flash(issueFailMessage);
+        Issue.initCanCreateBranch();
+      }).done(function(data, textStatus, jqXHR) {
+        if ('id' in data) {
+          $(document).trigger('issuable:change');
+
+          const isClosed = $this.hasClass('btn-close');
+          closeButtons.toggleClass('hidden', isClosed);
+          reopenButtons.toggleClass('hidden', !isClosed);
+          isClosedBadge.toggleClass('hidden', !isClosed);
+          isOpenBadge.toggleClass('hidden', isClosed);
+
+          let numProjectIssues = Number(projectIssuesCounter.text().replace(/[^\d]/, ''));
+          numProjectIssues = isClosed ? numProjectIssues - 1 : numProjectIssues + 1;
+          projectIssuesCounter.text(gl.text.addDelimiter(numProjectIssues));
+        } else {
+          new Flash(issueFailMessage);
         }
+
+        $this.prop('disabled', false);
+        Issue.initCanCreateBranch();
       });
     });
   }
@@ -86,9 +89,9 @@ class Issue {
   static initMergeRequests() {
     var $container;
     $container = $('#merge-requests');
-    return $.getJSON($container.data('url')).error(function() {
-      return new Flash('Failed to load referenced merge requests', 'alert');
-    }).success(function(data) {
+    return $.getJSON($container.data('url')).fail(function() {
+      return new Flash('Failed to load referenced merge requests');
+    }).done(function(data) {
       if ('html' in data) {
         return $container.html(data.html);
       }
@@ -98,9 +101,9 @@ class Issue {
   static initRelatedBranches() {
     var $container;
     $container = $('#related-branches');
-    return $.getJSON($container.data('url')).error(function() {
-      return new Flash('Failed to load related branches', 'alert');
-    }).success(function(data) {
+    return $.getJSON($container.data('url')).fail(function() {
+      return new Flash('Failed to load related branches');
+    }).done(function(data) {
       if ('html' in data) {
         return $container.html(data.html);
       }
@@ -108,24 +111,27 @@ class Issue {
   }
 
   static initCanCreateBranch() {
-    var $container;
-    $container = $('#new-branch');
     // If the user doesn't have the required permissions the container isn't
     // rendered at all.
-    if ($container.length === 0) {
+    if (Issue.$btnNewBranch.length === 0) {
       return;
     }
-    return $.getJSON($container.data('path')).error(function() {
-      $container.find('.unavailable').show();
-      return new Flash('Failed to check if a new branch can be created.', 'alert');
-    }).success(function(data) {
-      if (data.can_create_branch) {
-        $container.find('.available').show();
-      } else {
-        return $container.find('.unavailable').show();
-      }
+    return $.getJSON(Issue.$btnNewBranch.data('path')).fail(function() {
+      Issue.setNewBranchButtonState(false, false);
+      new Flash('Failed to check if a new branch can be created.');
+    }).done(function(data) {
+      Issue.setNewBranchButtonState(false, data.can_create_branch);
     });
   }
+
+  static setNewBranchButtonState(isPending, canCreate) {
+    if (Issue.$btnNewBranch.length === 0) {
+      return;
+    }
+
+    Issue.$btnNewBranch.find('.available').toggle(!isPending && canCreate);
+    Issue.$btnNewBranch.find('.unavailable').toggle(!isPending && !canCreate);
+  }
 }
 
 export default Issue;
diff --git a/app/assets/javascripts/lib/utils/poll.js b/app/assets/javascripts/lib/utils/poll.js
index 5c22aea51cd..e31cc5fbabe 100644
--- a/app/assets/javascripts/lib/utils/poll.js
+++ b/app/assets/javascripts/lib/utils/poll.js
@@ -65,7 +65,6 @@ export default class Poll {
         this.makeRequest();
       }, pollInterval);
     }
-
     this.options.successCallback(response);
   }
 
@@ -76,8 +75,14 @@ export default class Poll {
     notificationCallback(true);
 
     return resource[method](data)
-      .then(response => this.checkConditions(response))
-      .catch(error => errorCallback(error));
+      .then((response) => {
+        this.checkConditions(response);
+        notificationCallback(false);
+      })
+      .catch((error) => {
+        notificationCallback(false);
+        errorCallback(error);
+      });
   }
 
   /**
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 5b50bc62876..c50ec24c818 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -37,14 +37,7 @@ import './shortcuts_issuable';
 import './shortcuts_network';
 
 // behaviors
-import './behaviors/autosize';
-import './behaviors/details_behavior';
-import './behaviors/quick_submit';
-import './behaviors/requires_input';
-import './behaviors/toggler_behavior';
-import './behaviors/bind_in_out';
-import { installGlEmojiElement } from './behaviors/gl_emoji';
-installGlEmojiElement();
+import './behaviors/';
 
 // blob
 import './blob/create_branch_dropdown';
@@ -75,12 +68,6 @@ import './u2f/error';
 import './u2f/register';
 import './u2f/util';
 
-// droplab
-import './droplab/droplab';
-import './droplab/droplab_ajax';
-import './droplab/droplab_ajax_filter';
-import './droplab/droplab_filter';
-
 // everything else
 import './abuse_reports';
 import './activities';
@@ -285,7 +272,7 @@ $(function () {
   // Disable form buttons while a form is submitting
   $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function (e) {
     var buttons;
-    buttons = $('[type="submit"]', this);
+    buttons = $('[type="submit"], .js-disable-on-submit', this);
     switch (e.type) {
       case 'ajax:beforeSend':
       case 'submit':
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 3c4e6102469..f7f6a773036 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -3,9 +3,6 @@
 /* global Flash */
 
 import Cookies from 'js-cookie';
-
-import CommitPipelinesTable from './commit/pipelines/pipelines_table';
-
 import './breakpoints';
 import './flash';
 
@@ -90,6 +87,7 @@ import './flash';
         .on('click', this.clickTab);
     }
 
+    // Used in tests
     unbindEvents() {
       $(document)
         .off('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
@@ -99,10 +97,12 @@ import './flash';
         .off('click', this.clickTab);
     }
 
-    destroy() {
-      this.unbindEvents();
+    destroyPipelinesView() {
       if (this.commitPipelinesTable) {
         this.commitPipelinesTable.$destroy();
+        this.commitPipelinesTable = null;
+
+        document.querySelector('#commit-pipeline-table-view').innerHTML = '';
       }
     }
 
@@ -128,6 +128,7 @@ import './flash';
         this.loadCommits($target.attr('href'));
         this.expandView();
         this.resetViewContainer();
+        this.destroyPipelinesView();
       } else if (this.isDiffAction(action)) {
         this.loadDiff($target.attr('href'));
         if (Breakpoints.get().getBreakpointSize() !== 'lg') {
@@ -136,12 +137,14 @@ import './flash';
         if (this.diffViewType() === 'parallel') {
           this.expandViewContainer();
         }
+        this.destroyPipelinesView();
       } else if (action === 'pipelines') {
         this.resetViewContainer();
-        this.loadPipelines();
+        this.mountPipelinesView();
       } else {
         this.expandView();
         this.resetViewContainer();
+        this.destroyPipelinesView();
       }
       if (this.setUrl) {
         this.setCurrentAction(action);
@@ -227,16 +230,12 @@ import './flash';
       });
     }
 
-    loadPipelines() {
-      if (this.pipelinesLoaded) {
-        return;
-      }
-      const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-      // Could already be mounted from the `pipelines_bundle`
-      if (pipelineTableViewEl) {
-        this.commitPipelinesTable = new CommitPipelinesTable().$mount(pipelineTableViewEl);
-      }
-      this.pipelinesLoaded = true;
+    mountPipelinesView() {
+      this.commitPipelinesTable = new gl.CommitPipelinesTable().$mount();
+      // $mount(el) replaces the el with the new rendered component. We need it in order to mount
+      // it everytime this tab is clicked - https://vuejs.org/v2/api/#vm-mount
+      document.querySelector('#commit-pipeline-table-view')
+        .appendChild(this.commitPipelinesTable.$el);
     }
 
     loadDiff(source) {
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index ac4fad88fe5..773fe3233a7 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -2,8 +2,6 @@
 /* global Issuable */
 /* global ListMilestone */
 
-import Vue from 'vue';
-
 (function() {
   this.MilestoneSelect = (function() {
     function MilestoneSelect(currentProject, els) {
@@ -151,12 +149,12 @@ import Vue from 'vue';
               return $dropdown.closest('form').submit();
             } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
               if (selected.id !== -1) {
-                Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'milestone', new ListMilestone({
+                gl.issueBoards.boardStoreIssueSet('milestone', new ListMilestone({
                   id: selected.id,
                   title: selected.name
                 }));
               } else {
-                Vue.delete(gl.issueBoards.BoardsStore.detail.issue, 'milestone');
+                gl.issueBoards.boardStoreIssueDelete('milestone');
               }
 
               $dropdown.trigger('loading.gl.dropdown');
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 1d563c63f39..15f7a813626 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -5,6 +5,7 @@
 /* global mrRefreshWidgetUrl */
 
 import Cookies from 'js-cookie';
+import CommentTypeToggle from './comment_type_toggle';
 
 require('./autosave');
 window.autosize = require('vendor/autosize');
@@ -110,7 +111,6 @@ require('./task_list');
       $(document).on("visibilitychange", this.visibilityChange);
       // when issue status changes, we need to refresh data
       $(document).on("issuable:change", this.refresh);
-
       // when a key is clicked on the notes
       return $(document).on("keydown", ".js-note-text", this.keydownNoteText);
     };
@@ -137,6 +137,26 @@ require('./task_list');
       $(document).off("click", '.system-note-commit-list-toggler');
     };
 
+    Notes.initCommentTypeToggle = function (form) {
+      const dropdownTrigger = form.querySelector('.js-comment-type-dropdown .dropdown-toggle');
+      const dropdownList = form.querySelector('.js-comment-type-dropdown .dropdown-menu');
+      const noteTypeInput = form.querySelector('#note_type');
+      const submitButton = form.querySelector('.js-comment-type-dropdown .js-comment-submit-button');
+      const closeButton = form.querySelector('.js-note-target-close');
+      const reopenButton = form.querySelector('.js-note-target-reopen');
+
+      const commentTypeToggle = new CommentTypeToggle({
+        dropdownTrigger,
+        dropdownList,
+        noteTypeInput,
+        submitButton,
+        closeButton,
+        reopenButton,
+      });
+
+      commentTypeToggle.initDroplab();
+    };
+
     Notes.prototype.keydownNoteText = function(e) {
       var $textarea, discussionNoteForm, editNote, myLastNote, myLastNoteEditBtn, newText, originalText;
       if (gl.utils.isMetaKey(e)) {
@@ -192,7 +212,7 @@ require('./task_list');
     };
 
     Notes.prototype.refresh = function() {
-      if (!document.hidden && document.URL.indexOf(this.noteable_url) === 0) {
+      if (!document.hidden) {
         return this.getContent();
       }
     };
@@ -213,11 +233,7 @@ require('./task_list');
             _this.last_fetched_at = data.last_fetched_at;
             _this.setPollingInterval(data.notes.length);
             return $.each(notes, function(i, note) {
-              if (note.discussion_html != null) {
-                return _this.renderDiscussionNote(note);
-              } else {
-                return _this.renderNote(note);
-              }
+              _this.renderNote(note);
             });
           };
         })(this)
@@ -276,8 +292,12 @@ require('./task_list');
     Note: for rendering inline notes use renderDiscussionNote
      */
 
-    Notes.prototype.renderNote = function(note) {
+    Notes.prototype.renderNote = function(note, $form) {
       var $notesList;
+      if (note.discussion_html != null) {
+        return this.renderDiscussionNote(note, $form);
+      }
+
       if (!note.valid) {
         if (note.errors.commands_only) {
           new Flash(note.errors.commands_only, 'notice', this.parentTimeline);
@@ -317,61 +337,50 @@ require('./task_list');
     Note: for rendering inline notes use renderDiscussionNote
      */
 
-    Notes.prototype.renderDiscussionNote = function(note) {
-      var discussionContainer, form, note_html, row, lineType, diffAvatarContainer;
+    Notes.prototype.renderDiscussionNote = function(note, $form) {
+      var discussionContainer, form, row, lineType, diffAvatarContainer;
       if (!this.isNewNote(note)) {
         return;
       }
       this.note_ids.push(note.id);
-      form = $("#new-discussion-note-form-" + note.discussion_id);
-      if ((note.original_discussion_id != null) && form.length === 0) {
-        form = $("#new-discussion-note-form-" + note.original_discussion_id);
-      }
+      form = $form || $(".js-discussion-note-form[data-discussion-id='" + note.discussion_id + "']");
       row = form.closest("tr");
       lineType = this.isParallelView() ? form.find('#line_type').val() : 'old';
       diffAvatarContainer = row.prevAll('.line_holder').first().find('.js-avatar-container.' + lineType + '_line');
-      note_html = $(note.html);
-      note_html.renderGFM();
       // is this the first note of discussion?
       discussionContainer = $(".notes[data-discussion-id='" + note.discussion_id + "']");
-      if ((note.original_discussion_id != null) && discussionContainer.length === 0) {
-        discussionContainer = $(".notes[data-discussion-id='" + note.original_discussion_id + "']");
+      if (!discussionContainer.length) {
+        discussionContainer = form.closest('.discussion').find('.notes');
       }
       if (discussionContainer.length === 0) {
-        if (!this.isParallelView() || row.hasClass('js-temp-notes-holder')) {
-          // insert the note and the reply button after the temp row
-          row.after(note.diff_discussion_html);
+        if (note.diff_discussion_html) {
+          var $discussion = $(note.diff_discussion_html).renderGFM();
 
-          // remove the note (will be added again below)
-          row.next().find(".note").remove();
-        } else {
-          // Merge new discussion HTML in
-          var $discussion = $(note.diff_discussion_html);
-          var $notes = $discussion.find('.notes[data-discussion-id="' + note.discussion_id + '"]');
-          var contentContainerClass = '.' + $notes.closest('.notes_content')
-            .attr('class')
-            .split(' ')
-            .join('.');
-
-          // remove the note (will be added again below)
-          $notes.find('.note').remove();
-
-          row.find(contentContainerClass + ' .content').append($notes.closest('.content').children());
+          if (!this.isParallelView() || row.hasClass('js-temp-notes-holder')) {
+            // insert the note and the reply button after the temp row
+            row.after($discussion);
+          } else {
+            // Merge new discussion HTML in
+            var $notes = $discussion.find('.notes[data-discussion-id="' + note.discussion_id + '"]');
+            var contentContainerClass = '.' + $notes.closest('.notes_content')
+              .attr('class')
+              .split(' ')
+              .join('.');
+
+            row.find(contentContainerClass + ' .content').append($notes.closest('.content').children());
+          }
         }
-        // Before that, the container didn't exist
-        discussionContainer = $(".notes[data-discussion-id='" + note.discussion_id + "']");
-        // Add note to 'Changes' page discussions
-        discussionContainer.append(note_html);
+
         // Init discussion on 'Discussion' page if it is merge request page
-        if ($('body').attr('data-page').indexOf('projects:merge_request') === 0) {
-          $('ul.main-notes-list').append(note.discussion_html).renderGFM();
+        if ($('body').attr('data-page').indexOf('projects:merge_request') === 0 || !note.diff_discussion_html) {
+          $('ul.main-notes-list').append($(note.discussion_html).renderGFM());
         }
       } else {
         // append new note to all matching discussions
-        discussionContainer.append(note_html);
+        discussionContainer.append($(note.html).renderGFM());
       }
 
-      if (typeof gl.diffNotesCompileComponents !== 'undefined' && note.discussion_id) {
+      if (typeof gl.diffNotesCompileComponents !== 'undefined' && note.discussion_resolvable) {
         gl.diffNotesCompileComponents();
         this.renderDiscussionAvatar(diffAvatarContainer, note);
       }
@@ -455,9 +464,14 @@ require('./task_list');
       form.addClass("js-main-target-form");
       form.find("#note_line_code").remove();
       form.find("#note_position").remove();
-      form.find("#note_type").remove();
+      form.find("#note_type").val('');
+      form.find("#in_reply_to_discussion_id").remove();
       form.find('.js-comment-resolve-button').closest('comment-and-resolve-btn').remove();
-      return this.parentTimeline = form.parents('.timeline');
+      this.parentTimeline = form.parents('.timeline');
+
+      if (form.length) {
+        Notes.initCommentTypeToggle(form.get(0));
+      }
     };
 
     /*
@@ -470,10 +484,24 @@ require('./task_list');
      */
 
     Notes.prototype.setupNoteForm = function(form) {
-      var textarea;
+      var textarea, key;
       new gl.GLForm(form);
       textarea = form.find(".js-note-text");
-      return new Autosave(textarea, ["Note", form.find("#note_noteable_type").val(), form.find("#note_noteable_id").val(), form.find("#note_commit_id").val(), form.find("#note_type").val(), form.find("#note_line_code").val(), form.find("#note_position").val()]);
+      key = [
+        "Note",
+        form.find("#note_noteable_type").val(),
+        form.find("#note_noteable_id").val(),
+        form.find("#note_commit_id").val(),
+        form.find("#note_type").val(),
+        form.find("#in_reply_to_discussion_id").val(),
+
+        // LegacyDiffNote
+        form.find("#note_line_code").val(),
+
+        // DiffNote
+        form.find("#note_position").val()
+      ];
+      return new Autosave(textarea, key);
     };
 
     /*
@@ -510,7 +538,7 @@ require('./task_list');
         }
       }
 
-      this.renderDiscussionNote(note);
+      this.renderNote(note, $form);
       // cleanup after successfully creating a diff/discussion note
       this.removeDiscussionNoteForm($form);
     };
@@ -656,7 +684,7 @@ require('./task_list');
         return function(i, el) {
           var note, notes;
           note = $(el);
-          notes = note.closest(".notes");
+          notes = note.closest(".discussion-notes");
 
           if (typeof gl.diffNotesCompileComponents !== 'undefined') {
             if (gl.diffNoteApps[noteElId]) {
@@ -673,14 +701,13 @@ require('./task_list');
             // "Discussions" tab
             notes.closest(".timeline-entry").remove();
 
-            if (!_this.isParallelView() || notesTr.find('.note').length === 0) {
-              // "Changes" tab / commit view
-              notesTr.remove();
+            // The notes tr can contain multiple lists of notes, like on the parallel diff
+            if (notesTr.find('.discussion-notes').length > 1) {
+              notes.remove();
             } else {
-              notes.closest('.content').empty();
+              notesTr.remove();
             }
           }
-          return note.remove();
         };
       })(this));
       // Decrement the "Discussions" counter only once
@@ -711,7 +738,7 @@ require('./task_list');
 
     Notes.prototype.replyToDiscussionNote = function(e) {
       var form, replyLink;
-      form = this.formClone.clone();
+      form = this.cleanForm(this.formClone.clone());
       replyLink = $(e.target).closest(".js-discussion-reply-button");
       // insert the form after the button
       replyLink
@@ -727,29 +754,44 @@ require('./task_list');
 
     Sets some hidden fields in the form.
 
-    Note: dataHolder must have the "discussionId", "lineCode", "noteableType"
-    and "noteableId" data attributes set.
+    Note: dataHolder must have the "discussionId" and "lineCode" data attributes set.
      */
 
     Notes.prototype.setupDiscussionNoteForm = function(dataHolder, form) {
       // setup note target
-      form.attr('id', "new-discussion-note-form-" + (dataHolder.data("discussionId")));
+      var discussionID = dataHolder.data("discussionId");
+
+      if (discussionID) {
+        form.attr("data-discussion-id", discussionID);
+        form.find("#in_reply_to_discussion_id").val(discussionID);
+      }
+
       form.attr("data-line-code", dataHolder.data("lineCode"));
-      form.find("#note_type").val(dataHolder.data("noteType"));
       form.find("#line_type").val(dataHolder.data("lineType"));
+
+      form.find("#note_noteable_type").val(dataHolder.data("noteableType"));
+      form.find("#note_noteable_id").val(dataHolder.data("noteableId"));
       form.find("#note_commit_id").val(dataHolder.data("commitId"));
+      form.find("#note_type").val(dataHolder.data("noteType"));
+
+      // LegacyDiffNote
       form.find("#note_line_code").val(dataHolder.data("lineCode"));
+
+      // DiffNote
       form.find("#note_position").val(dataHolder.attr("data-position"));
-      form.find("#note_noteable_type").val(dataHolder.data("noteableType"));
-      form.find("#note_noteable_id").val(dataHolder.data("noteableId"));
+
       form.find('.js-note-discard').show().removeClass('js-note-discard').addClass('js-close-discussion-note-form').text(form.find('.js-close-discussion-note-form').data('cancel-text'));
       form.find('.js-note-target-close').remove();
+      form.find('.js-note-new-discussion').remove();
       this.setupNoteForm(form);
 
+      form
+        .removeClass('js-main-target-form')
+        .addClass("discussion-form js-discussion-note-form");
+
       if (typeof gl.diffNotesCompileComponents !== 'undefined') {
         var $commentBtn = form.find('comment-and-resolve-btn');
-        $commentBtn
-          .attr(':discussion-id', "'" + dataHolder.data('discussionId') + "'");
+        $commentBtn.attr(':discussion-id', `'${discussionID}'`);
 
         gl.diffNotesCompileComponents();
       }
@@ -757,10 +799,7 @@ require('./task_list');
       form.find(".js-note-text").focus();
       form
         .find('.js-comment-resolve-button')
-        .attr('data-discussion-id', dataHolder.data('discussionId'));
-      form
-        .removeClass('js-main-target-form')
-        .addClass("discussion-form js-discussion-note-form");
+        .attr('data-discussion-id', discussionID);
     };
 
     /*
@@ -823,7 +862,7 @@ require('./task_list');
       }
 
       if (addForm) {
-        newForm = this.formClone.clone();
+        newForm = this.cleanForm(this.formClone.clone());
         newForm.appendTo(notesContent);
         // show the form
         return this.setupDiscussionNoteForm($link, newForm);
@@ -900,9 +939,10 @@ require('./task_list');
       reopenbtn = form.find('.js-note-target-reopen');
       closebtn = form.find('.js-note-target-close');
       discardbtn = form.find('.js-note-discard');
+
       if (textarea.val().trim().length > 0) {
-        reopentext = reopenbtn.data('alternative-text');
-        closetext = closebtn.data('alternative-text');
+        reopentext = reopenbtn.attr('data-alternative-text');
+        closetext = closebtn.attr('data-alternative-text');
         if (reopenbtn.text() !== reopentext) {
           reopenbtn.text(reopentext);
         }
@@ -1009,6 +1049,20 @@ require('./task_list');
       });
     };
 
+    Notes.prototype.cleanForm = function($form) {
+      // Remove JS classes that are not needed here
+      $form
+        .find('.js-comment-type-dropdown')
+        .removeClass('btn-group');
+
+      // Remove dropdown
+      $form
+        .find('.dropdown-menu')
+        .remove();
+
+      return $form;
+    };
+
     return Notes;
   })();
 }).call(window);
diff --git a/app/assets/javascripts/protected_tags/index.js b/app/assets/javascripts/protected_tags/index.js
new file mode 100644
index 00000000000..61e7ba53862
--- /dev/null
+++ b/app/assets/javascripts/protected_tags/index.js
@@ -0,0 +1,2 @@
+export { default as ProtectedTagCreate } from './protected_tag_create';
+export { default as ProtectedTagEditList } from './protected_tag_edit_list';
diff --git a/app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js b/app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js
new file mode 100644
index 00000000000..fff83f3af3b
--- /dev/null
+++ b/app/assets/javascripts/protected_tags/protected_tag_access_dropdown.js
@@ -0,0 +1,26 @@
+export default class ProtectedTagAccessDropdown {
+  constructor(options) {
+    this.options = options;
+    this.initDropdown();
+  }
+
+  initDropdown() {
+    const { onSelect } = this.options;
+    this.options.$dropdown.glDropdown({
+      data: this.options.data,
+      selectable: true,
+      inputId: this.options.$dropdown.data('input-id'),
+      fieldName: this.options.$dropdown.data('field-name'),
+      toggleLabel(item, $el) {
+        if ($el.is('.is-active')) {
+          return item.text;
+        }
+        return 'Select';
+      },
+      clicked(item, $el, e) {
+        e.preventDefault();
+        onSelect();
+      },
+    });
+  }
+}
diff --git a/app/assets/javascripts/protected_tags/protected_tag_create.js b/app/assets/javascripts/protected_tags/protected_tag_create.js
new file mode 100644
index 00000000000..91bd140bd12
--- /dev/null
+++ b/app/assets/javascripts/protected_tags/protected_tag_create.js
@@ -0,0 +1,41 @@
+import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
+import ProtectedTagDropdown from './protected_tag_dropdown';
+
+export default class ProtectedTagCreate {
+  constructor() {
+    this.$form = $('.js-new-protected-tag');
+    this.buildDropdowns();
+  }
+
+  buildDropdowns() {
+    const $allowedToCreateDropdown = this.$form.find('.js-allowed-to-create');
+
+    // Cache callback
+    this.onSelectCallback = this.onSelect.bind(this);
+
+    // Allowed to Create dropdown
+    this.protectedTagAccessDropdown = new ProtectedTagAccessDropdown({
+      $dropdown: $allowedToCreateDropdown,
+      data: gon.create_access_levels,
+      onSelect: this.onSelectCallback,
+    });
+
+    // Select default
+    $allowedToCreateDropdown.data('glDropdown').selectRowAtIndex(0);
+
+    // Protected tag dropdown
+    this.protectedTagDropdown = new ProtectedTagDropdown({
+      $dropdown: this.$form.find('.js-protected-tag-select'),
+      onSelect: this.onSelectCallback,
+    });
+  }
+
+  // This will run after clicked callback
+  onSelect() {
+    // Enable submit button
+    const $tagInput = this.$form.find('input[name="protected_tag[name]"]');
+    const $allowedToCreateInput = this.$form.find('#create_access_levels_attributes');
+
+    this.$form.find('input[type="submit"]').attr('disabled', !($tagInput.val() && $allowedToCreateInput.length));
+  }
+}
diff --git a/app/assets/javascripts/protected_tags/protected_tag_dropdown.js b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
new file mode 100644
index 00000000000..5ff4e443262
--- /dev/null
+++ b/app/assets/javascripts/protected_tags/protected_tag_dropdown.js
@@ -0,0 +1,86 @@
+export default class ProtectedTagDropdown {
+  /**
+   * @param {Object} options containing
+   *                         `$dropdown` target element
+   *                          `onSelect` event callback
+   * $dropdown must be an element created using `dropdown_tag()` rails helper
+   */
+  constructor(options) {
+    this.onSelect = options.onSelect;
+    this.$dropdown = options.$dropdown;
+    this.$dropdownContainer = this.$dropdown.parent();
+    this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
+    this.$protectedTag = this.$dropdownContainer.find('.create-new-protected-tag');
+
+    this.buildDropdown();
+    this.bindEvents();
+
+    // Hide footer
+    this.toggleFooter(true);
+  }
+
+  buildDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.getProtectedTags.bind(this),
+      filterable: true,
+      remote: false,
+      search: {
+        fields: ['title'],
+      },
+      selectable: true,
+      toggleLabel(selected) {
+        return (selected && 'id' in selected) ? selected.title : 'Protected Tag';
+      },
+      fieldName: 'protected_tag[name]',
+      text(protectedTag) {
+        return _.escape(protectedTag.title);
+      },
+      id(protectedTag) {
+        return _.escape(protectedTag.id);
+      },
+      onFilter: this.toggleCreateNewButton.bind(this),
+      clicked: (item, $el, e) => {
+        e.preventDefault();
+        this.onSelect();
+      },
+    });
+  }
+
+  bindEvents() {
+    this.$protectedTag.on('click', this.onClickCreateWildcard.bind(this));
+  }
+
+  onClickCreateWildcard(e) {
+    this.$dropdown.data('glDropdown').remote.execute();
+    this.$dropdown.data('glDropdown').selectRowAtIndex();
+    e.preventDefault();
+  }
+
+  getProtectedTags(term, callback) {
+    if (this.selectedTag) {
+      callback(gon.open_tags.concat(this.selectedTag));
+    } else {
+      callback(gon.open_tags);
+    }
+  }
+
+  toggleCreateNewButton(tagName) {
+    if (tagName) {
+      this.selectedTag = {
+        title: tagName,
+        id: tagName,
+        text: tagName,
+      };
+
+      this.$dropdownContainer
+        .find('.create-new-protected-tag code')
+        .text(tagName);
+    }
+
+    this.toggleFooter(!tagName);
+  }
+
+  toggleFooter(toggleState) {
+    this.$dropdownFooter.toggleClass('hidden', toggleState);
+  }
+}
diff --git a/app/assets/javascripts/protected_tags/protected_tag_edit.js b/app/assets/javascripts/protected_tags/protected_tag_edit.js
new file mode 100644
index 00000000000..09a387c0f9e
--- /dev/null
+++ b/app/assets/javascripts/protected_tags/protected_tag_edit.js
@@ -0,0 +1,52 @@
+/* eslint-disable no-new */
+/* global Flash */
+
+import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
+
+export default class ProtectedTagEdit {
+  constructor(options) {
+    this.$wrap = options.$wrap;
+    this.$allowedToCreateDropdownButton = this.$wrap.find('.js-allowed-to-create');
+    this.onSelectCallback = this.onSelect.bind(this);
+
+    this.buildDropdowns();
+  }
+
+  buildDropdowns() {
+    // Allowed to create dropdown
+    this.protectedTagAccessDropdown = new ProtectedTagAccessDropdown({
+      $dropdown: this.$allowedToCreateDropdownButton,
+      data: gon.create_access_levels,
+      onSelect: this.onSelectCallback,
+    });
+  }
+
+  onSelect() {
+    const $allowedToCreateInput = this.$wrap.find(`input[name="${this.$allowedToCreateDropdownButton.data('fieldName')}"]`);
+
+    // Do not update if one dropdown has not selected any option
+    if (!$allowedToCreateInput.length) return;
+
+    this.$allowedToCreateDropdownButton.disable();
+
+    $.ajax({
+      type: 'POST',
+      url: this.$wrap.data('url'),
+      dataType: 'json',
+      data: {
+        _method: 'PATCH',
+        protected_tag: {
+          create_access_levels_attributes: [{
+            id: this.$allowedToCreateDropdownButton.data('access-level-id'),
+            access_level: $allowedToCreateInput.val(),
+          }],
+        },
+      },
+      error() {
+        new Flash('Failed to update tag!', null, $('.js-protected-tags-list'));
+      },
+    }).always(() => {
+      this.$allowedToCreateDropdownButton.enable();
+    });
+  }
+}
diff --git a/app/assets/javascripts/protected_tags/protected_tag_edit_list.js b/app/assets/javascripts/protected_tags/protected_tag_edit_list.js
new file mode 100644
index 00000000000..bd9fc872266
--- /dev/null
+++ b/app/assets/javascripts/protected_tags/protected_tag_edit_list.js
@@ -0,0 +1,18 @@
+/* eslint-disable no-new */
+
+import ProtectedTagEdit from './protected_tag_edit';
+
+export default class ProtectedTagEditList {
+  constructor() {
+    this.$wrap = $('.protected-tags-list');
+    this.initEditForm();
+  }
+
+  initEditForm() {
+    this.$wrap.find('.js-protected-tag-edit-form').each((i, el) => {
+      new ProtectedTagEdit({
+        $wrap: $(el),
+      });
+    });
+  }
+}
diff --git a/app/assets/javascripts/render_gfm.js b/app/assets/javascripts/render_gfm.js
index ea91aaa10a6..2c3a9cacd38 100644
--- a/app/assets/javascripts/render_gfm.js
+++ b/app/assets/javascripts/render_gfm.js
@@ -8,6 +8,7 @@
   $.fn.renderGFM = function() {
     this.find('.js-syntax-highlight').syntaxHighlight();
     this.find('.js-render-math').renderMath();
+    return this;
   };
 
   $(document).on('ready load', function() {
diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index fd5097696ad..5b6bb2bf3f5 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -1,6 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, prefer-arrow-callback, consistent-return, object-shorthand, no-unused-vars, one-var, one-var-declaration-per-line, no-else-return, comma-dangle, max-len */
 /* global Mousetrap */
 /* global findFileURL */
+import findAndFollowLink from './shortcuts_dashboard_navigation';
 
 (function() {
   var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
@@ -14,11 +15,33 @@
       }
       Mousetrap.bind('?', this.onToggleHelp);
       Mousetrap.bind('s', Shortcuts.focusSearch);
-      Mousetrap.bind('f', (function(_this) {
-        return function(e) {
-          return _this.focusFilter(e);
-        };
-      })(this));
+      Mousetrap.bind('f', (e => this.focusFilter(e)));
+
+      const $globalDropdownMenu = $('.global-dropdown-menu');
+      const $globalDropdownToggle = $('.global-dropdown-toggle');
+
+      $('.global-dropdown').on('hide.bs.dropdown', () => {
+        $globalDropdownMenu.removeClass('shortcuts');
+      });
+
+      Mousetrap.bind('n', () => {
+        $globalDropdownMenu.toggleClass('shortcuts');
+        $globalDropdownToggle.trigger('click');
+
+        if (!$globalDropdownMenu.is(':visible')) {
+          $globalDropdownToggle.blur();
+        }
+      });
+
+      Mousetrap.bind('shift+t', () => findAndFollowLink('.shortcuts-todos'));
+      Mousetrap.bind('shift+a', () => findAndFollowLink('.dashboard-shortcuts-activity'));
+      Mousetrap.bind('shift+i', () => findAndFollowLink('.dashboard-shortcuts-issues'));
+      Mousetrap.bind('shift+m', () => findAndFollowLink('.dashboard-shortcuts-merge_requests'));
+      Mousetrap.bind('shift+p', () => findAndFollowLink('.dashboard-shortcuts-projects'));
+      Mousetrap.bind('shift+g', () => findAndFollowLink('.dashboard-shortcuts-groups'));
+      Mousetrap.bind('shift+l', () => findAndFollowLink('.dashboard-shortcuts-milestones'));
+      Mousetrap.bind('shift+s', () => findAndFollowLink('.dashboard-shortcuts-snippets'));
+
       Mousetrap.bind(['ctrl+shift+p', 'command+shift+p'], this.toggleMarkdownPreview);
       if (typeof findFileURL !== "undefined" && findFileURL !== null) {
         Mousetrap.bind('t', function() {
diff --git a/app/assets/javascripts/shortcuts_dashboard_navigation.js b/app/assets/javascripts/shortcuts_dashboard_navigation.js
index 4f1a19924a4..25f39e4fdb6 100644
--- a/app/assets/javascripts/shortcuts_dashboard_navigation.js
+++ b/app/assets/javascripts/shortcuts_dashboard_navigation.js
@@ -1,43 +1,12 @@
-/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-arrow-callback, consistent-return, no-return-assign */
-/* global Mousetrap */
-/* global Shortcuts */
-
-require('./shortcuts');
-
-(function() {
-  var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
-    hasProp = {}.hasOwnProperty;
-
-  this.ShortcutsDashboardNavigation = (function(superClass) {
-    extend(ShortcutsDashboardNavigation, superClass);
-
-    function ShortcutsDashboardNavigation() {
-      ShortcutsDashboardNavigation.__super__.constructor.call(this);
-      Mousetrap.bind('g a', function() {
-        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-activity');
-      });
-      Mousetrap.bind('g i', function() {
-        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-issues');
-      });
-      Mousetrap.bind('g m', function() {
-        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-merge_requests');
-      });
-      Mousetrap.bind('g t', function() {
-        return ShortcutsDashboardNavigation.findAndFollowLink('.shortcuts-todos');
-      });
-      Mousetrap.bind('g p', function() {
-        return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-projects');
-      });
-    }
-
-    ShortcutsDashboardNavigation.findAndFollowLink = function(selector) {
-      var link;
-      link = $(selector).attr('href');
-      if (link) {
-        return window.location = link;
-      }
-    };
-
-    return ShortcutsDashboardNavigation;
-  })(Shortcuts);
-}).call(window);
+/**
+ * Helper function that finds the href of the fiven selector and updates the location.
+ *
+ * @param  {String} selector
+ */
+export default (selector) => {
+  const link = document.querySelector(selector).getAttribute('href');
+
+  if (link) {
+    window.location = link;
+  }
+};
diff --git a/app/assets/javascripts/shortcuts_navigation.js b/app/assets/javascripts/shortcuts_navigation.js
index 3f5d6724417..c74ab0afd0c 100644
--- a/app/assets/javascripts/shortcuts_navigation.js
+++ b/app/assets/javascripts/shortcuts_navigation.js
@@ -1,6 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-arrow-callback, consistent-return, no-return-assign */
 /* global Mousetrap */
 /* global Shortcuts */
+import findAndFollowLink from './shortcuts_dashboard_navigation';
 
 require('./shortcuts');
 
@@ -13,59 +14,23 @@ require('./shortcuts');
 
     function ShortcutsNavigation() {
       ShortcutsNavigation.__super__.constructor.call(this);
-      Mousetrap.bind('g p', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-project');
-      });
-      Mousetrap.bind('g e', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-project-activity');
-      });
-      Mousetrap.bind('g f', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-tree');
-      });
-      Mousetrap.bind('g c', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-commits');
-      });
-      Mousetrap.bind('g b', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-builds');
-      });
-      Mousetrap.bind('g n', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-network');
-      });
-      Mousetrap.bind('g g', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-repository-charts');
-      });
-      Mousetrap.bind('g i', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-issues');
-      });
-      Mousetrap.bind('g l', function() {
-        ShortcutsNavigation.findAndFollowLink('.shortcuts-issue-boards');
-      });
-      Mousetrap.bind('g m', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-merge_requests');
-      });
-      Mousetrap.bind('g t', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-todos');
-      });
-      Mousetrap.bind('g w', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-wiki');
-      });
-      Mousetrap.bind('g s', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-snippets');
-      });
-      Mousetrap.bind('i', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-new-issue');
-      });
+      Mousetrap.bind('g p', () => findAndFollowLink('.shortcuts-project'));
+      Mousetrap.bind('g e', () => findAndFollowLink('.shortcuts-project-activity'));
+      Mousetrap.bind('g f', () => findAndFollowLink('.shortcuts-tree'));
+      Mousetrap.bind('g c', () => findAndFollowLink('.shortcuts-commits'));
+      Mousetrap.bind('g j', () => findAndFollowLink('.shortcuts-builds'));
+      Mousetrap.bind('g n', () => findAndFollowLink('.shortcuts-network'));
+      Mousetrap.bind('g d', () => findAndFollowLink('.shortcuts-repository-charts'));
+      Mousetrap.bind('g i', () => findAndFollowLink('.shortcuts-issues'));
+      Mousetrap.bind('g b', () => findAndFollowLink('.shortcuts-issue-boards'));
+      Mousetrap.bind('g m', () => findAndFollowLink('.shortcuts-merge_requests'));
+      Mousetrap.bind('g t', () => findAndFollowLink('.shortcuts-todos'));
+      Mousetrap.bind('g w', () => findAndFollowLink('.shortcuts-wiki'));
+      Mousetrap.bind('g s', () => findAndFollowLink('.shortcuts-snippets'));
+      Mousetrap.bind('i', () => findAndFollowLink('.shortcuts-new-issue'));
       this.enabledHelp.push('.hidden-shortcut.project');
     }
 
-    ShortcutsNavigation.findAndFollowLink = function(selector) {
-      var link;
-      link = $(selector).attr('href');
-      if (link) {
-        return window.location = link;
-      }
-    };
-
     return ShortcutsNavigation;
   })(Shortcuts);
 }).call(window);
diff --git a/app/assets/javascripts/subscription.js b/app/assets/javascripts/subscription.js
index 9c307915ec4..5f9a3e00c22 100644
--- a/app/assets/javascripts/subscription.js
+++ b/app/assets/javascripts/subscription.js
@@ -1,5 +1,3 @@
-import Vue from 'vue';
-
 (() => {
   class Subscription {
     constructor(containerElm) {
@@ -29,8 +27,7 @@ import Vue from 'vue';
 
         // hack to allow this to work with the issue boards Vue object
         if (document.querySelector('html').classList.contains('issue-boards-page')) {
-          Vue.set(
-            gl.issueBoards.BoardsStore.detail.issue,
+          gl.issueBoards.boardStoreIssueSet(
             'subscribed',
             !gl.issueBoards.BoardsStore.detail.issue.subscribed,
           );
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 48e20cf501f..3325a7d429c 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -2,8 +2,6 @@
 /* global Issuable */
 /* global ListUser */
 
-import Vue from 'vue';
-
 (function() {
   var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
     slice = [].slice;
@@ -74,7 +72,7 @@ import Vue from 'vue';
             e.preventDefault();
 
             if ($dropdown.hasClass('js-issue-board-sidebar')) {
-              Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'assignee', new ListUser({
+              gl.issueBoards.boardStoreIssueSet('assignee', new ListUser({
                 id: _this.currentUser.id,
                 username: _this.currentUser.username,
                 name: _this.currentUser.name,
@@ -225,14 +223,14 @@ import Vue from 'vue';
                 return $dropdown.closest('form').submit();
               } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
                 if (user.id) {
-                  Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'assignee', new ListUser({
+                  gl.issueBoards.boardStoreIssueSet('assignee', new ListUser({
                     id: user.id,
                     username: user.username,
                     name: user.name,
                     avatar_url: user.avatar_url
                   }));
                 } else {
-                  Vue.delete(gl.issueBoards.BoardsStore.detail.issue, 'assignee');
+                  gl.issueBoards.boardStoreIssueDelete('assignee');
                 }
 
                 updateIssueBoardsIssue();
diff --git a/app/assets/javascripts/vue_pipelines_index/components/async_button.js b/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
index 58b8db4d519..11da6e908b7 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/async_button.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
@@ -1,3 +1,4 @@
+<script>
 /* eslint-disable no-new, no-alert */
 /* global Flash */
 import '~/flash';
@@ -65,29 +66,31 @@ export default {
       this.isLoading = true;
 
       this.service.postAction(this.endpoint)
-      .then(() => {
-        this.isLoading = false;
-        eventHub.$emit('refreshPipelines');
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occured while making the request.');
-      });
+        .then(() => {
+          this.isLoading = false;
+          eventHub.$emit('refreshPipelines');
+        })
+        .catch(() => {
+          this.isLoading = false;
+          new Flash('An error occured while making the request.');
+        });
     },
   },
-
-  template: `
-    <button
-      type="button"
-      @click="onClick"
-      :class="buttonClass"
-      :title="title"
-      :aria-label="title"
-      data-container="body"
-      data-placement="top"
-      :disabled="isLoading">
-      <i :class="iconClass" aria-hidden="true"/>
-      <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading" />
-    </button>
-  `,
 };
+</script>
+
+<template>
+  <button
+    type="button"
+    @click="onClick"
+    :class="buttonClass"
+    :title="title"
+    :aria-label="title"
+    data-container="body"
+    data-placement="top"
+    :disabled="isLoading"
+  >
+    <i :class="iconClass" aria-hidden="true"></i>
+    <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading"></i>
+  </button>
+</template>
diff --git a/app/assets/javascripts/vue_pipelines_index/components/empty_state.js b/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
deleted file mode 100644
index 56b4858f4b4..00000000000
--- a/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
-
-export default {
-  props: {
-    helpPagePath: {
-      type: String,
-      required: true,
-    },
-  },
-
-  template: `
-    <div class="row empty-state">
-      <div class="col-xs-12">
-        <div class="svg-content">
-          ${pipelinesEmptyStateSVG}
-        </div>
-      </div>
-
-      <div class="col-xs-12 text-center">
-        <div class="text-content">
-          <h4>Build with confidence</h4>
-          <p>
-            Continous Integration can help catch bugs by running your tests automatically,
-            while Continuous Deployment can help you deliver code to your product environment.
-          </p>
-          <a :href="helpPagePath" class="btn btn-info">
-            Get started with Pipelines
-          </a>
-        </div>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/empty_state.vue b/app/assets/javascripts/vue_pipelines_index/components/empty_state.vue
new file mode 100644
index 00000000000..ba158bc4a1e
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/empty_state.vue
@@ -0,0 +1,34 @@
+<script>
+import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
+
+export default {
+  props: {
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({ pipelinesEmptyStateSVG }),
+};
+</script>
+
+<template>
+  <div class="row empty-state">
+    <div class="col-xs-12">
+      <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
+    </div>
+
+    <div class="col-xs-12 text-center">
+      <div class="text-content">
+        <h4>Build with confidence</h4>
+        <p>
+          Continous Integration can help catch bugs by running your tests automatically,
+          while Continuous Deployment can help you deliver code to your product environment.
+        </p>
+        <a :href="helpPagePath" class="btn btn-info">
+          Get started with Pipelines
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_pipelines_index/components/error_state.js b/app/assets/javascripts/vue_pipelines_index/components/error_state.js
deleted file mode 100644
index e5d228bddf8..00000000000
--- a/app/assets/javascripts/vue_pipelines_index/components/error_state.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
-
-export default {
-  template: `
-    <div class="row empty-state js-pipelines-error-state">
-      <div class="col-xs-12">
-        <div class="svg-content">
-          ${pipelinesErrorStateSVG}
-        </div>
-      </div>
-
-      <div class="col-xs-12 text-center">
-        <div class="text-content">
-          <h4>The API failed to fetch the pipelines.</h4>
-        </div>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/error_state.vue b/app/assets/javascripts/vue_pipelines_index/components/error_state.vue
new file mode 100644
index 00000000000..90cee68163e
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/error_state.vue
@@ -0,0 +1,21 @@
+<script>
+import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
+
+export default {
+  data: () => ({ pipelinesErrorStateSVG }),
+};
+</script>
+
+<template>
+  <div class="row empty-state js-pipelines-error-state">
+    <div class="col-xs-12">
+      <div class="svg-content" v-html="pipelinesErrorStateSVG" />
+    </div>
+
+    <div class="col-xs-12 text-center">
+      <div class="text-content">
+        <h4>The API failed to fetch the pipelines.</h4>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index 9bdc232b7da..6eea4812f33 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -1,12 +1,14 @@
 import Vue from 'vue';
+import Visibility from 'visibilityjs';
 import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
 import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
 import TablePaginationComponent from '../vue_shared/components/table_pagination';
-import EmptyState from './components/empty_state';
-import ErrorState from './components/error_state';
+import EmptyState from './components/empty_state.vue';
+import ErrorState from './components/error_state.vue';
 import NavigationTabs from './components/navigation_tabs';
 import NavigationControls from './components/nav_controls';
+import Poll from '../lib/utils/poll';
 
 export default {
   props: {
@@ -47,6 +49,7 @@ export default {
       pagenum: 1,
       isLoading: false,
       hasError: false,
+      isMakingRequest: false,
     };
   },
 
@@ -120,18 +123,49 @@ export default {
         tagsPath: this.tagsPath,
       };
     },
+
+    pageParameter() {
+      return gl.utils.getParameterByName('page') || this.pagenum;
+    },
+
+    scopeParameter() {
+      return gl.utils.getParameterByName('scope') || this.apiScope;
+    },
   },
 
   created() {
     this.service = new PipelinesService(this.endpoint);
 
-    this.fetchPipelines();
+    const poll = new Poll({
+      resource: this.service,
+      method: 'getPipelines',
+      data: { page: this.pageParameter, scope: this.scopeParameter },
+      successCallback: this.successCallback,
+      errorCallback: this.errorCallback,
+      notificationCallback: this.setIsMakingRequest,
+    });
+
+    if (!Visibility.hidden()) {
+      this.isLoading = true;
+      poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        poll.restart();
+      } else {
+        poll.stop();
+      }
+    });
 
     eventHub.$on('refreshPipelines', this.fetchPipelines);
   },
 
   beforeUpdate() {
-    if (this.state.pipelines.length && this.$children) {
+    if (this.state.pipelines.length &&
+        this.$children &&
+        !this.isMakingRequest &&
+        !this.isLoading) {
       this.store.startTimeAgoLoops.call(this, Vue);
     }
   },
@@ -154,27 +188,35 @@ export default {
     },
 
     fetchPipelines() {
-      const pageNumber = gl.utils.getParameterByName('page') || this.pagenum;
-      const scope = gl.utils.getParameterByName('scope') || this.apiScope;
+      if (!this.isMakingRequest) {
+        this.isLoading = true;
 
-      this.isLoading = true;
-      return this.service.getPipelines(scope, pageNumber)
-        .then(resp => ({
-          headers: resp.headers,
-          body: resp.json(),
-        }))
-        .then((response) => {
-          this.store.storeCount(response.body.count);
-          this.store.storePipelines(response.body.pipelines);
-          this.store.storePagination(response.headers);
-        })
-        .then(() => {
-          this.isLoading = false;
-        })
-        .catch(() => {
-          this.hasError = true;
-          this.isLoading = false;
-        });
+        this.service.getPipelines({ scope: this.scopeParameter, page: this.pageParameter })
+          .then(response => this.successCallback(response))
+          .catch(() => this.errorCallback());
+      }
+    },
+
+    successCallback(resp) {
+      const response = {
+        headers: resp.headers,
+        body: resp.json(),
+      };
+
+      this.store.storeCount(response.body.count);
+      this.store.storePipelines(response.body.pipelines);
+      this.store.storePagination(response.headers);
+
+      this.isLoading = false;
+    },
+
+    errorCallback() {
+      this.hasError = true;
+      this.isLoading = false;
+    },
+
+    setIsMakingRequest(isMakingRequest) {
+      this.isMakingRequest = isMakingRequest;
     },
   },
 
diff --git a/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js b/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js
index 708f5068dd3..255cd513490 100644
--- a/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js
+++ b/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js
@@ -26,7 +26,8 @@ export default class PipelinesService {
     this.pipelines = Vue.resource(endpoint);
   }
 
-  getPipelines(scope, page) {
+  getPipelines(data = {}) {
+    const { scope, page } = data;
     return this.pipelines.get({ scope, page });
   }
 
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 f5b3cb9214e..8ebe12cb1c5 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 
-import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button';
+import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button.vue';
 import PipelinesActionsComponent from '../../vue_pipelines_index/components/pipelines_actions';
 import PipelinesArtifactsComponent from '../../vue_pipelines_index/components/pipelines_artifacts';
 import PipelinesStatusComponent from '../../vue_pipelines_index/components/status';