Merge branch 'master' into ci-tables-ui-improvements

* master: (196 commits)
  Add quotes to coverage pattern
  Update CHANGELOG.md
  Bump omniauth to 1.4.2
  Bump Hashie to 3.5.5 to eliminate warning noise
  use single backticks for inline code
  Add performance query regression fix for !9088 affecting #27267
  Fix spec
  API: Return 400 for all validation erros in the mebers API
  Adds confirmation for cancel button
  Add newline
  Corrected indentation on the template string
  Adds backoff algo from EE to CE
  We don't need these checks anymore
  Raise error when no content is provided
  Address review
  Update API v3 in line with v4
  Fix new offenses
  Fix spec
  Fix specs
  Rename commit_file, commit_dir and remove_file and update specs
  ...

30 files changed, 1036 insertions, 671 deletions

diff --git a/app/assets/javascripts/ajax_loading_spinner.js b/app/assets/javascripts/ajax_loading_spinner.js
new file mode 100644
index 00000000000..38a8317dbd7
--- /dev/null
+++ b/app/assets/javascripts/ajax_loading_spinner.js
@@ -0,0 +1,35 @@
+class AjaxLoadingSpinner {
+  static init() {
+    const $elements = $('.js-ajax-loading-spinner');
+
+    $elements.on('ajax:beforeSend', AjaxLoadingSpinner.ajaxBeforeSend);
+    $elements.on('ajax:complete', AjaxLoadingSpinner.ajaxComplete);
+  }
+
+  static ajaxBeforeSend(e) {
+    e.target.setAttribute('disabled', '');
+    const iconElement = e.target.querySelector('i');
+    // get first fa- icon
+    const originalIcon = iconElement.className.match(/(fa-)([^\s]+)/g).first();
+    iconElement.dataset.icon = originalIcon;
+    AjaxLoadingSpinner.toggleLoadingIcon(iconElement);
+    $(e.target).off('ajax:beforeSend', AjaxLoadingSpinner.ajaxBeforeSend);
+  }
+
+  static ajaxComplete(e) {
+    e.target.removeAttribute('disabled');
+    const iconElement = e.target.querySelector('i');
+    AjaxLoadingSpinner.toggleLoadingIcon(iconElement);
+    $(e.target).off('ajax:complete', AjaxLoadingSpinner.ajaxComplete);
+  }
+
+  static toggleLoadingIcon(iconElement) {
+    const classList = iconElement.classList;
+    classList.toggle(iconElement.dataset.icon);
+    classList.toggle('fa-spinner');
+    classList.toggle('fa-spin');
+  }
+}
+
+window.gl = window.gl || {};
+gl.AjaxLoadingSpinner = AjaxLoadingSpinner;
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 8e468faedbf..53d8d313e39 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -6,12 +6,8 @@
 /* global AwardsHandler */
 /* global Aside */
 
-function requireAll(context) { return context.keys().map(context); }
-
 window.$ = window.jQuery = require('jquery');
-require('jquery-ui/ui/autocomplete');
 require('jquery-ui/ui/draggable');
-require('jquery-ui/ui/effect-highlight');
 require('jquery-ui/ui/sortable');
 require('jquery-ujs');
 require('vendor/jquery.endless-scroll');
@@ -46,15 +42,176 @@ require('./shortcuts_dashboard_navigation');
 require('./shortcuts_issuable');
 require('./shortcuts_network');
 require('vendor/jquery.nicescroll');
-requireAll(require.context('./behaviors',  false, /^\.\/.*\.(js|es6)$/));
-requireAll(require.context('./blob',       false, /^\.\/.*\.(js|es6)$/));
-requireAll(require.context('./templates',  false, /^\.\/.*\.(js|es6)$/));
-requireAll(require.context('./commit',     false, /^\.\/.*\.(js|es6)$/));
-requireAll(require.context('./extensions', false, /^\.\/.*\.(js|es6)$/));
-requireAll(require.context('./lib/utils',  false, /^\.\/.*\.(js|es6)$/));
-requireAll(require.context('./u2f',        false, /^\.\/.*\.(js|es6)$/));
-requireAll(require.context('./droplab',    false, /^\.\/.*\.(js|es6)$/));
-requireAll(require.context('.',            false, /^\.\/(?!application\.js).*\.(js|es6)$/));
+
+// behaviors
+require('./behaviors/autosize');
+require('./behaviors/details_behavior');
+require('./behaviors/quick_submit');
+require('./behaviors/requires_input');
+require('./behaviors/toggler_behavior');
+
+// blob
+require('./blob/blob_ci_yaml');
+require('./blob/blob_dockerfile_selector');
+require('./blob/blob_dockerfile_selectors');
+require('./blob/blob_file_dropzone');
+require('./blob/blob_gitignore_selector');
+require('./blob/blob_gitignore_selectors');
+require('./blob/blob_license_selector');
+require('./blob/blob_license_selectors');
+require('./blob/template_selector');
+
+// templates
+require('./templates/issuable_template_selector');
+require('./templates/issuable_template_selectors');
+
+// commit
+require('./commit/file.js');
+require('./commit/image_file.js');
+
+// extensions
+require('./extensions/array');
+require('./extensions/custom_event');
+require('./extensions/element');
+require('./extensions/jquery');
+require('./extensions/object');
+
+// lib/utils
+require('./lib/utils/animate');
+require('./lib/utils/bootstrap_linked_tabs');
+require('./lib/utils/common_utils');
+require('./lib/utils/datetime_utility');
+require('./lib/utils/notify');
+require('./lib/utils/pretty_time');
+require('./lib/utils/text_utility');
+require('./lib/utils/type_utility');
+require('./lib/utils/url_utility');
+
+// u2f
+require('./u2f/authenticate');
+require('./u2f/error');
+require('./u2f/register');
+require('./u2f/util');
+
+// droplab
+require('./droplab/droplab');
+require('./droplab/droplab_ajax');
+require('./droplab/droplab_ajax_filter');
+require('./droplab/droplab_filter');
+
+// everything else
+require('./abuse_reports');
+require('./activities');
+require('./admin');
+require('./ajax_loading_spinner');
+require('./api');
+require('./aside');
+require('./autosave');
+require('./awards_handler');
+require('./breakpoints');
+require('./broadcast_message');
+require('./build');
+require('./build_artifacts');
+require('./build_variables');
+require('./ci_lint_editor');
+require('./commit');
+require('./commits');
+require('./compare');
+require('./compare_autocomplete');
+require('./confirm_danger_modal');
+require('./copy_as_gfm');
+require('./copy_to_clipboard');
+require('./create_label');
+require('./diff');
+require('./dispatcher');
+require('./dropzone_input');
+require('./due_date_select');
+require('./files_comment_button');
+require('./flash');
+require('./gfm_auto_complete');
+require('./gl_dropdown');
+require('./gl_field_error');
+require('./gl_field_errors');
+require('./gl_form');
+require('./group_avatar');
+require('./group_label_subscription');
+require('./groups_select');
+require('./header');
+require('./importer_status');
+require('./issuable');
+require('./issuable_context');
+require('./issuable_form');
+require('./issue');
+require('./issue_status_select');
+require('./issues_bulk_assignment');
+require('./label_manager');
+require('./labels');
+require('./labels_select');
+require('./layout_nav');
+require('./line_highlighter');
+require('./logo');
+require('./member_expiration_date');
+require('./members');
+require('./merge_request');
+require('./merge_request_tabs');
+require('./merge_request_widget');
+require('./merged_buttons');
+require('./milestone');
+require('./milestone_select');
+require('./mini_pipeline_graph_dropdown');
+require('./namespace_select');
+require('./new_branch_form');
+require('./new_commit_form');
+require('./notes');
+require('./notifications_dropdown');
+require('./notifications_form');
+require('./pager');
+require('./pipelines');
+require('./preview_markdown');
+require('./project');
+require('./project_avatar');
+require('./project_find_file');
+require('./project_fork');
+require('./project_import');
+require('./project_label_subscription');
+require('./project_new');
+require('./project_select');
+require('./project_show');
+require('./project_variables');
+require('./projects_list');
+require('./render_gfm');
+require('./render_math');
+require('./right_sidebar');
+require('./search');
+require('./search_autocomplete');
+require('./shortcuts');
+require('./shortcuts_blob');
+require('./shortcuts_dashboard_navigation');
+require('./shortcuts_find_file');
+require('./shortcuts_issuable');
+require('./shortcuts_navigation');
+require('./shortcuts_network');
+require('./signin_tabs_memoizer');
+require('./single_file_diff');
+require('./smart_interval');
+require('./snippets_list');
+require('./star');
+require('./subbable_resource');
+require('./subscription');
+require('./subscription_select');
+require('./syntax_highlight');
+require('./task_list');
+require('./todos');
+require('./tree');
+require('./user');
+require('./user_tabs');
+require('./username_validator');
+require('./users_select');
+require('./version_check_image');
+require('./visibility_select');
+require('./wikis');
+require('./zen_mode');
+
 require('vendor/fuzzaldrin-plus');
 require('es6-promise').polyfill();
 
diff --git a/app/assets/javascripts/boards/components/board_card.js b/app/assets/javascripts/boards/components/board_card.js
new file mode 100644
index 00000000000..52f61d84517
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_card.js
@@ -0,0 +1,69 @@
+/* global Vue */
+require('./issue_card_inner');
+
+const Store = gl.issueBoards.BoardsStore;
+
+module.exports = {
+  name: 'BoardsIssueCard',
+  template: `
+    <li class="card"
+      :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+      :index="index"
+      :data-issue-id="issue.id"
+      @mousedown="mouseDown"
+      @mousemove="mouseMove"
+      @mouseup="showIssue($event)">
+      <issue-card-inner
+        :list="list"
+        :issue="issue"
+        :issue-link-base="issueLinkBase"
+        :root-path="rootPath" />
+    </li>
+  `,
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String,
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail,
+    };
+  },
+  computed: {
+    issueDetailVisible() {
+      return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
+    },
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true;
+    },
+    mouseMove() {
+      this.showDetail = false;
+    },
+    showIssue(e) {
+      const targetTagName = e.target.tagName.toLowerCase();
+
+      if (targetTagName === 'a' || targetTagName === 'button') return;
+
+      if (this.showDetail) {
+        this.showDetail = false;
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          Store.detail.issue = {};
+        } else {
+          Store.detail.issue = this.issue;
+          Store.detail.list = this.list;
+        }
+      }
+    },
+  },
+};
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
deleted file mode 100644
index 0ea66bd027c..00000000000
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ /dev/null
@@ -1,61 +0,0 @@
-/* eslint-disable comma-dangle, space-before-function-paren, dot-notation */
-/* global Vue */
-
-require('./issue_card_inner');
-
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.BoardCard = Vue.extend({
-    template: '#js-board-list-card',
-    components: {
-      'issue-card-inner': gl.issueBoards.IssueCardInner,
-    },
-    props: {
-      list: Object,
-      issue: Object,
-      issueLinkBase: String,
-      disabled: Boolean,
-      index: Number,
-      rootPath: String,
-    },
-    data () {
-      return {
-        showDetail: false,
-        detailIssue: Store.detail
-      };
-    },
-    computed: {
-      issueDetailVisible () {
-        return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
-      }
-    },
-    methods: {
-      mouseDown () {
-        this.showDetail = true;
-      },
-      mouseMove() {
-        this.showDetail = false;
-      },
-      showIssue (e) {
-        const targetTagName = e.target.tagName.toLowerCase();
-
-        if (targetTagName === 'a' || targetTagName === 'button') return;
-
-        if (this.showDetail) {
-          this.showDetail = false;
-
-          if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
-            Store.detail.issue = {};
-          } else {
-            Store.detail.issue = this.issue;
-            Store.detail.list = this.list;
-          }
-        }
-      }
-    }
-  });
-})();
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 60b0a30af3f..d92047cc0f8 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -2,7 +2,7 @@
 /* global Vue */
 /* global Sortable */
 
-require('./board_card');
+const boardCard = require('./board_card');
 require('./board_new_issue');
 
 (() => {
@@ -14,7 +14,7 @@ require('./board_new_issue');
   gl.issueBoards.BoardList = Vue.extend({
     template: '#js-board-list-template',
     components: {
-      'board-card': gl.issueBoards.BoardCard,
+      boardCard,
       'board-new-issue': gl.issueBoards.BoardNewIssue
     },
     props: {
diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6
index 5152be56b66..8158ed4ec2c 100644
--- a/app/assets/javascripts/boards/models/list.js.es6
+++ b/app/assets/javascripts/boards/models/list.js.es6
@@ -123,14 +123,18 @@ class List {
 
       if (listFrom) {
         this.issuesSize += 1;
-        gl.boardService.moveIssue(issue.id, listFrom.id, this.id)
-          .then(() => {
-            listFrom.getIssues(false);
-          });
+        this.updateIssueLabel(issue, listFrom);
       }
     }
   }
 
+  updateIssueLabel(issue, listFrom) {
+    gl.boardService.moveIssue(issue.id, listFrom.id, this.id)
+      .then(() => {
+        listFrom.getIssues(false);
+      });
+  }
+
   findIssue (id) {
     return this.issues.filter(issue => issue.id === id)[0];
   }
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index 50842ecbaaa..56436c8fdc7 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -92,9 +92,12 @@
       const issueLists = issue.getLists();
       const listLabels = issueLists.map(listIssue => listIssue.label);
 
-      // Add to new lists issues if it doesn't already exist
       if (!issueTo) {
+        // Add to new lists issues if it doesn't already exist
         listTo.addIssue(issue, listFrom, newIndex);
+      } else {
+        listTo.updateIssueLabel(issue, listFrom);
+        issueTo.removeLabel(listFrom.label);
       }
 
       if (listTo.type === 'done') {
diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6
index f55db02f0fd..0f678492d4c 100644
--- a/app/assets/javascripts/dispatcher.js.es6
+++ b/app/assets/javascripts/dispatcher.js.es6
@@ -36,6 +36,7 @@
 /* global Shortcuts */
 
 const ShortcutsBlob = require('./shortcuts_blob');
+const UserCallout = require('./user_callout');
 
 (function() {
   var Dispatcher;
@@ -108,6 +109,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:compare:show':
           new gl.Diff();
           break;
+        case 'projects:branches:index':
+          gl.AjaxLoadingSpinner.init();
+          break;
         case 'projects:issues:new':
         case 'projects:issues:edit':
           shortcut_handler = new ShortcutsNavigation();
@@ -274,6 +278,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'ci:lints:show':
           new gl.CILintEditor();
           break;
+        case 'users:show':
+          new UserCallout();
+          break;
       }
       switch (path.first()) {
         case 'sessions':
@@ -310,6 +317,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'dashboard':
         case 'root':
           shortcut_handler = new ShortcutsDashboardNavigation();
+          new UserCallout();
           break;
         case 'profiles':
           new NotificationsForm();
diff --git a/app/assets/javascripts/graphs/graphs_bundle.js b/app/assets/javascripts/graphs/graphs_bundle.js
index 086dcb34571..ea5afbd9d29 100644
--- a/app/assets/javascripts/graphs/graphs_bundle.js
+++ b/app/assets/javascripts/graphs/graphs_bundle.js
@@ -1,4 +1,4 @@
-require('./stat_graph_contributors_graph');
-require('./stat_graph_contributors_util');
-require('./stat_graph_contributors');
-require('./stat_graph');
+import ContributorsStatGraph from './stat_graph_contributors';
+
+// export to global scope
+window.ContributorsStatGraph = ContributorsStatGraph;
diff --git a/app/assets/javascripts/graphs/stat_graph.js b/app/assets/javascripts/graphs/stat_graph.js
deleted file mode 100644
index 75a53aae33c..00000000000
--- a/app/assets/javascripts/graphs/stat_graph.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-return-assign, max-len */
-(function() {
-  this.StatGraph = (function() {
-    function StatGraph() {}
-
-    StatGraph.log = {};
-
-    StatGraph.get_log = function() {
-      return this.log;
-    };
-
-    StatGraph.set_log = function(data) {
-      return this.log = data;
-    };
-
-    return StatGraph;
-  })();
-}).call(window);
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors.js b/app/assets/javascripts/graphs/stat_graph_contributors.js
index bbfb467ad50..c6be4c9e8fe 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors.js
@@ -1,116 +1,111 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, camelcase, one-var-declaration-per-line, quotes, no-param-reassign, quote-props, comma-dangle, prefer-template, max-len, no-return-assign */
-/* global ContributorsGraph */
-/* global ContributorsAuthorGraph */
-/* global ContributorsMasterGraph */
-/* global ContributorsStatGraphUtil */
-/* global d3 */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, camelcase, one-var-declaration-per-line, quotes, no-param-reassign, quote-props, comma-dangle, prefer-template, max-len, no-return-assign, no-shadow */
 
-window.d3 = require('d3');
+import d3 from 'd3';
+import { ContributorsGraph, ContributorsAuthorGraph, ContributorsMasterGraph } from './stat_graph_contributors_graph';
+import ContributorsStatGraphUtil from './stat_graph_contributors_util';
 
-(function() {
-  this.ContributorsStatGraph = (function() {
-    function ContributorsStatGraph() {}
+export default (function() {
+  function ContributorsStatGraph() {}
 
-    ContributorsStatGraph.prototype.init = function(log) {
-      var author_commits, total_commits;
-      this.parsed_log = ContributorsStatGraphUtil.parse_log(log);
-      this.set_current_field("commits");
-      total_commits = ContributorsStatGraphUtil.get_total_data(this.parsed_log, this.field);
-      author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field);
-      this.add_master_graph(total_commits);
-      this.add_authors_graph(author_commits);
-      return this.change_date_header();
-    };
+  ContributorsStatGraph.prototype.init = function(log) {
+    var author_commits, total_commits;
+    this.parsed_log = ContributorsStatGraphUtil.parse_log(log);
+    this.set_current_field("commits");
+    total_commits = ContributorsStatGraphUtil.get_total_data(this.parsed_log, this.field);
+    author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field);
+    this.add_master_graph(total_commits);
+    this.add_authors_graph(author_commits);
+    return this.change_date_header();
+  };
 
-    ContributorsStatGraph.prototype.add_master_graph = function(total_data) {
-      this.master_graph = new ContributorsMasterGraph(total_data);
-      return this.master_graph.draw();
-    };
+  ContributorsStatGraph.prototype.add_master_graph = function(total_data) {
+    this.master_graph = new ContributorsMasterGraph(total_data);
+    return this.master_graph.draw();
+  };
 
-    ContributorsStatGraph.prototype.add_authors_graph = function(author_data) {
-      var limited_author_data;
-      this.authors = [];
-      limited_author_data = author_data.slice(0, 100);
-      return _.each(limited_author_data, (function(_this) {
-        return function(d) {
-          var author_graph, author_header;
-          author_header = _this.create_author_header(d);
-          $(".contributors-list").append(author_header);
-          _this.authors[d.author_name] = author_graph = new ContributorsAuthorGraph(d.dates);
-          return author_graph.draw();
-        };
-      })(this));
-    };
+  ContributorsStatGraph.prototype.add_authors_graph = function(author_data) {
+    var limited_author_data;
+    this.authors = [];
+    limited_author_data = author_data.slice(0, 100);
+    return _.each(limited_author_data, (function(_this) {
+      return function(d) {
+        var author_graph, author_header;
+        author_header = _this.create_author_header(d);
+        $(".contributors-list").append(author_header);
+        _this.authors[d.author_name] = author_graph = new ContributorsAuthorGraph(d.dates);
+        return author_graph.draw();
+      };
+    })(this));
+  };
 
-    ContributorsStatGraph.prototype.format_author_commit_info = function(author) {
-      var commits;
-      commits = $('<span/>', {
-        "class": 'graph-author-commits-count'
-      });
-      commits.text(author.commits + " commits");
-      return $('<span/>').append(commits);
-    };
+  ContributorsStatGraph.prototype.format_author_commit_info = function(author) {
+    var commits;
+    commits = $('<span/>', {
+      "class": 'graph-author-commits-count'
+    });
+    commits.text(author.commits + " commits");
+    return $('<span/>').append(commits);
+  };
 
-    ContributorsStatGraph.prototype.create_author_header = function(author) {
-      var author_commit_info, author_commit_info_span, author_email, author_name, list_item;
-      list_item = $('<li/>', {
-        "class": 'person',
-        style: 'display: block;'
-      });
-      author_name = $('<h4>' + author.author_name + '</h4>');
-      author_email = $('<p class="graph-author-email">' + author.author_email + '</p>');
-      author_commit_info_span = $('<span/>', {
-        "class": 'commits'
-      });
-      author_commit_info = this.format_author_commit_info(author);
-      author_commit_info_span.html(author_commit_info);
-      list_item.append(author_name);
-      list_item.append(author_email);
-      list_item.append(author_commit_info_span);
-      return list_item;
-    };
+  ContributorsStatGraph.prototype.create_author_header = function(author) {
+    var author_commit_info, author_commit_info_span, author_email, author_name, list_item;
+    list_item = $('<li/>', {
+      "class": 'person',
+      style: 'display: block;'
+    });
+    author_name = $('<h4>' + author.author_name + '</h4>');
+    author_email = $('<p class="graph-author-email">' + author.author_email + '</p>');
+    author_commit_info_span = $('<span/>', {
+      "class": 'commits'
+    });
+    author_commit_info = this.format_author_commit_info(author);
+    author_commit_info_span.html(author_commit_info);
+    list_item.append(author_name);
+    list_item.append(author_email);
+    list_item.append(author_commit_info_span);
+    return list_item;
+  };
 
-    ContributorsStatGraph.prototype.redraw_master = function() {
-      var total_data;
-      total_data = ContributorsStatGraphUtil.get_total_data(this.parsed_log, this.field);
-      this.master_graph.set_data(total_data);
-      return this.master_graph.redraw();
-    };
+  ContributorsStatGraph.prototype.redraw_master = function() {
+    var total_data;
+    total_data = ContributorsStatGraphUtil.get_total_data(this.parsed_log, this.field);
+    this.master_graph.set_data(total_data);
+    return this.master_graph.redraw();
+  };
 
-    ContributorsStatGraph.prototype.redraw_authors = function() {
-      var author_commits, x_domain;
-      $("ol").html("");
-      x_domain = ContributorsGraph.prototype.x_domain;
-      author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field, x_domain);
-      return _.each(author_commits, (function(_this) {
-        return function(d) {
-          _this.redraw_author_commit_info(d);
-          $(_this.authors[d.author_name].list_item).appendTo("ol");
-          _this.authors[d.author_name].set_data(d.dates);
-          return _this.authors[d.author_name].redraw();
-        };
-      })(this));
-    };
+  ContributorsStatGraph.prototype.redraw_authors = function() {
+    var author_commits, x_domain;
+    $("ol").html("");
+    x_domain = ContributorsGraph.prototype.x_domain;
+    author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field, x_domain);
+    return _.each(author_commits, (function(_this) {
+      return function(d) {
+        _this.redraw_author_commit_info(d);
+        $(_this.authors[d.author_name].list_item).appendTo("ol");
+        _this.authors[d.author_name].set_data(d.dates);
+        return _this.authors[d.author_name].redraw();
+      };
+    })(this));
+  };
 
-    ContributorsStatGraph.prototype.set_current_field = function(field) {
-      return this.field = field;
-    };
+  ContributorsStatGraph.prototype.set_current_field = function(field) {
+    return this.field = field;
+  };
 
-    ContributorsStatGraph.prototype.change_date_header = function() {
-      var print, print_date_format, x_domain;
-      x_domain = ContributorsGraph.prototype.x_domain;
-      print_date_format = d3.time.format("%B %e %Y");
-      print = print_date_format(x_domain[0]) + " - " + print_date_format(x_domain[1]);
-      return $("#date_header").text(print);
-    };
+  ContributorsStatGraph.prototype.change_date_header = function() {
+    var print, print_date_format, x_domain;
+    x_domain = ContributorsGraph.prototype.x_domain;
+    print_date_format = d3.time.format("%B %e %Y");
+    print = print_date_format(x_domain[0]) + " - " + print_date_format(x_domain[1]);
+    return $("#date_header").text(print);
+  };
 
-    ContributorsStatGraph.prototype.redraw_author_commit_info = function(author) {
-      var author_commit_info, author_list_item;
-      author_list_item = $(this.authors[author.author_name].list_item);
-      author_commit_info = this.format_author_commit_info(author);
-      return author_list_item.find("span").html(author_commit_info);
-    };
+  ContributorsStatGraph.prototype.redraw_author_commit_info = function(author) {
+    var author_commit_info, author_list_item;
+    author_list_item = $(this.authors[author.author_name].list_item);
+    author_commit_info = this.format_author_commit_info(author);
+    return author_list_item.find("span").html(author_commit_info);
+  };
 
-    return ContributorsStatGraph;
-  })();
-}).call(window);
+  return ContributorsStatGraph;
+})();
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
index 228771da4ee..521bc77db66 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
@@ -1,276 +1,272 @@
-/* eslint-disable func-names, space-before-function-paren, one-var, no-var, prefer-rest-params, max-len, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, comma-dangle, no-return-assign, prefer-arrow-callback, quotes, prefer-template, newline-per-chained-call, no-else-return */
-/* global d3 */
-/* global ContributorsGraph */
-
-window.d3 = require('d3');
-
-(function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
-    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.ContributorsGraph = (function() {
-    function ContributorsGraph() {}
-
-    ContributorsGraph.prototype.MARGIN = {
-      top: 20,
-      right: 20,
-      bottom: 30,
-      left: 50
-    };
-
-    ContributorsGraph.prototype.x_domain = null;
-
-    ContributorsGraph.prototype.y_domain = null;
-
-    ContributorsGraph.prototype.dates = [];
-
-    ContributorsGraph.set_x_domain = function(data) {
-      return ContributorsGraph.prototype.x_domain = data;
-    };
-
-    ContributorsGraph.set_y_domain = function(data) {
-      return ContributorsGraph.prototype.y_domain = [
-        0, d3.max(data, function(d) {
-          return d.commits = d.commits || d.additions || d.deletions;
-        })
-      ];
-    };
-
-    ContributorsGraph.init_x_domain = function(data) {
-      return ContributorsGraph.prototype.x_domain = d3.extent(data, function(d) {
-        return d.date;
-      });
-    };
-
-    ContributorsGraph.init_y_domain = function(data) {
-      return ContributorsGraph.prototype.y_domain = [
-        0, d3.max(data, function(d) {
-          return d.commits = d.commits || d.additions || d.deletions;
-        })
-      ];
-    };
-
-    ContributorsGraph.init_domain = function(data) {
-      ContributorsGraph.init_x_domain(data);
-      return ContributorsGraph.init_y_domain(data);
-    };
-
-    ContributorsGraph.set_dates = function(data) {
-      return ContributorsGraph.prototype.dates = data;
-    };
-
-    ContributorsGraph.prototype.set_x_domain = function() {
-      return this.x.domain(this.x_domain);
-    };
-
-    ContributorsGraph.prototype.set_y_domain = function() {
-      return this.y.domain(this.y_domain);
-    };
-
-    ContributorsGraph.prototype.set_domain = function() {
-      this.set_x_domain();
-      return this.set_y_domain();
-    };
-
-    ContributorsGraph.prototype.create_scale = function(width, height) {
-      this.x = d3.time.scale().range([0, width]).clamp(true);
-      return this.y = d3.scale.linear().range([height, 0]).nice();
-    };
-
-    ContributorsGraph.prototype.draw_x_axis = function() {
-      return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0, " + this.height + ")").call(this.x_axis);
-    };
-
-    ContributorsGraph.prototype.draw_y_axis = function() {
-      return this.svg.append("g").attr("class", "y axis").call(this.y_axis);
-    };
-
-    ContributorsGraph.prototype.set_data = function(data) {
-      return this.data = data;
-    };
-
-    return ContributorsGraph;
-  })();
-
-  this.ContributorsMasterGraph = (function(superClass) {
-    extend(ContributorsMasterGraph, superClass);
-
-    function ContributorsMasterGraph(data1) {
-      this.data = data1;
-      this.update_content = bind(this.update_content, this);
-      this.width = $('.content').width() - 70;
-      this.height = 200;
-      this.x = null;
-      this.y = null;
-      this.x_axis = null;
-      this.y_axis = null;
-      this.area = null;
-      this.svg = null;
-      this.brush = null;
-      this.x_max_domain = null;
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, max-len, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, comma-dangle, no-return-assign, prefer-arrow-callback, quotes, prefer-template, newline-per-chained-call, no-else-return, no-shadow */
+
+import d3 from 'd3';
+
+const bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
+const 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; };
+const hasProp = {}.hasOwnProperty;
+
+export const ContributorsGraph = (function() {
+  function ContributorsGraph() {}
+
+  ContributorsGraph.prototype.MARGIN = {
+    top: 20,
+    right: 20,
+    bottom: 30,
+    left: 50
+  };
+
+  ContributorsGraph.prototype.x_domain = null;
+
+  ContributorsGraph.prototype.y_domain = null;
+
+  ContributorsGraph.prototype.dates = [];
+
+  ContributorsGraph.set_x_domain = function(data) {
+    return ContributorsGraph.prototype.x_domain = data;
+  };
+
+  ContributorsGraph.set_y_domain = function(data) {
+    return ContributorsGraph.prototype.y_domain = [
+      0, d3.max(data, function(d) {
+        return d.commits = d.commits || d.additions || d.deletions;
+      })
+    ];
+  };
+
+  ContributorsGraph.init_x_domain = function(data) {
+    return ContributorsGraph.prototype.x_domain = d3.extent(data, function(d) {
+      return d.date;
+    });
+  };
+
+  ContributorsGraph.init_y_domain = function(data) {
+    return ContributorsGraph.prototype.y_domain = [
+      0, d3.max(data, function(d) {
+        return d.commits = d.commits || d.additions || d.deletions;
+      })
+    ];
+  };
+
+  ContributorsGraph.init_domain = function(data) {
+    ContributorsGraph.init_x_domain(data);
+    return ContributorsGraph.init_y_domain(data);
+  };
+
+  ContributorsGraph.set_dates = function(data) {
+    return ContributorsGraph.prototype.dates = data;
+  };
+
+  ContributorsGraph.prototype.set_x_domain = function() {
+    return this.x.domain(this.x_domain);
+  };
+
+  ContributorsGraph.prototype.set_y_domain = function() {
+    return this.y.domain(this.y_domain);
+  };
+
+  ContributorsGraph.prototype.set_domain = function() {
+    this.set_x_domain();
+    return this.set_y_domain();
+  };
+
+  ContributorsGraph.prototype.create_scale = function(width, height) {
+    this.x = d3.time.scale().range([0, width]).clamp(true);
+    return this.y = d3.scale.linear().range([height, 0]).nice();
+  };
+
+  ContributorsGraph.prototype.draw_x_axis = function() {
+    return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0, " + this.height + ")").call(this.x_axis);
+  };
+
+  ContributorsGraph.prototype.draw_y_axis = function() {
+    return this.svg.append("g").attr("class", "y axis").call(this.y_axis);
+  };
+
+  ContributorsGraph.prototype.set_data = function(data) {
+    return this.data = data;
+  };
+
+  return ContributorsGraph;
+})();
+
+export const ContributorsMasterGraph = (function(superClass) {
+  extend(ContributorsMasterGraph, superClass);
+
+  function ContributorsMasterGraph(data1) {
+    this.data = data1;
+    this.update_content = bind(this.update_content, this);
+    this.width = $('.content').width() - 70;
+    this.height = 200;
+    this.x = null;
+    this.y = null;
+    this.x_axis = null;
+    this.y_axis = null;
+    this.area = null;
+    this.svg = null;
+    this.brush = null;
+    this.x_max_domain = null;
+  }
+
+  ContributorsMasterGraph.prototype.process_dates = function(data) {
+    var dates;
+    dates = this.get_dates(data);
+    this.parse_dates(data);
+    return ContributorsGraph.set_dates(dates);
+  };
+
+  ContributorsMasterGraph.prototype.get_dates = function(data) {
+    return _.pluck(data, 'date');
+  };
+
+  ContributorsMasterGraph.prototype.parse_dates = function(data) {
+    var parseDate;
+    parseDate = d3.time.format("%Y-%m-%d").parse;
+    return data.forEach(function(d) {
+      return d.date = parseDate(d.date);
+    });
+  };
+
+  ContributorsMasterGraph.prototype.create_scale = function() {
+    return ContributorsMasterGraph.__super__.create_scale.call(this, this.width, this.height);
+  };
+
+  ContributorsMasterGraph.prototype.create_axes = function() {
+    this.x_axis = d3.svg.axis().scale(this.x).orient("bottom");
+    return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
+  };
+
+  ContributorsMasterGraph.prototype.create_svg = function() {
+    return this.svg = d3.select("#contributors-master").append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "tint-box").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+  };
+
+  ContributorsMasterGraph.prototype.create_area = function(x, y) {
+    return this.area = d3.svg.area().x(function(d) {
+      return x(d.date);
+    }).y0(this.height).y1(function(d) {
+      d.commits = d.commits || d.additions || d.deletions;
+      return y(d.commits);
+    }).interpolate("basis");
+  };
+
+  ContributorsMasterGraph.prototype.create_brush = function() {
+    return this.brush = d3.svg.brush().x(this.x).on("brushend", this.update_content);
+  };
+
+  ContributorsMasterGraph.prototype.draw_path = function(data) {
+    return this.svg.append("path").datum(data).attr("class", "area").attr("d", this.area);
+  };
+
+  ContributorsMasterGraph.prototype.add_brush = function() {
+    return this.svg.append("g").attr("class", "selection").call(this.brush).selectAll("rect").attr("height", this.height);
+  };
+
+  ContributorsMasterGraph.prototype.update_content = function() {
+    ContributorsGraph.set_x_domain(this.brush.empty() ? this.x_max_domain : this.brush.extent());
+    return $("#brush_change").trigger('change');
+  };
+
+  ContributorsMasterGraph.prototype.draw = function() {
+    this.process_dates(this.data);
+    this.create_scale();
+    this.create_axes();
+    ContributorsGraph.init_domain(this.data);
+    this.x_max_domain = this.x_domain;
+    this.set_domain();
+    this.create_area(this.x, this.y);
+    this.create_svg();
+    this.create_brush();
+    this.draw_path(this.data);
+    this.draw_x_axis();
+    this.draw_y_axis();
+    return this.add_brush();
+  };
+
+  ContributorsMasterGraph.prototype.redraw = function() {
+    this.process_dates(this.data);
+    ContributorsGraph.set_y_domain(this.data);
+    this.set_y_domain();
+    this.svg.select("path").datum(this.data);
+    this.svg.select("path").attr("d", this.area);
+    return this.svg.select(".y.axis").call(this.y_axis);
+  };
+
+  return ContributorsMasterGraph;
+})(ContributorsGraph);
+
+export const ContributorsAuthorGraph = (function(superClass) {
+  extend(ContributorsAuthorGraph, superClass);
+
+  function ContributorsAuthorGraph(data1) {
+    this.data = data1;
+    // Don't split graph size in half for mobile devices.
+    if ($(window).width() < 768) {
+      this.width = $('.content').width() - 80;
+    } else {
+      this.width = ($('.content').width() / 2) - 100;
     }
-
-    ContributorsMasterGraph.prototype.process_dates = function(data) {
-      var dates;
-      dates = this.get_dates(data);
-      this.parse_dates(data);
-      return ContributorsGraph.set_dates(dates);
-    };
-
-    ContributorsMasterGraph.prototype.get_dates = function(data) {
-      return _.pluck(data, 'date');
-    };
-
-    ContributorsMasterGraph.prototype.parse_dates = function(data) {
+    this.height = 200;
+    this.x = null;
+    this.y = null;
+    this.x_axis = null;
+    this.y_axis = null;
+    this.area = null;
+    this.svg = null;
+    this.list_item = null;
+  }
+
+  ContributorsAuthorGraph.prototype.create_scale = function() {
+    return ContributorsAuthorGraph.__super__.create_scale.call(this, this.width, this.height);
+  };
+
+  ContributorsAuthorGraph.prototype.create_axes = function() {
+    this.x_axis = d3.svg.axis().scale(this.x).orient("bottom").ticks(8);
+    return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
+  };
+
+  ContributorsAuthorGraph.prototype.create_area = function(x, y) {
+    return this.area = d3.svg.area().x(function(d) {
       var parseDate;
       parseDate = d3.time.format("%Y-%m-%d").parse;
-      return data.forEach(function(d) {
-        return d.date = parseDate(d.date);
-      });
-    };
-
-    ContributorsMasterGraph.prototype.create_scale = function() {
-      return ContributorsMasterGraph.__super__.create_scale.call(this, this.width, this.height);
-    };
-
-    ContributorsMasterGraph.prototype.create_axes = function() {
-      this.x_axis = d3.svg.axis().scale(this.x).orient("bottom");
-      return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
-    };
-
-    ContributorsMasterGraph.prototype.create_svg = function() {
-      return this.svg = d3.select("#contributors-master").append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "tint-box").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
-    };
-
-    ContributorsMasterGraph.prototype.create_area = function(x, y) {
-      return this.area = d3.svg.area().x(function(d) {
-        return x(d.date);
-      }).y0(this.height).y1(function(d) {
-        d.commits = d.commits || d.additions || d.deletions;
-        return y(d.commits);
-      }).interpolate("basis");
-    };
-
-    ContributorsMasterGraph.prototype.create_brush = function() {
-      return this.brush = d3.svg.brush().x(this.x).on("brushend", this.update_content);
-    };
-
-    ContributorsMasterGraph.prototype.draw_path = function(data) {
-      return this.svg.append("path").datum(data).attr("class", "area").attr("d", this.area);
-    };
-
-    ContributorsMasterGraph.prototype.add_brush = function() {
-      return this.svg.append("g").attr("class", "selection").call(this.brush).selectAll("rect").attr("height", this.height);
-    };
-
-    ContributorsMasterGraph.prototype.update_content = function() {
-      ContributorsGraph.set_x_domain(this.brush.empty() ? this.x_max_domain : this.brush.extent());
-      return $("#brush_change").trigger('change');
-    };
-
-    ContributorsMasterGraph.prototype.draw = function() {
-      this.process_dates(this.data);
-      this.create_scale();
-      this.create_axes();
-      ContributorsGraph.init_domain(this.data);
-      this.x_max_domain = this.x_domain;
-      this.set_domain();
-      this.create_area(this.x, this.y);
-      this.create_svg();
-      this.create_brush();
-      this.draw_path(this.data);
-      this.draw_x_axis();
-      this.draw_y_axis();
-      return this.add_brush();
-    };
-
-    ContributorsMasterGraph.prototype.redraw = function() {
-      this.process_dates(this.data);
-      ContributorsGraph.set_y_domain(this.data);
-      this.set_y_domain();
-      this.svg.select("path").datum(this.data);
-      this.svg.select("path").attr("d", this.area);
-      return this.svg.select(".y.axis").call(this.y_axis);
-    };
-
-    return ContributorsMasterGraph;
-  })(ContributorsGraph);
-
-  this.ContributorsAuthorGraph = (function(superClass) {
-    extend(ContributorsAuthorGraph, superClass);
-
-    function ContributorsAuthorGraph(data1) {
-      this.data = data1;
-      // Don't split graph size in half for mobile devices.
-      if ($(window).width() < 768) {
-        this.width = $('.content').width() - 80;
-      } else {
-        this.width = ($('.content').width() / 2) - 100;
-      }
-      this.height = 200;
-      this.x = null;
-      this.y = null;
-      this.x_axis = null;
-      this.y_axis = null;
-      this.area = null;
-      this.svg = null;
-      this.list_item = null;
-    }
-
-    ContributorsAuthorGraph.prototype.create_scale = function() {
-      return ContributorsAuthorGraph.__super__.create_scale.call(this, this.width, this.height);
-    };
-
-    ContributorsAuthorGraph.prototype.create_axes = function() {
-      this.x_axis = d3.svg.axis().scale(this.x).orient("bottom").ticks(8);
-      return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
-    };
-
-    ContributorsAuthorGraph.prototype.create_area = function(x, y) {
-      return this.area = d3.svg.area().x(function(d) {
-        var parseDate;
-        parseDate = d3.time.format("%Y-%m-%d").parse;
-        return x(parseDate(d));
-      }).y0(this.height).y1((function(_this) {
-        return function(d) {
-          if (_this.data[d] != null) {
-            return y(_this.data[d]);
-          } else {
-            return y(0);
-          }
-        };
-      })(this)).interpolate("basis");
-    };
-
-    ContributorsAuthorGraph.prototype.create_svg = function() {
-      this.list_item = d3.selectAll(".person")[0].pop();
-      return this.svg = d3.select(this.list_item).append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "spark").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
-    };
-
-    ContributorsAuthorGraph.prototype.draw_path = function(data) {
-      return this.svg.append("path").datum(data).attr("class", "area-contributor").attr("d", this.area);
-    };
-
-    ContributorsAuthorGraph.prototype.draw = function() {
-      this.create_scale();
-      this.create_axes();
-      this.set_domain();
-      this.create_area(this.x, this.y);
-      this.create_svg();
-      this.draw_path(this.dates);
-      this.draw_x_axis();
-      return this.draw_y_axis();
-    };
-
-    ContributorsAuthorGraph.prototype.redraw = function() {
-      this.set_domain();
-      this.svg.select("path").datum(this.dates);
-      this.svg.select("path").attr("d", this.area);
-      this.svg.select(".x.axis").call(this.x_axis);
-      return this.svg.select(".y.axis").call(this.y_axis);
-    };
-
-    return ContributorsAuthorGraph;
-  })(ContributorsGraph);
-}).call(window);
+      return x(parseDate(d));
+    }).y0(this.height).y1((function(_this) {
+      return function(d) {
+        if (_this.data[d] != null) {
+          return y(_this.data[d]);
+        } else {
+          return y(0);
+        }
+      };
+    })(this)).interpolate("basis");
+  };
+
+  ContributorsAuthorGraph.prototype.create_svg = function() {
+    this.list_item = d3.selectAll(".person")[0].pop();
+    return this.svg = d3.select(this.list_item).append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "spark").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+  };
+
+  ContributorsAuthorGraph.prototype.draw_path = function(data) {
+    return this.svg.append("path").datum(data).attr("class", "area-contributor").attr("d", this.area);
+  };
+
+  ContributorsAuthorGraph.prototype.draw = function() {
+    this.create_scale();
+    this.create_axes();
+    this.set_domain();
+    this.create_area(this.x, this.y);
+    this.create_svg();
+    this.draw_path(this.dates);
+    this.draw_x_axis();
+    return this.draw_y_axis();
+  };
+
+  ContributorsAuthorGraph.prototype.redraw = function() {
+    this.set_domain();
+    this.svg.select("path").datum(this.dates);
+    this.svg.select("path").attr("d", this.area);
+    this.svg.select(".x.axis").call(this.x_axis);
+    return this.svg.select(".y.axis").call(this.y_axis);
+  };
+
+  return ContributorsAuthorGraph;
+})(ContributorsGraph);
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors_util.js b/app/assets/javascripts/graphs/stat_graph_contributors_util.js
index 7954c583598..c583757f3f2 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors_util.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors_util.js
@@ -1,138 +1,137 @@
 /* eslint-disable func-names, space-before-function-paren, object-shorthand, no-var, one-var, camelcase, one-var-declaration-per-line, comma-dangle, no-param-reassign, no-return-assign, quotes, prefer-arrow-callback, wrap-iife, consistent-return, no-unused-vars, max-len, no-cond-assign, no-else-return, max-len */
-(function() {
-  window.ContributorsStatGraphUtil = {
-    parse_log: function(log) {
-      var by_author, by_email, data, entry, i, len, total, normalized_email;
-      total = {};
-      by_author = {};
-      by_email = {};
-      for (i = 0, len = log.length; i < len; i += 1) {
-        entry = log[i];
-        if (total[entry.date] == null) {
-          this.add_date(entry.date, total);
-        }
-        normalized_email = entry.author_email.toLowerCase();
-        data = by_author[entry.author_name] || by_email[normalized_email];
-        if (data == null) {
-          data = this.add_author(entry, by_author, by_email);
-        }
-        if (!data[entry.date]) {
-          this.add_date(entry.date, data);
-        }
-        this.store_data(entry, total[entry.date], data[entry.date]);
-      }
-      total = _.toArray(total);
-      by_author = _.toArray(by_author);
-      return {
-        total: total,
-        by_author: by_author
-      };
-    },
-    add_date: function(date, collection) {
-      collection[date] = {};
-      return collection[date].date = date;
-    },
-    add_author: function(author, by_author, by_email) {
-      var data, normalized_email;
-      data = {};
-      data.author_name = author.author_name;
-      data.author_email = author.author_email;
-      normalized_email = author.author_email.toLowerCase();
-      by_author[author.author_name] = data;
-      by_email[normalized_email] = data;
-      return data;
-    },
-    store_data: function(entry, total, by_author) {
-      this.store_commits(total, by_author);
-      this.store_additions(entry, total, by_author);
-      return this.store_deletions(entry, total, by_author);
-    },
-    store_commits: function(total, by_author) {
-      this.add(total, "commits", 1);
-      return this.add(by_author, "commits", 1);
-    },
-    add: function(collection, field, value) {
-      if (collection[field] == null) {
-        collection[field] = 0;
-      }
-      return collection[field] += value;
-    },
-    store_additions: function(entry, total, by_author) {
-      if (entry.additions == null) {
-        entry.additions = 0;
+
+export default {
+  parse_log: function(log) {
+    var by_author, by_email, data, entry, i, len, total, normalized_email;
+    total = {};
+    by_author = {};
+    by_email = {};
+    for (i = 0, len = log.length; i < len; i += 1) {
+      entry = log[i];
+      if (total[entry.date] == null) {
+        this.add_date(entry.date, total);
       }
-      this.add(total, "additions", entry.additions);
-      return this.add(by_author, "additions", entry.additions);
-    },
-    store_deletions: function(entry, total, by_author) {
-      if (entry.deletions == null) {
-        entry.deletions = 0;
+      normalized_email = entry.author_email.toLowerCase();
+      data = by_author[entry.author_name] || by_email[normalized_email];
+      if (data == null) {
+        data = this.add_author(entry, by_author, by_email);
       }
-      this.add(total, "deletions", entry.deletions);
-      return this.add(by_author, "deletions", entry.deletions);
-    },
-    get_total_data: function(parsed_log, field) {
-      var log, total_data;
-      log = parsed_log.total;
-      total_data = this.pick_field(log, field);
-      return _.sortBy(total_data, function(d) {
-        return d.date;
-      });
-    },
-    pick_field: function(log, field) {
-      var total_data;
-      total_data = [];
-      _.each(log, function(d) {
-        return total_data.push(_.pick(d, [field, 'date']));
-      });
-      return total_data;
-    },
-    get_author_data: function(parsed_log, field, date_range) {
-      var author_data, log;
-      if (date_range == null) {
-        date_range = null;
-      }
-      log = parsed_log.by_author;
-      author_data = [];
-      _.each(log, (function(_this) {
-        return function(log_entry) {
-          var parsed_log_entry;
-          parsed_log_entry = _this.parse_log_entry(log_entry, field, date_range);
-          if (!_.isEmpty(parsed_log_entry.dates)) {
-            return author_data.push(parsed_log_entry);
-          }
-        };
-      })(this));
-      return _.sortBy(author_data, function(d) {
-        return d[field];
-      }).reverse();
-    },
-    parse_log_entry: function(log_entry, field, date_range) {
-      var parsed_entry;
-      parsed_entry = {};
-      parsed_entry.author_name = log_entry.author_name;
-      parsed_entry.author_email = log_entry.author_email;
-      parsed_entry.dates = {};
-      parsed_entry.commits = parsed_entry.additions = parsed_entry.deletions = 0;
-      _.each(_.omit(log_entry, 'author_name', 'author_email'), (function(_this) {
-        return function(value, key) {
-          if (_this.in_range(value.date, date_range)) {
-            parsed_entry.dates[value.date] = value[field];
-            parsed_entry.commits += value.commits;
-            parsed_entry.additions += value.additions;
-            return parsed_entry.deletions += value.deletions;
-          }
-        };
-      })(this));
-      return parsed_entry;
-    },
-    in_range: function(date, date_range) {
-      var ref;
-      if (date_range === null || (date_range[0] <= (ref = new Date(date)) && ref <= date_range[1])) {
-        return true;
-      } else {
-        return false;
+      if (!data[entry.date]) {
+        this.add_date(entry.date, data);
       }
+      this.store_data(entry, total[entry.date], data[entry.date]);
+    }
+    total = _.toArray(total);
+    by_author = _.toArray(by_author);
+    return {
+      total: total,
+      by_author: by_author
+    };
+  },
+  add_date: function(date, collection) {
+    collection[date] = {};
+    return collection[date].date = date;
+  },
+  add_author: function(author, by_author, by_email) {
+    var data, normalized_email;
+    data = {};
+    data.author_name = author.author_name;
+    data.author_email = author.author_email;
+    normalized_email = author.author_email.toLowerCase();
+    by_author[author.author_name] = data;
+    by_email[normalized_email] = data;
+    return data;
+  },
+  store_data: function(entry, total, by_author) {
+    this.store_commits(total, by_author);
+    this.store_additions(entry, total, by_author);
+    return this.store_deletions(entry, total, by_author);
+  },
+  store_commits: function(total, by_author) {
+    this.add(total, "commits", 1);
+    return this.add(by_author, "commits", 1);
+  },
+  add: function(collection, field, value) {
+    if (collection[field] == null) {
+      collection[field] = 0;
+    }
+    return collection[field] += value;
+  },
+  store_additions: function(entry, total, by_author) {
+    if (entry.additions == null) {
+      entry.additions = 0;
+    }
+    this.add(total, "additions", entry.additions);
+    return this.add(by_author, "additions", entry.additions);
+  },
+  store_deletions: function(entry, total, by_author) {
+    if (entry.deletions == null) {
+      entry.deletions = 0;
+    }
+    this.add(total, "deletions", entry.deletions);
+    return this.add(by_author, "deletions", entry.deletions);
+  },
+  get_total_data: function(parsed_log, field) {
+    var log, total_data;
+    log = parsed_log.total;
+    total_data = this.pick_field(log, field);
+    return _.sortBy(total_data, function(d) {
+      return d.date;
+    });
+  },
+  pick_field: function(log, field) {
+    var total_data;
+    total_data = [];
+    _.each(log, function(d) {
+      return total_data.push(_.pick(d, [field, 'date']));
+    });
+    return total_data;
+  },
+  get_author_data: function(parsed_log, field, date_range) {
+    var author_data, log;
+    if (date_range == null) {
+      date_range = null;
+    }
+    log = parsed_log.by_author;
+    author_data = [];
+    _.each(log, (function(_this) {
+      return function(log_entry) {
+        var parsed_log_entry;
+        parsed_log_entry = _this.parse_log_entry(log_entry, field, date_range);
+        if (!_.isEmpty(parsed_log_entry.dates)) {
+          return author_data.push(parsed_log_entry);
+        }
+      };
+    })(this));
+    return _.sortBy(author_data, function(d) {
+      return d[field];
+    }).reverse();
+  },
+  parse_log_entry: function(log_entry, field, date_range) {
+    var parsed_entry;
+    parsed_entry = {};
+    parsed_entry.author_name = log_entry.author_name;
+    parsed_entry.author_email = log_entry.author_email;
+    parsed_entry.dates = {};
+    parsed_entry.commits = parsed_entry.additions = parsed_entry.deletions = 0;
+    _.each(_.omit(log_entry, 'author_name', 'author_email'), (function(_this) {
+      return function(value, key) {
+        if (_this.in_range(value.date, date_range)) {
+          parsed_entry.dates[value.date] = value[field];
+          parsed_entry.commits += value.commits;
+          parsed_entry.additions += value.additions;
+          return parsed_entry.deletions += value.deletions;
+        }
+      };
+    })(this));
+    return parsed_entry;
+  },
+  in_range: function(date, date_range) {
+    var ref;
+    if (date_range === null || (date_range[0] <= (ref = new Date(date)) && ref <= date_range[1])) {
+      return true;
+    } else {
+      return false;
     }
-  };
-}).call(window);
+  }
+};
diff --git a/app/assets/javascripts/lib/utils/common_utils.js.es6 b/app/assets/javascripts/lib/utils/common_utils.js.es6
index 45a1d90a9d9..dbf40ec7fcf 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js.es6
+++ b/app/assets/javascripts/lib/utils/common_utils.js.es6
@@ -296,5 +296,57 @@
      * @returns {Boolean}
      */
     w.gl.utils.convertPermissionToBoolean = permission => permission === 'true';
+
+    /**
+     * Back Off exponential algorithm
+     * backOff :: (Function<next, stop>, Number) -> Promise<Any, Error>
+     *
+     * @param {Function<next, stop>} fn function to be called
+     * @param {Number} timeout
+     * @return {Promise<Any, Error>}
+     * @example
+     * ```
+     *  backOff(function (next, stop) {
+     *    // Let's perform this function repeatedly for 60s or for the timeout provided.
+     *
+     *    ourFunction()
+     *      .then(function (result) {
+     *        // continue if result is not what we need
+     *        next();
+     *
+     *        // when result is what we need let's stop with the repetions and jump out of the cycle
+     *        stop(result);
+     *      })
+     *      .catch(function (error) {
+     *        // if there is an error, we need to stop this with an error.
+     *        stop(error);
+     *      })
+     *  }, 60000)
+     *  .then(function (result) {})
+     *  .catch(function (error) {
+     *    // deal with errors passed to stop()
+     *  })
+     * ```
+     */
+    w.gl.utils.backOff = (fn, timeout = 60000) => {
+      let nextInterval = 2000;
+
+      const startTime = (+new Date());
+
+      return new Promise((resolve, reject) => {
+        const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
+
+        const next = () => {
+          if (new Date().getTime() - startTime < timeout) {
+            setTimeout(fn.bind(null, next, stop), nextInterval);
+            nextInterval *= 2;
+          } else {
+            reject(new Error('BACKOFF_TIMEOUT'));
+          }
+        };
+
+        fn(next, stop);
+      });
+    };
   })(window);
 }).call(window);
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index 7fbaeec7882..38c673e8907 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -78,7 +78,6 @@
       } else {
         $(element).find('.assignee-icon').empty();
       }
-      return $(element).effect('highlight');
     };
 
     function Milestone() {
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 8df1c8e7f94..51fa5c828b3 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -39,7 +39,7 @@
         $value = $block.find('.value');
         $loading = $block.find('.block-loading').fadeOut();
         if (issueUpdateURL) {
-          milestoneLinkTemplate = _.template('<a href="/<%- namespace %>/<%- path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
+          milestoneLinkTemplate = _.template('<a href="/<%- full_path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
           milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
           collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- remaining %>" data-placement="left"> <%- title %> </span>');
         }
@@ -181,8 +181,7 @@
                 $selectbox.hide();
                 $value.css('display', '');
                 if (data.milestone != null) {
-                  data.milestone.namespace = _this.currentProject.namespace;
-                  data.milestone.path = _this.currentProject.path;
+                  data.milestone.full_path = _this.currentProject.full_path;
                   data.milestone.remaining = gl.utils.timeFor(data.milestone.due_date);
                   $value.html(milestoneLinkTemplate(data.milestone));
                   return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index cb24f212c66..3f678b93f73 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, one-var, prefer-rest-params, max-len, vars-on-top, wrap-iife, consistent-return, comma-dangle, one-var-declaration-per-line, quotes, no-return-assign, prefer-arrow-callback, prefer-template, no-shadow, no-else-return, max-len */
+/* eslint-disable func-names, space-before-function-paren, no-var, one-var, prefer-rest-params, max-len, vars-on-top, wrap-iife, consistent-return, comma-dangle, one-var-declaration-per-line, quotes, no-return-assign, prefer-arrow-callback, prefer-template, no-shadow, no-else-return, max-len, object-shorthand */
 (function() {
   var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
     indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i += 1) { if (i in this && this[i] === item) return i; } return -1; };
@@ -20,15 +20,35 @@
     };
 
     NewBranchForm.prototype.init = function() {
-      if (this.name.val().length > 0) {
+      if (this.name.length && this.name.val().length > 0) {
         return this.name.trigger('blur');
       }
     };
 
     NewBranchForm.prototype.setupAvailableRefs = function(availableRefs) {
-      return this.ref.autocomplete({
-        source: availableRefs,
-        minLength: 1
+      var $branchSelect = $('.js-branch-select');
+
+      $branchSelect.glDropdown({
+        data: availableRefs,
+        filterable: true,
+        filterByText: true,
+        remote: false,
+        fieldName: $branchSelect.data('field-name'),
+        selectable: true,
+        isSelectable: function(branch, $el) {
+          return !$el.hasClass('is-active');
+        },
+        text: function(branch) {
+          return branch;
+        },
+        id: function(branch) {
+          return branch;
+        },
+        toggleLabel: function(branch) {
+          if (branch) {
+            return branch;
+          }
+        }
       });
     };
 
diff --git a/app/assets/javascripts/profile/profile_bundle.js b/app/assets/javascripts/profile/profile_bundle.js
index d7f3c9fd37e..15d32825583 100644
--- a/app/assets/javascripts/profile/profile_bundle.js
+++ b/app/assets/javascripts/profile/profile_bundle.js
@@ -1,3 +1,2 @@
-// require everything else in this directory
-function requireAll(context) { return context.keys().map(context); }
-requireAll(require.context('.', false, /^\.\/(?!profile_bundle).*\.(js|es6)$/));
+require('./gl_crop');
+require('./profile');
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6
index 149e511451e..6ef59e94384 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6
@@ -36,6 +36,9 @@
       // Do not update if one dropdown has not selected any option
       if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return;
 
+      this.$allowedToMergeDropdown.disable();
+      this.$allowedToPushDropdown.disable();
+
       $.ajax({
         type: 'POST',
         url: this.$wrap.data('url'),
@@ -53,13 +56,13 @@
             }]
           }
         },
-        success: () => {
-          this.$wrap.effect('highlight');
-        },
         error() {
           $.scrollTo(0);
           new Flash('Failed to update branch!');
         }
+      }).always(() => {
+        this.$allowedToMergeDropdown.enable();
+        this.$allowedToPushDropdown.enable();
       });
     }
   };
diff --git a/app/assets/javascripts/protected_branches/protected_branches_bundle.js b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
index ffb66caf5f4..849c1e31623 100644
--- a/app/assets/javascripts/protected_branches/protected_branches_bundle.js
+++ b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
@@ -1,3 +1,5 @@
-// require everything else in this directory
-function requireAll(context) { return context.keys().map(context); }
-requireAll(require.context('.', false, /^\.\/(?!protected_branches_bundle).*\.(js|es6)$/));
+require('./protected_branch_access_dropdown');
+require('./protected_branch_create');
+require('./protected_branch_dropdown');
+require('./protected_branch_edit');
+require('./protected_branch_edit_list');
diff --git a/app/assets/javascripts/snippet/snippet_bundle.js b/app/assets/javascripts/snippet/snippet_bundle.js
index 89822246bb8..a98403f4cf2 100644
--- a/app/assets/javascripts/snippet/snippet_bundle.js
+++ b/app/assets/javascripts/snippet/snippet_bundle.js
@@ -1,10 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, max-len */
 /* global ace */
 
-// require everything else in this directory
-function requireAll(context) { return context.keys().map(context); }
-requireAll(require.context('.', false, /^\.\/(?!snippet_bundle).*\.(js|es6)$/));
-
 (function() {
   $(function() {
     var editor = ace.edit("editor");
diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
new file mode 100644
index 00000000000..74b869502a4
--- /dev/null
+++ b/app/assets/javascripts/user_callout.js
@@ -0,0 +1,58 @@
+/* global Cookies */
+
+const userCalloutElementName = '.user-callout';
+const closeButton = '.close-user-callout';
+const userCalloutBtn = '.user-callout-btn';
+const userCalloutSvgAttrName = 'callout-svg';
+
+const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
+
+const USER_CALLOUT_TEMPLATE = `
+  <div class="bordered-box landing content-block">
+    <button class="btn btn-default close close-user-callout" type="button">
+      <i class="fa fa-times dismiss-icon"></i>
+    </button>
+    <div class="row">
+      <div class="col-sm-3 col-xs-12 svg-container">
+      </div>
+      <div class="col-sm-8 col-xs-12 inner-content">
+        <h4>
+          Customize your experience
+        </h4>
+        <p>
+          Change syntax themes, default project pages, and more in preferences.
+        </p>
+        <a class="btn user-callout-btn" href="/profile/preferences">Check it out</a>
+      </div>
+  </div>
+</div>`;
+
+class UserCallout {
+  constructor() {
+    this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
+    this.userCalloutBody = $(userCalloutElementName);
+    this.userCalloutSvg = $(userCalloutElementName).attr(userCalloutSvgAttrName);
+    $(userCalloutElementName).removeAttr(userCalloutSvgAttrName);
+    this.init();
+  }
+
+  init() {
+    const $template = $(USER_CALLOUT_TEMPLATE);
+    if (!this.isCalloutDismissed || this.isCalloutDismissed === 'false') {
+      $template.find('.svg-container').append(this.userCalloutSvg);
+      this.userCalloutBody.append($template);
+      $template.find(closeButton).on('click', e => this.dismissCallout(e));
+      $template.find(userCalloutBtn).on('click', e => this.dismissCallout(e));
+    }
+  }
+
+  dismissCallout(e) {
+    Cookies.set(USER_CALLOUT_COOKIE, 'true');
+    const $currentTarget = $(e.currentTarget);
+    if ($currentTarget.hasClass('close-user-callout')) {
+      this.userCalloutBody.empty();
+    }
+  }
+}
+
+module.exports = UserCallout;
diff --git a/app/assets/javascripts/users/users_bundle.js b/app/assets/javascripts/users/users_bundle.js
index 4cad60a59b1..580e2d84be5 100644
--- a/app/assets/javascripts/users/users_bundle.js
+++ b/app/assets/javascripts/users/users_bundle.js
@@ -1,3 +1 @@
-// require everything else in this directory
-function requireAll(context) { return context.keys().map(context); }
-requireAll(require.context('.', false, /^\.\/(?!users_bundle).*\.(js|es6)$/));
+require('./calendar');
diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
index 04029c47668..e20085d1fd2 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
@@ -1,5 +1,5 @@
 /* global Vue, Flash, gl */
-/* eslint-disable no-param-reassign */
+/* eslint-disable no-param-reassign, no-alert */
 
 ((gl) => {
   gl.VuePipelineActions = Vue.extend({
@@ -16,6 +16,20 @@
       download(name) {
         return `Download ${name} artifacts`;
       },
+
+      /**
+       * Shows a dialog when the user clicks in the cancel button.
+       * We need to prevent the default behavior and stop propagation because the
+       * link relies on UJS.
+       *
+       * @param  {Event} event
+       */
+      confirmAction(event) {
+        if (!confirm('Are you sure you want to cancel this pipeline?')) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
     },
     template: `
       <td class="pipeline-actions hidden-xs">
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
index 0265c00a414..9d66d28cc62 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
@@ -23,7 +23,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
         apiScope: 'all',
         pageInfo: {},
         pagenum: 1,
-        count: { all: 0, running_or_pending: 0 },
+        count: {},
         pageRequest: false,
       };
     },
diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index 8cc417a9966..67fdd729e41 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -23,6 +23,13 @@
         required: true,
       },
     },
+
+    updated() {
+      if (this.builds) {
+        this.stopDropdownClickPropagation();
+      }
+    },
+
     methods: {
       fetchBuilds(e) {
         const areaExpanded = e.currentTarget.attributes['aria-expanded'];
@@ -37,17 +44,19 @@
             return flash;
           });
       },
-      keepGraph(e) {
-        const { target } = e;
-
-        if (target.className.indexOf('js-ci-action-icon') >= 0) return null;
-
-        if (
-          target.parentElement &&
-          (target.parentElement.className.indexOf('js-ci-action-icon') >= 0)
-        ) return null;
 
-        return e.stopPropagation();
+      /**
+       * When the user right clicks or cmd/ctrl + click in the job name
+       * the dropdown should not be closed and the link should open in another tab,
+       * so we stop propagation of the click event inside the dropdown.
+       *
+       * Since this component is rendered multiple times per page we need to guarantee we only
+       * target the click event of this component.
+       */
+      stopDropdownClickPropagation() {
+        $(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item')).on('click', (e) => {
+          e.stopPropagation();
+        });
       },
     },
     computed: {
@@ -76,13 +85,13 @@
     template: `
       <div>
         <button
-          @click='fetchBuilds($event)'
+          @click="fetchBuilds($event)"
           :class="triggerButtonClass"
-          :title='stage.title'
+          :title="stage.title"
           data-placement="top"
           data-toggle="dropdown"
           type="button"
-          :aria-label='stage.title'
+          :aria-label="stage.title"
         >
           <span v-html="svg" aria-hidden="true"></span>
           <i class="fa fa-caret-down" aria-hidden="true"></i>
@@ -90,7 +99,6 @@
         <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
           <div class="arrow-up" aria-hidden="true"></div>
           <div
-            @click='keepGraph($event)'
             :class="dropdownClass"
             class="js-builds-dropdown-list scrollable-menu"
             v-html="buildsOrSpinner"
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 1dcd1f8a6fc..83a8eeaafde 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -2,7 +2,6 @@
  * This is a manifest file that'll automatically include all the stylesheets available in this directory
  * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
  * the top of the compiled file, but it's generally better to create a new file per style scope.
- *= require jquery-ui/autocomplete
  *= require jquery.atwho
  *= require select2
  *= require_self
diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss
index d335fedefe2..300ba4f2de6 100644
--- a/app/assets/stylesheets/framework/jquery.scss
+++ b/app/assets/stylesheets/framework/jquery.scss
@@ -2,17 +2,6 @@
   font-family: $regular_font;
   font-size: $font-size-base;
 
-  &.ui-autocomplete {
-    border-color: $jq-ui-border;
-    padding: 0;
-    margin-top: 2px;
-    z-index: 1001;
-
-    .ui-menu-item a {
-      padding: 4px 10px;
-    }
-  }
-
   .ui-state-default {
     border: 1px solid $white-light;
     background: $white-light;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 040a7ce0c16..8978e284f55 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -29,16 +29,14 @@
   }
 }
 
-@media (min-width: $screen-sm-min) {
-  .content-wrapper {
-    padding-right: $gutter_collapsed_width;
-  }
-}
-
 .right-sidebar-collapsed {
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) {
+    .content-wrapper {
+      padding-right: $gutter_collapsed_width;
+    }
+
     .merge-request-tabs-holder.affix {
       right: $gutter_collapsed_width;
     }
@@ -56,6 +54,12 @@
 .right-sidebar-expanded {
   padding-right: 0;
 
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    .content-wrapper {
+      padding-right: $gutter_collapsed_width;
+    }
+  }
+
   @media (min-width: $screen-md-min) {
     .content-wrapper {
       padding-right: $gutter_width;
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 8031c4467a4..aad1a8986b0 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -277,3 +277,41 @@ table.u2f-registrations {
     padding-left: 18px;
   }
 }
+
+.user-callout {
+  margin: 24px auto 0;
+
+  .bordered-box {
+    border: 1px solid $border-color;
+    border-radius: $border-radius-default;
+  }
+
+  .landing {
+    margin-bottom: $gl-padding;
+
+    .close {
+      margin-right: 20px;
+    }
+
+    .dismiss-icon {
+      float: right;
+      cursor: pointer;
+      color: $cycle-analytics-dismiss-icon-color;
+    }
+
+    .svg-container {
+      text-align: center;
+
+      svg {
+        width: 136px;
+        height: 136px;
+      }
+    }
+  }
+
+  @media(max-width: $screen-xs-max) {
+    .inner-content {
+      padding-left: 30px;
+    }
+  }
+}