Merge branch 'master' of https://gitlab.com/gitlab-org/gitlab-ce into an/gitaly-timeoutsan/gitaly-timeouts

# Conflicts:
#	app/models/application_setting.rb
#	db/schema.rb

169 files changed, 3473 insertions, 2540 deletions

diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index 242b3e2b990..d963101028a 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -16,6 +16,7 @@ const Api = {
   usersPath: '/api/:version/users.json',
   commitPath: '/api/:version/projects/:id/repository/commits',
   branchSinglePath: '/api/:version/projects/:id/repository/branches/:branch',
+  createBranchPath: '/api/:version/projects/:id/repository/branches',
 
   group(groupId, callback) {
     const url = Api.buildUrl(Api.groupPath)
diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js
index 4d2d4db7c0e..0f28bd233ac 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -1,8 +1,9 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-param-reassign, quotes, prefer-template, no-var, one-var, no-unused-vars, one-var-declaration-per-line, no-void, consistent-return, no-empty, max-len */
+/* eslint-disable no-param-reassign, prefer-template, no-var, no-void, consistent-return */
+
 import AccessorUtilities from './lib/utils/accessor';
 
-window.Autosave = (function() {
-  function Autosave(field, key, resource) {
+export default class Autosave {
+  constructor(field, key, resource) {
     this.field = field;
     this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
     this.resource = resource;
@@ -12,14 +13,10 @@ window.Autosave = (function() {
     this.key = 'autosave/' + key;
     this.field.data('autosave', this);
     this.restore();
-    this.field.on('input', (function(_this) {
-      return function() {
-        return _this.save();
-      };
-    })(this));
+    this.field.on('input', () => this.save());
   }
 
-  Autosave.prototype.restore = function() {
+  restore() {
     var text;
 
     if (!this.isLocalStorageAvailable) return;
@@ -40,9 +37,9 @@ window.Autosave = (function() {
         field.dispatchEvent(event);
       }
     }
-  };
+  }
 
-  Autosave.prototype.save = function() {
+  save() {
     var text;
     text = this.field.val();
 
@@ -51,15 +48,11 @@ window.Autosave = (function() {
     }
 
     return this.reset();
-  };
+  }
 
-  Autosave.prototype.reset = function() {
+  reset() {
     if (!this.isLocalStorageAvailable) return;
 
     return window.localStorage.removeItem(this.key);
-  };
-
-  return Autosave;
-})();
-
-export default window.Autosave;
+  }
+}
diff --git a/app/assets/javascripts/behaviors/autosize.js b/app/assets/javascripts/behaviors/autosize.js
index e00af4b2fa8..add43b81f6d 100644
--- a/app/assets/javascripts/behaviors/autosize.js
+++ b/app/assets/javascripts/behaviors/autosize.js
@@ -1,8 +1,8 @@
-import autosize from 'vendor/autosize';
+import Autosize from 'autosize';
 
 document.addEventListener('DOMContentLoaded', () => {
   const autosizeEls = document.querySelectorAll('.js-autosize');
 
-  autosize(autosizeEls);
-  autosize.update(autosizeEls);
+  Autosize(autosizeEls);
+  Autosize.update(autosizeEls);
 });
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index c1f902a785a..9ae5e270a4b 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -1,7 +1,5 @@
 /* eslint-disable comma-dangle, space-before-function-paren, no-new */
-/* global IssuableContext */
 /* global MilestoneSelect */
-/* global LabelsSelect */
 /* global Sidebar */
 
 import Vue from 'vue';
@@ -11,6 +9,8 @@ import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
 import Assignees from '../../sidebar/components/assignees/assignees';
 import DueDateSelectors from '../../due_date_select';
 import './sidebar/remove_issue';
+import IssuableContext from '../../issuable_context';
+import LabelsSelect from '../../labels_select';
 
 const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js
index 180aa30e98c..661870c226c 100644
--- a/app/assets/javascripts/clusters.js
+++ b/app/assets/javascripts/clusters.js
@@ -64,19 +64,16 @@ export default class Clusters {
     this.poll = new Poll({
       resource: this.service,
       method: 'fetchData',
-      successCallback: (data) => {
-        const { status, status_reason } = data.data;
-        this.updateContainer(status, status_reason);
-      },
-      errorCallback: () => {
-        Flash(s__('ClusterIntegration|Something went wrong on our end.'));
-      },
+      successCallback: data => this.handleSuccess(data),
+      errorCallback: () => Clusters.handleError(),
     });
 
     if (!Visibility.hidden()) {
       this.poll.makeRequest();
     } else {
-      this.service.fetchData();
+      this.service.fetchData()
+        .then(data => this.handleSuccess(data))
+        .catch(() => Clusters.handleError());
     }
 
     Visibility.change(() => {
@@ -88,6 +85,15 @@ export default class Clusters {
     });
   }
 
+  static handleError() {
+    Flash(s__('ClusterIntegration|Something went wrong on our end.'));
+  }
+
+  handleSuccess(data) {
+    const { status, status_reason } = data.data;
+    this.updateContainer(status, status_reason);
+  }
+
   hideAll() {
     this.errorContainer.classList.add('hidden');
     this.successContainer.classList.add('hidden');
diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/contextual_sidebar.js
index 997550b37fb..46b68ebe158 100644
--- a/app/assets/javascripts/new_sidebar.js
+++ b/app/assets/javascripts/contextual_sidebar.js
@@ -2,7 +2,7 @@ import Cookies from 'js-cookie';
 import _ from 'underscore';
 import bp from './breakpoints';
 
-export default class NewNavSidebar {
+export default class ContextualSidebar {
   constructor() {
     this.initDomElements();
     this.render();
@@ -55,7 +55,7 @@ export default class NewNavSidebar {
       this.$sidebar.toggleClass('sidebar-icons-only', collapsed);
       this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
     }
-    NewNavSidebar.setCollapsedCookie(collapsed);
+    ContextualSidebar.setCollapsedCookie(collapsed);
 
     this.toggleSidebarOverflow();
   }
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 748b1993c56..5930868412b 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -1,9 +1,9 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */
 /* global ProjectSelect */
-/* global IssuableIndex */
+import IssuableIndex from './issuable_index';
 /* global Milestone */
-/* global IssuableForm */
-/* global LabelsSelect */
+import IssuableForm from './issuable_form';
+import LabelsSelect from './labels_select';
 /* global MilestoneSelect */
 /* global NewBranchForm */
 /* global NotificationsForm */
@@ -13,7 +13,7 @@ import GroupLabelSubscription from './group_label_subscription';
 /* global LineHighlighter */
 import BuildArtifacts from './build_artifacts';
 import CILintEditor from './ci_lint_editor';
-/* global GroupsSelect */
+import groupsSelect from './groups_select';
 /* global Search */
 /* global Admin */
 /* global NamespaceSelects */
@@ -173,7 +173,7 @@ import Diff from './diff';
             filteredSearchManager.setup();
           }
           const pagePrefix = page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_';
-          IssuableIndex.init(pagePrefix);
+          new IssuableIndex(pagePrefix);
 
           shortcut_handler = new ShortcutsNavigation();
           new UsersSelect();
@@ -231,16 +231,21 @@ import Diff from './diff';
         case 'projects:milestones:new':
         case 'projects:milestones:edit':
         case 'projects:milestones:update':
+          new ZenMode();
+          new DueDateSelectors();
+          new GLForm($('.milestone-form'), true);
+          break;
         case 'groups:milestones:new':
         case 'groups:milestones:edit':
         case 'groups:milestones:update':
           new ZenMode();
           new DueDateSelectors();
-          new GLForm($('.milestone-form'), true);
+          new GLForm($('.milestone-form'), false);
           break;
         case 'projects:compare:show':
           new Diff();
-          initChangesDropdown();
+          const paddingTop = 16;
+          initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - paddingTop);
           break;
         case 'projects:branches:new':
         case 'projects:branches:create':
@@ -413,7 +418,7 @@ import Diff from './diff';
           break;
         case 'projects:project_members:index':
           memberExpirationDate('.js-access-expiration-date-groups');
-          new GroupsSelect();
+          groupsSelect();
           memberExpirationDate();
           new Members();
           new UsersSelect();
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index e8d8fef8579..c4202f92443 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -1,6 +1,7 @@
 /* eslint-disable func-names, no-underscore-dangle, space-before-function-paren, no-var, one-var, one-var-declaration-per-line, prefer-rest-params, max-len, vars-on-top, wrap-iife, no-unused-vars, quotes, no-shadow, no-cond-assign, prefer-arrow-callback, no-return-assign, no-else-return, camelcase, comma-dangle, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, prefer-template, no-param-reassign, no-loop-func, no-mixed-operators */
 /* global fuzzaldrinPlus */
 import _ from 'underscore';
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import { isObject } from './lib/utils/type_utility';
 
 var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote, GitLabDropdownInput;
diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js
index 90ca70289ab..a69a0bde17b 100644
--- a/app/assets/javascripts/groups_select.js
+++ b/app/assets/javascripts/groups_select.js
@@ -1,121 +1,86 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, one-var,
-                  camelcase, one-var-declaration-per-line, quotes, object-shorthand,
-                  prefer-arrow-callback, comma-dangle, consistent-return, yoda,
-                  prefer-rest-params, prefer-spread, no-unused-vars, prefer-template,
-                  promise/catch-or-return */
 import Api from './api';
 import { normalizeCRLFHeaders } from './lib/utils/common_utils';
 
-var slice = [].slice;
+export default function groupsSelect() {
+  // Needs to be accessible in rspec
+  window.GROUP_SELECT_PER_PAGE = 20;
+  $('.ajax-groups-select').each(function setAjaxGroupsSelect2() {
+    const $select = $(this);
+    const allAvailable = $select.data('all-available');
+    const skipGroups = $select.data('skip-groups') || [];
+    $select.select2({
+      placeholder: 'Search for a group',
+      multiple: $select.hasClass('multiselect'),
+      minimumInputLength: 0,
+      ajax: {
+        url: Api.buildUrl(Api.groupsPath),
+        dataType: 'json',
+        quietMillis: 250,
+        transport(params) {
+          return $.ajax(params)
+            .then((data, status, xhr) => {
+              const results = data || [];
 
-window.GroupsSelect = (function() {
-  function GroupsSelect() {
-    $('.ajax-groups-select').each((function(_this) {
-      const self = _this;
-
-      return function(i, select) {
-        var all_available, skip_groups;
-        const $select = $(select);
-        all_available = $select.data('all-available');
-        skip_groups = $select.data('skip-groups') || [];
-
-        $select.select2({
-          placeholder: "Search for a group",
-          multiple: $select.hasClass('multiselect'),
-          minimumInputLength: 0,
-          ajax: {
-            url: Api.buildUrl(Api.groupsPath),
-            dataType: 'json',
-            quietMillis: 250,
-            transport: function (params) {
-              $.ajax(params).then((data, status, xhr) => {
-                const results = data || [];
-
-                const headers = normalizeCRLFHeaders(xhr.getAllResponseHeaders());
-                const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
-                const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
-                const more = currentPage < totalPages;
-
-                return {
-                  results,
-                  pagination: {
-                    more,
-                  },
-                };
-              }).then(params.success).fail(params.error);
-            },
-            data: function (search, page) {
-              return {
-                search,
-                page,
-                per_page: GroupsSelect.PER_PAGE,
-                all_available,
-              };
-            },
-            results: function (data, page) {
-              if (data.length) return { results: [] };
-
-              const groups = data.length ? data : data.results || [];
-              const more = data.pagination ? data.pagination.more : false;
-              const results = groups.filter(group => skip_groups.indexOf(group.id) === -1);
+              const headers = normalizeCRLFHeaders(xhr.getAllResponseHeaders());
+              const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
+              const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
+              const more = currentPage < totalPages;
 
               return {
                 results,
-                page,
-                more,
+                pagination: {
+                  more,
+                },
               };
-            },
-          },
-          initSelection: function(element, callback) {
-            var id;
-            id = $(element).val();
-            if (id !== "") {
-              return Api.group(id, callback);
-            }
-          },
-          formatResult: function() {
-            var args;
-            args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-            return self.formatResult.apply(self, args);
-          },
-          formatSelection: function() {
-            var args;
-            args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-            return self.formatSelection.apply(self, args);
-          },
-          dropdownCssClass: "ajax-groups-dropdown select2-infinite",
-          // we do not want to escape markup since we are displaying html in results
-          escapeMarkup: function(m) {
-            return m;
-          }
-        });
-
-        self.dropdown = document.querySelector('.select2-infinite .select2-results');
-
-        $select.on('select2-loaded', self.forceOverflow.bind(self));
-      };
-    })(this));
-  }
-
-  GroupsSelect.prototype.formatResult = function(group) {
-    var avatar;
-    if (group.avatar_url) {
-      avatar = group.avatar_url;
-    } else {
-      avatar = gon.default_avatar_url;
-    }
-    return "<div class='group-result'> <div class='group-name'>" + group.full_name + "</div> <div class='group-path'>" + group.full_path + "</div> </div>";
-  };
-
-  GroupsSelect.prototype.formatSelection = function(group) {
-    return group.full_name;
-  };
+            })
+            .then(params.success)
+            .fail(params.error);
+        },
+        data(search, page) {
+          return {
+            search,
+            page,
+            per_page: window.GROUP_SELECT_PER_PAGE,
+            all_available: allAvailable,
+          };
+        },
+        results(data, page) {
+          if (data.length) return { results: [] };
 
-  GroupsSelect.prototype.forceOverflow = function (e) {
-    this.dropdown.style.height = `${Math.floor(this.dropdown.scrollHeight)}px`;
-  };
+          const groups = data.length ? data : data.results || [];
+          const more = data.pagination ? data.pagination.more : false;
+          const results = groups.filter(group => skipGroups.indexOf(group.id) === -1);
 
-  GroupsSelect.PER_PAGE = 20;
+          return {
+            results,
+            page,
+            more,
+          };
+        },
+      },
+      // eslint-disable-next-line consistent-return
+      initSelection(element, callback) {
+        const id = $(element).val();
+        if (id !== '') {
+          return Api.group(id, callback);
+        }
+      },
+      formatResult(object) {
+        return `<div class='group-result'> <div class='group-name'>${object.full_name}</div> <div class='group-path'>${object.full_path}</div> </div>`;
+      },
+      formatSelection(object) {
+        return object.full_name;
+      },
+      dropdownCssClass: 'ajax-groups-dropdown select2-infinite',
+      // we do not want to escape markup since we are displaying html in results
+      escapeMarkup(m) {
+        return m;
+      },
+    });
 
-  return GroupsSelect;
-})();
+    $select.on('select2-loaded', () => {
+      const dropdown = document.querySelector('.select2-infinite .select2-results');
+      dropdown.style.height = `${Math.floor(dropdown.scrollHeight)}px`;
+    });
+  });
+}
diff --git a/app/assets/javascripts/header.js b/app/assets/javascripts/header.js
index ea2e2205077..33a352e158a 100644
--- a/app/assets/javascripts/header.js
+++ b/app/assets/javascripts/header.js
@@ -7,10 +7,12 @@ import { highCountTrim } from '~/lib/utils/text_utility';
  * @param {jQuery.Event} e
  * @param {String} count
  */
-$(document).on('todo:toggle', (e, count) => {
-  const parsedCount = parseInt(count, 10);
-  const $todoPendingCount = $('.todos-count');
+export default function initTodoToggle() {
+  $(document).on('todo:toggle', (e, count) => {
+    const parsedCount = parseInt(count, 10);
+    const $todoPendingCount = $('.todos-count');
 
-  $todoPendingCount.text(highCountTrim(parsedCount));
-  $todoPendingCount.toggleClass('hidden', parsedCount === 0);
-});
+    $todoPendingCount.text(highCountTrim(parsedCount));
+    $todoPendingCount.toggleClass('hidden', parsedCount === 0);
+  });
+}
diff --git a/app/assets/javascripts/importer_status.js b/app/assets/javascripts/importer_status.js
index 5b4ca94ed30..1dc70872d92 100644
--- a/app/assets/javascripts/importer_status.js
+++ b/app/assets/javascripts/importer_status.js
@@ -1,83 +1,81 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, camelcase, no-var, one-var, one-var-declaration-per-line, prefer-template, quotes, object-shorthand, comma-dangle, no-unused-vars, prefer-arrow-callback, no-else-return, vars-on-top, no-new, max-len */
+class ImporterStatus {
+  constructor(jobsUrl, importUrl) {
+    this.jobsUrl = jobsUrl;
+    this.importUrl = importUrl;
+    this.initStatusPage();
+    this.setAutoUpdate();
+  }
 
-(function() {
-  window.ImporterStatus = (function() {
-    function ImporterStatus(jobs_url, import_url) {
-      this.jobs_url = jobs_url;
-      this.import_url = import_url;
-      this.initStatusPage();
-      this.setAutoUpdate();
-    }
+  initStatusPage() {
+    $('.js-add-to-import')
+      .off('click')
+      .on('click', (event) => {
+        const $btn = $(event.currentTarget);
+        const $tr = $btn.closest('tr');
+        const $targetField = $tr.find('.import-target');
+        const $namespaceInput = $targetField.find('.js-select-namespace option:selected');
+        const id = $tr.attr('id').replace('repo_', '');
+        let targetNamespace;
+        let newName;
+        if ($namespaceInput.length > 0) {
+          targetNamespace = $namespaceInput[0].innerHTML;
+          newName = $targetField.find('#path').prop('value');
+          $targetField.empty().append(`${targetNamespace}/${newName}`);
+        }
+        $btn.disable().addClass('is-loading');
 
-    ImporterStatus.prototype.initStatusPage = function() {
-      $('.js-add-to-import').off('click').on('click', (function(_this) {
-        return function(e) {
-          var $btn, $namespace_input, $target_field, $tr, id, target_namespace, newName;
-          $btn = $(e.currentTarget);
-          $tr = $btn.closest('tr');
-          $target_field = $tr.find('.import-target');
-          $namespace_input = $target_field.find('.js-select-namespace option:selected');
-          id = $tr.attr('id').replace('repo_', '');
-          target_namespace = null;
-          newName = null;
-          if ($namespace_input.length > 0) {
-            target_namespace = $namespace_input[0].innerHTML;
-            newName = $target_field.find('#path').prop('value');
-            $target_field.empty().append(target_namespace + "/" + newName);
-          }
-          $btn.disable().addClass('is-loading');
-          return $.post(_this.import_url, {
-            repo_id: id,
-            target_namespace: target_namespace,
-            new_name: newName
-          }, {
-            dataType: 'script'
-          });
-        };
-      })(this));
-      return $('.js-import-all').off('click').on('click', function(e) {
-        var $btn;
-        $btn = $(this);
+        return $.post(this.importUrl, {
+          repo_id: id,
+          target_namespace: targetNamespace,
+          new_name: newName,
+        }, {
+          dataType: 'script',
+        });
+      });
+
+    $('.js-import-all')
+      .off('click')
+      .on('click', function onClickImportAll() {
+        const $btn = $(this);
         $btn.disable().addClass('is-loading');
-        return $('.js-add-to-import').each(function() {
+        return $('.js-add-to-import').each(function triggerAddImport() {
           return $(this).trigger('click');
         });
       });
-    };
+  }
+
+  setAutoUpdate() {
+    return setInterval(() => $.get(this.jobsUrl, data => $.each(data, (i, job) => {
+      const jobItem = $(`#project_${job.id}`);
+      const statusField = jobItem.find('.job-status');
 
-    ImporterStatus.prototype.setAutoUpdate = function() {
-      return setInterval(((function(_this) {
-        return function() {
-          return $.get(_this.jobs_url, function(data) {
-            return $.each(data, function(i, job) {
-              var job_item, status_field;
-              job_item = $("#project_" + job.id);
-              status_field = job_item.find(".job-status");
-              if (job.import_status === 'finished') {
-                job_item.removeClass("active").addClass("success");
-                return status_field.html('<span><i class="fa fa-check"></i> done</span>');
-              } else if (job.import_status === 'scheduled') {
-                return status_field.html("<i class='fa fa-spinner fa-spin'></i> scheduled");
-              } else if (job.import_status === 'started') {
-                return status_field.html("<i class='fa fa-spinner fa-spin'></i> started");
-              } else {
-                return status_field.html(job.import_status);
-              }
-            });
-          });
-        };
-      })(this)), 4000);
-    };
+      const spinner = '<i class="fa fa-spinner fa-spin"></i>';
 
-    return ImporterStatus;
-  })();
+      switch (job.import_status) {
+        case 'finished':
+          jobItem.removeClass('active').addClass('success');
+          statusField.html('<span><i class="fa fa-check"></i> done</span>');
+          break;
+        case 'scheduled':
+          statusField.html(`${spinner} scheduled`);
+          break;
+        case 'started':
+          statusField.html(`${spinner} started`);
+          break;
+        default:
+          statusField.html(job.import_status);
+          break;
+      }
+    })), 4000);
+  }
+}
 
-  $(function() {
-    if ($('.js-importer-status').length) {
-      var jobsImportPath = $('.js-importer-status').data('jobs-import-path');
-      var importPath = $('.js-importer-status').data('import-path');
+// eslint-disable-next-line consistent-return
+export default function initImporterStatus() {
+  const importerStatus = document.querySelector('.js-importer-status');
 
-      new window.ImporterStatus(jobsImportPath, importPath);
-    }
-  });
-}).call(window);
+  if (importerStatus) {
+    const data = importerStatus.dataset;
+    return new ImporterStatus(data.jobsImportPath, data.importPath);
+  }
+}
diff --git a/app/assets/javascripts/init_changes_dropdown.js b/app/assets/javascripts/init_changes_dropdown.js
index f785ed29e6c..1bab7965c19 100644
--- a/app/assets/javascripts/init_changes_dropdown.js
+++ b/app/assets/javascripts/init_changes_dropdown.js
@@ -1,7 +1,7 @@
 import stickyMonitor from './lib/utils/sticky';
 
-export default () => {
-  stickyMonitor(document.querySelector('.js-diff-files-changed'));
+export default (stickyTop) => {
+  stickyMonitor(document.querySelector('.js-diff-files-changed'), stickyTop);
 
   $('.js-diff-stats-dropdown').glDropdown({
     filterable: true,
diff --git a/app/assets/javascripts/init_issuable_sidebar.js b/app/assets/javascripts/init_issuable_sidebar.js
index 32a1a269f9a..1191e0b895e 100644
--- a/app/assets/javascripts/init_issuable_sidebar.js
+++ b/app/assets/javascripts/init_issuable_sidebar.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-new */
 /* global MilestoneSelect */
-/* global LabelsSelect */
-/* global IssuableContext */
+import LabelsSelect from './labels_select';
+import IssuableContext from './issuable_context';
 /* global Sidebar */
 
 import DueDateSelectors from './due_date_select';
diff --git a/app/assets/javascripts/init_legacy_filters.js b/app/assets/javascripts/init_legacy_filters.js
index 1211c2c802c..1b265721581 100644
--- a/app/assets/javascripts/init_legacy_filters.js
+++ b/app/assets/javascripts/init_legacy_filters.js
@@ -1,15 +1,15 @@
 /* eslint-disable no-new */
-/* global LabelsSelect */
+import LabelsSelect from './labels_select';
 /* global MilestoneSelect */
-/* global IssueStatusSelect */
 /* global SubscriptionSelect */
 
 import UsersSelect from './users_select';
+import issueStatusSelect from './issue_status_select';
 
 export default () => {
   new UsersSelect();
   new LabelsSelect();
   new MilestoneSelect();
-  new IssueStatusSelect();
+  issueStatusSelect();
   new SubscriptionSelect();
 };
diff --git a/app/assets/javascripts/issuable_bulk_update_actions.js b/app/assets/javascripts/issuable_bulk_update_actions.js
index eb15949603f..b124fafec70 100644
--- a/app/assets/javascripts/issuable_bulk_update_actions.js
+++ b/app/assets/javascripts/issuable_bulk_update_actions.js
@@ -1,5 +1,4 @@
 /* eslint-disable comma-dangle, quotes, consistent-return, func-names, array-callback-return, space-before-function-paren, prefer-arrow-callback, max-len, no-unused-expressions, no-sequences, no-underscore-dangle, no-unused-vars, no-param-reassign */
-/* global IssuableIndex */
 import _ from 'underscore';
 import Flash from './flash';
 
diff --git a/app/assets/javascripts/issuable_bulk_update_sidebar.js b/app/assets/javascripts/issuable_bulk_update_sidebar.js
index 0e8a0519928..af6358953cf 100644
--- a/app/assets/javascripts/issuable_bulk_update_sidebar.js
+++ b/app/assets/javascripts/issuable_bulk_update_sidebar.js
@@ -1,10 +1,12 @@
 /* eslint-disable class-methods-use-this, no-new */
-/* global LabelsSelect */
 /* global MilestoneSelect */
-/* global IssueStatusSelect */
 /* global SubscriptionSelect */
 
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
+import './milestone_select';
+import issueStatusSelect from './issue_status_select';
+import './subscription_select';
+import LabelsSelect from './labels_select';
 
 const HIDDEN_CLASS = 'hidden';
 const DISABLED_CONTENT_CLASS = 'disabled-content';
@@ -45,7 +47,7 @@ export default class IssuableBulkUpdateSidebar {
   initDropdowns() {
     new LabelsSelect();
     new MilestoneSelect();
-    new IssueStatusSelect();
+    issueStatusSelect();
     new SubscriptionSelect();
   }
 
diff --git a/app/assets/javascripts/issuable_context.js b/app/assets/javascripts/issuable_context.js
index 73791edaebb..da99394ff90 100644
--- a/app/assets/javascripts/issuable_context.js
+++ b/app/assets/javascripts/issuable_context.js
@@ -1,33 +1,32 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, comma-dangle, quotes, prefer-arrow-callback, consistent-return, one-var, no-var, one-var-declaration-per-line, no-underscore-dangle, max-len */
 import Cookies from 'js-cookie';
 import bp from './breakpoints';
 import UsersSelect from './users_select';
 
-const PARTICIPANTS_ROW_COUNT = 7;
-
-(function() {
-  this.IssuableContext = (function() {
-    function IssuableContext(currentUser) {
-      this.initParticipants();
-      new UsersSelect(currentUser);
-      $('select.select2').select2({
-        width: 'resolve',
-        dropdownAutoWidth: true
-      });
-      $(".issuable-sidebar .inline-update").on("change", "select", function() {
-        return $(this).submit();
-      });
-      $(".issuable-sidebar .inline-update").on("change", ".js-assignee", function() {
-        return $(this).submit();
-      });
-      $(document).off('click', '.issuable-sidebar .dropdown-content a').on('click', '.issuable-sidebar .dropdown-content a', function(e) {
-        return e.preventDefault();
-      });
-      $(document).off('click', '.edit-link').on('click', '.edit-link', function(e) {
-        var $block, $selectbox;
+export default class IssuableContext {
+  constructor(currentUser) {
+    this.userSelect = new UsersSelect(currentUser);
+
+    $('select.select2').select2({
+      width: 'resolve',
+      dropdownAutoWidth: true,
+    });
+
+    $('.issuable-sidebar .inline-update').on('change', 'select', function onClickSelect() {
+      return $(this).submit();
+    });
+    $('.issuable-sidebar .inline-update').on('change', '.js-assignee', function onClickAssignee() {
+      return $(this).submit();
+    });
+    $(document)
+      .off('click', '.issuable-sidebar .dropdown-content a')
+      .on('click', '.issuable-sidebar .dropdown-content a', e => e.preventDefault());
+
+    $(document)
+      .off('click', '.edit-link')
+      .on('click', '.edit-link', function onClickEdit(e) {
         e.preventDefault();
-        $block = $(this).parents('.block');
-        $selectbox = $block.find('.selectbox');
+        const $block = $(this).parents('.block');
+        const $selectbox = $block.find('.selectbox');
         if ($selectbox.is(':visible')) {
           $selectbox.hide();
           $block.find('.value').show();
@@ -35,46 +34,18 @@ const PARTICIPANTS_ROW_COUNT = 7;
           $selectbox.show();
           $block.find('.value').hide();
         }
-        if ($selectbox.is(':visible')) {
-          return setTimeout(function() {
-            return $block.find('.dropdown-menu-toggle').trigger('click');
-          }, 0);
-        }
-      });
-      window.addEventListener('beforeunload', function() {
-        // collapsed_gutter cookie hides the sidebar
-        var bpBreakpoint = bp.getBreakpointSize();
-        if (bpBreakpoint === 'xs' || bpBreakpoint === 'sm') {
-          Cookies.set('collapsed_gutter', true);
-        }
-      });
-    }
 
-    IssuableContext.prototype.initParticipants = function() {
-      $(document).on('click', '.js-participants-more', this.toggleHiddenParticipants);
-      return $('.js-participants-author').each(function(i) {
-        if (i >= PARTICIPANTS_ROW_COUNT) {
-          return $(this).addClass('js-participants-hidden').hide();
+        if ($selectbox.is(':visible')) {
+          setTimeout(() => $block.find('.dropdown-menu-toggle').trigger('click'), 0);
         }
       });
-    };
-
-    IssuableContext.prototype.toggleHiddenParticipants = function() {
-      const currentText = $(this).text().trim();
-      const lessText = $(this).data('less-text');
-      const originalText = $(this).data('original-text');
 
-      if (currentText === originalText) {
-        $(this).text(lessText);
-
-        if (gl.lazyLoader) gl.lazyLoader.loadCheck();
-      } else {
-        $(this).text(originalText);
+    window.addEventListener('beforeunload', () => {
+      // collapsed_gutter cookie hides the sidebar
+      const bpBreakpoint = bp.getBreakpointSize();
+      if (bpBreakpoint === 'xs' || bpBreakpoint === 'sm') {
+        Cookies.set('collapsed_gutter', true);
       }
-
-      $('.js-participants-hidden').toggle();
-    };
-
-    return IssuableContext;
-  })();
-}).call(window);
+    });
+  }
+}
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index cd2562bc6a9..57dcaa0e1ac 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -1,110 +1,107 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-new, quotes, object-shorthand, no-unused-vars, comma-dangle, no-alert, consistent-return, no-else-return, prefer-template, one-var, one-var-declaration-per-line, curly, max-len */
+/* eslint-disable func-names, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-new, object-shorthand, no-unused-vars, comma-dangle, no-alert, consistent-return, no-else-return, prefer-template, one-var, one-var-declaration-per-line, curly, max-len */
 /* global GitLab */
-/* global Autosave */
 
 import Pikaday from 'pikaday';
+import Autosave from './autosave';
 import UsersSelect from './users_select';
 import GfmAutoComplete from './gfm_auto_complete';
 import ZenMode from './zen_mode';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
 
-(function() {
-  this.IssuableForm = (function() {
-    IssuableForm.prototype.wipRegex = /^\s*(\[WIP\]\s*|WIP:\s*|WIP\s+)+\s*/i;
-
-    function IssuableForm(form) {
-      var $issuableDueDate, calendar;
-      this.form = form;
-      this.toggleWip = this.toggleWip.bind(this);
-      this.renderWipExplanation = this.renderWipExplanation.bind(this);
-      this.resetAutosave = this.resetAutosave.bind(this);
-      this.handleSubmit = this.handleSubmit.bind(this);
-      new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
-      new UsersSelect();
-      new ZenMode();
-      this.titleField = this.form.find("input[name*='[title]']");
-      this.descriptionField = this.form.find("textarea[name*='[description]']");
-      if (!(this.titleField.length && this.descriptionField.length)) {
-        return;
-      }
-      this.initAutosave();
-      this.form.on("submit", this.handleSubmit);
-      this.form.on("click", ".btn-cancel", this.resetAutosave);
-      this.initWip();
-      $issuableDueDate = $('#issuable-due-date');
-      if ($issuableDueDate.length) {
-        calendar = new Pikaday({
-          field: $issuableDueDate.get(0),
-          theme: 'gitlab-theme animate-picker',
-          format: 'yyyy-mm-dd',
-          container: $issuableDueDate.parent().get(0),
-          parse: dateString => parsePikadayDate(dateString),
-          toString: date => pikadayToString(date),
-          onSelect: function(dateText) {
-            $issuableDueDate.val(calendar.toString(dateText));
-          }
-        });
-        calendar.setDate(parsePikadayDate($issuableDueDate.val()));
-      }
+export default class IssuableForm {
+  constructor(form) {
+    this.form = form;
+    this.toggleWip = this.toggleWip.bind(this);
+    this.renderWipExplanation = this.renderWipExplanation.bind(this);
+    this.resetAutosave = this.resetAutosave.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.wipRegex = /^\s*(\[WIP\]\s*|WIP:\s*|WIP\s+)+\s*/i;
+
+    new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
+    new UsersSelect();
+    new ZenMode();
+
+    this.titleField = this.form.find('input[name*="[title]"]');
+    this.descriptionField = this.form.find('textarea[name*="[description]"]');
+    if (!(this.titleField.length && this.descriptionField.length)) {
+      return;
     }
 
-    IssuableForm.prototype.initAutosave = function() {
-      new Autosave(this.titleField, [document.location.pathname, document.location.search, "title"]);
-      return new Autosave(this.descriptionField, [document.location.pathname, document.location.search, "description"]);
-    };
-
-    IssuableForm.prototype.handleSubmit = function() {
-      return this.resetAutosave();
-    };
-
-    IssuableForm.prototype.resetAutosave = function() {
-      this.titleField.data("autosave").reset();
-      return this.descriptionField.data("autosave").reset();
-    };
-
-    IssuableForm.prototype.initWip = function() {
-      this.$wipExplanation = this.form.find(".js-wip-explanation");
-      this.$noWipExplanation = this.form.find(".js-no-wip-explanation");
-      if (!(this.$wipExplanation.length && this.$noWipExplanation.length)) {
-        return;
-      }
-      this.form.on("click", ".js-toggle-wip", this.toggleWip);
-      this.titleField.on("keyup blur", this.renderWipExplanation);
-      return this.renderWipExplanation();
-    };
-
-    IssuableForm.prototype.workInProgress = function() {
-      return this.wipRegex.test(this.titleField.val());
-    };
-
-    IssuableForm.prototype.renderWipExplanation = function() {
-      if (this.workInProgress()) {
-        this.$wipExplanation.show();
-        return this.$noWipExplanation.hide();
-      } else {
-        this.$wipExplanation.hide();
-        return this.$noWipExplanation.show();
-      }
-    };
-
-    IssuableForm.prototype.toggleWip = function(event) {
-      event.preventDefault();
-      if (this.workInProgress()) {
-        this.removeWip();
-      } else {
-        this.addWip();
-      }
-      return this.renderWipExplanation();
-    };
-
-    IssuableForm.prototype.removeWip = function() {
-      return this.titleField.val(this.titleField.val().replace(this.wipRegex, ""));
-    };
-
-    IssuableForm.prototype.addWip = function() {
-      return this.titleField.val("WIP: " + (this.titleField.val()));
-    };
-
-    return IssuableForm;
-  })();
-}).call(window);
+    this.initAutosave();
+    this.form.on('submit', this.handleSubmit);
+    this.form.on('click', '.btn-cancel', this.resetAutosave);
+    this.initWip();
+
+    const $issuableDueDate = $('#issuable-due-date');
+
+    if ($issuableDueDate.length) {
+      const calendar = new Pikaday({
+        field: $issuableDueDate.get(0),
+        theme: 'gitlab-theme animate-picker',
+        format: 'yyyy-mm-dd',
+        container: $issuableDueDate.parent().get(0),
+        parse: dateString => parsePikadayDate(dateString),
+        toString: date => pikadayToString(date),
+        onSelect: dateText => $issuableDueDate.val(calendar.toString(dateText)),
+      });
+      calendar.setDate(parsePikadayDate($issuableDueDate.val()));
+    }
+  }
+
+  initAutosave() {
+    new Autosave(this.titleField, [document.location.pathname, document.location.search, 'title']);
+    return new Autosave(this.descriptionField, [document.location.pathname, document.location.search, 'description']);
+  }
+
+  handleSubmit() {
+    return this.resetAutosave();
+  }
+
+  resetAutosave() {
+    this.titleField.data('autosave').reset();
+    return this.descriptionField.data('autosave').reset();
+  }
+
+  initWip() {
+    this.$wipExplanation = this.form.find('.js-wip-explanation');
+    this.$noWipExplanation = this.form.find('.js-no-wip-explanation');
+    if (!(this.$wipExplanation.length && this.$noWipExplanation.length)) {
+      return;
+    }
+    this.form.on('click', '.js-toggle-wip', this.toggleWip);
+    this.titleField.on('keyup blur', this.renderWipExplanation);
+    return this.renderWipExplanation();
+  }
+
+  workInProgress() {
+    return this.wipRegex.test(this.titleField.val());
+  }
+
+  renderWipExplanation() {
+    if (this.workInProgress()) {
+      this.$wipExplanation.show();
+      return this.$noWipExplanation.hide();
+    } else {
+      this.$wipExplanation.hide();
+      return this.$noWipExplanation.show();
+    }
+  }
+
+  toggleWip(event) {
+    event.preventDefault();
+    if (this.workInProgress()) {
+      this.removeWip();
+    } else {
+      this.addWip();
+    }
+    return this.renderWipExplanation();
+  }
+
+  removeWip() {
+    return this.titleField.val(this.titleField.val().replace(this.wipRegex, ''));
+  }
+
+  addWip() {
+    this.titleField.val(`WIP: ${(this.titleField.val())}`);
+  }
+}
diff --git a/app/assets/javascripts/issuable_index.js b/app/assets/javascripts/issuable_index.js
index ece0220c927..0b123a11a3b 100644
--- a/app/assets/javascripts/issuable_index.js
+++ b/app/assets/javascripts/issuable_index.js
@@ -1,171 +1,42 @@
-/* eslint-disable no-param-reassign, func-names, no-var, camelcase, no-unused-vars, object-shorthand, space-before-function-paren, no-return-assign, comma-dangle, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, wrap-iife, max-len */
-/* global IssuableIndex */
-import _ from 'underscore';
 import IssuableBulkUpdateSidebar from './issuable_bulk_update_sidebar';
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
 
-((global) => {
-  var issuable_created;
-
-  issuable_created = false;
-
-  global.IssuableIndex = {
-    init: function(pagePrefix) {
-      IssuableIndex.initTemplates();
-      IssuableIndex.initSearch();
-      IssuableIndex.initBulkUpdate(pagePrefix);
-      IssuableIndex.initResetFilters();
-      IssuableIndex.resetIncomingEmailToken();
-      IssuableIndex.initLabelFilterRemove();
-    },
-    initTemplates: function() {
-      return IssuableIndex.labelRow = _.template('<% _.each(labels, function(label){ %> <span class="label-row btn-group" role="group" aria-label="<%- label.title %>" style="color: <%- label.text_color %>;"> <a href="#" class="btn btn-transparent has-tooltip" style="background-color: <%- label.color %>;" title="<%- label.description %>" data-container="body"> <%- label.title %> </a> <button type="button" class="btn btn-transparent label-remove js-label-filter-remove" style="background-color: <%- label.color %>;" data-label="<%- label.title %>"> <i class="fa fa-times"></i> </button> </span> <% }); %>');
-    },
-    initSearch: function() {
-      const $searchInput = $('#issuable_search');
-
-      IssuableIndex.initSearchState($searchInput);
-
-      // `immediate` param set to false debounces on the `trailing` edge, lets user finish typing
-      const debouncedExecSearch = _.debounce(IssuableIndex.executeSearch, 1000, false);
-
-      $searchInput.off('keyup').on('keyup', debouncedExecSearch);
-
-      // ensures existing filters are preserved when manually submitted
-      $('#issuable_search_form').on('submit', (e) => {
-        e.preventDefault();
-        debouncedExecSearch(e);
-      });
-    },
-    initSearchState: function($searchInput) {
-      const currentSearchVal = $searchInput.val();
-
-      IssuableIndex.searchState = {
-        elem: $searchInput,
-        current: currentSearchVal
-      };
-
-      IssuableIndex.maybeFocusOnSearch();
-    },
-    accessSearchPristine: function(set) {
-      // store reference to previous value to prevent search on non-mutating keyup
-      const state = IssuableIndex.searchState;
-      const currentSearchVal = state.elem.val();
-
-      if (set) {
-        state.current = currentSearchVal;
-      } else {
-        return state.current === currentSearchVal;
-      }
-    },
-    maybeFocusOnSearch: function() {
-      const currentSearchVal = IssuableIndex.searchState.current;
-      if (currentSearchVal && currentSearchVal !== '') {
-        const queryLength = currentSearchVal.length;
-        const $searchInput = IssuableIndex.searchState.elem;
-
-      /* The following ensures that the cursor is initially placed at
-        * the end of search input when focus is applied. It accounts
-        * for differences in browser implementations of `setSelectionRange`
-        * and cursor placement for elements in focus.
-      */
-        $searchInput.focus();
-        if ($searchInput.setSelectionRange) {
-          $searchInput.setSelectionRange(queryLength, queryLength);
-        } else {
-          $searchInput.val(currentSearchVal);
-        }
-      }
-    },
-    executeSearch: function(e) {
-      const $search = $('#issuable_search');
-      const $searchName = $search.attr('name');
-      const $searchValue = $search.val();
-      const $filtersForm = $('.js-filter-form');
-      const $input = $(`input[name='${$searchName}']`, $filtersForm);
-      const isPristine = IssuableIndex.accessSearchPristine();
-
-      if (isPristine) {
-        return;
-      }
-
-      if (!$input.length) {
-        $filtersForm.append(`<input type='hidden' name='${$searchName}' value='${_.escape($searchValue)}'/>`);
-      } else {
-        $input.val($searchValue);
-      }
-
-      IssuableIndex.filterResults($filtersForm);
-    },
-    initLabelFilterRemove: function() {
-      return $(document).off('click', '.js-label-filter-remove').on('click', '.js-label-filter-remove', function(e) {
-        var $button;
-        $button = $(this);
-        // Remove the label input box
-        $('input[name="label_name[]"]').filter(function() {
-          return this.value === $button.data('label');
-        }).remove();
-        // Submit the form to get new data
-        IssuableIndex.filterResults($('.filter-form'));
-      });
-    },
-    filterResults: (function(_this) {
-      return function(form) {
-        var formAction, formData, issuesUrl;
-        formData = form.serializeArray();
-        formData = formData.filter(function(data) {
-          return data.value !== '';
-        });
-        formData = $.param(formData);
-        formAction = form.attr('action');
-        issuesUrl = formAction;
-        issuesUrl += "" + (formAction.indexOf('?') === -1 ? '?' : '&');
-        issuesUrl += formData;
-        return gl.utils.visitUrl(issuesUrl);
-      };
-    })(this),
-    initResetFilters: function() {
-      $('.reset-filters').on('click', function(e) {
-        e.preventDefault();
-        const target = e.target;
-        const $form = $(target).parents('.js-filter-form');
-        const baseIssuesUrl = target.href;
-
-        $form.attr('action', baseIssuesUrl);
-        gl.utils.visitUrl(baseIssuesUrl);
+export default class IssuableIndex {
+  constructor(pagePrefix) {
+    this.initBulkUpdate(pagePrefix);
+    IssuableIndex.resetIncomingEmailToken();
+  }
+  initBulkUpdate(pagePrefix) {
+    const userCanBulkUpdate = $('.issues-bulk-update').length > 0;
+    const alreadyInitialized = !!this.bulkUpdateSidebar;
+
+    if (userCanBulkUpdate && !alreadyInitialized) {
+      IssuableBulkUpdateActions.init({
+        prefixId: pagePrefix,
       });
-    },
-    initBulkUpdate: function(pagePrefix) {
-      const userCanBulkUpdate = $('.issues-bulk-update').length > 0;
-      const alreadyInitialized = !!this.bulkUpdateSidebar;
-
-      if (userCanBulkUpdate && !alreadyInitialized) {
-        IssuableBulkUpdateActions.init({
-          prefixId: pagePrefix,
-        });
-
-        this.bulkUpdateSidebar = new IssuableBulkUpdateSidebar();
-      }
-    },
-    resetIncomingEmailToken: function() {
-      $('.incoming-email-token-reset').on('click', function(e) {
-        e.preventDefault();
 
-        $.ajax({
-          type: 'PUT',
-          url: $('.incoming-email-token-reset').attr('href'),
-          dataType: 'json',
-          success: function(response) {
-            $('#issue_email').val(response.new_issue_address).focus();
-          },
-          beforeSend: function() {
-            $('.incoming-email-token-reset').text('resetting...');
-          },
-          complete: function() {
-            $('.incoming-email-token-reset').text('reset it');
-          }
-        });
-      });
+      this.bulkUpdateSidebar = new IssuableBulkUpdateSidebar();
     }
-  };
-})(window);
+  }
+
+  static resetIncomingEmailToken() {
+    $('.incoming-email-token-reset').on('click', (e) => {
+      e.preventDefault();
+
+      $.ajax({
+        type: 'PUT',
+        url: $('.incoming-email-token-reset').attr('href'),
+        dataType: 'json',
+        success(response) {
+          $('#issue_email').val(response.new_issue_address).focus();
+        },
+        beforeSend() {
+          $('.incoming-email-token-reset').text('resetting...');
+        },
+        complete() {
+          $('.incoming-email-token-reset').text('reset it');
+        },
+      });
+    });
+  }
+}
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 3fc29f9a661..acd5730cf3c 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -6,7 +6,7 @@ import TaskList from './task_list';
 import CreateMergeRequestDropdown from './create_merge_request_dropdown';
 import IssuablesHelper from './helpers/issuables_helper';
 
-class Issue {
+export default class Issue {
   constructor() {
     if ($('a.btn-close').length) {
       this.taskList = new TaskList({
@@ -147,5 +147,3 @@ class Issue {
     });
   }
 }
-
-export default Issue;
diff --git a/app/assets/javascripts/issue_status_select.js b/app/assets/javascripts/issue_status_select.js
index 56cb536dcde..03546f61d1f 100644
--- a/app/assets/javascripts/issue_status_select.js
+++ b/app/assets/javascripts/issue_status_select.js
@@ -1,34 +1,23 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, object-shorthand, no-unused-vars, no-shadow, one-var, one-var-declaration-per-line, comma-dangle, max-len */
-(function() {
-  this.IssueStatusSelect = (function() {
-    function IssueStatusSelect() {
-      $('.js-issue-status').each(function(i, el) {
-        var fieldName;
-        fieldName = $(el).data("field-name");
-        return $(el).glDropdown({
-          selectable: true,
-          fieldName: fieldName,
-          toggleLabel: (function(_this) {
-            return function(selected, el, instance) {
-              var $item, label;
-              label = 'Author';
-              $item = instance.dropdown.find('.is-active');
-              if ($item.length) {
-                label = $item.text();
-              }
-              return label;
-            };
-          })(this),
-          clicked: function(options) {
-            return options.e.preventDefault();
-          },
-          id: function(obj, el) {
-            return $(el).data("id");
-          }
-        });
-      });
-    }
-
-    return IssueStatusSelect;
-  })();
-}).call(window);
+export default function issueStatusSelect() {
+  $('.js-issue-status').each((i, el) => {
+    const fieldName = $(el).data('field-name');
+    return $(el).glDropdown({
+      selectable: true,
+      fieldName,
+      toggleLabel(selected, element, instance) {
+        let label = 'Author';
+        const $item = instance.dropdown.find('.is-active');
+        if ($item.length) {
+          label = $item.text();
+        }
+        return label;
+      },
+      clicked(options) {
+        return options.e.preventDefault();
+      },
+      id(obj, element) {
+        return $(element).data('id');
+      },
+    });
+  });
+}
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 84602cf9207..9b35efcb499 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -6,474 +6,470 @@ import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
 import DropdownUtils from './filtered_search/dropdown_utils';
 import CreateLabelDropdown from './create_label';
 
-(function() {
-  this.LabelsSelect = (function() {
-    function LabelsSelect(els) {
-      var _this, $els;
-      _this = this;
+export default class LabelsSelect {
+  constructor(els) {
+    var _this, $els;
+    _this = this;
 
-      $els = $(els);
+    $els = $(els);
 
-      if (!els) {
-        $els = $('.js-label-select');
-      }
+    if (!els) {
+      $els = $('.js-label-select');
+    }
 
-      $els.each(function(i, dropdown) {
-        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, namespacePath, projectPath, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected, $toggleText, fieldName, useId, propertyName, showMenuAbove, $container, $dropdownContainer;
-        $dropdown = $(dropdown);
-        $dropdownContainer = $dropdown.closest('.labels-filter');
-        $toggleText = $dropdown.find('.dropdown-toggle-text');
-        namespacePath = $dropdown.data('namespace-path');
-        projectPath = $dropdown.data('project-path');
-        labelUrl = $dropdown.data('labels');
-        issueUpdateURL = $dropdown.data('issueUpdate');
-        selectedLabel = $dropdown.data('selected');
-        if ((selectedLabel != null) && !$dropdown.hasClass('js-multiselect')) {
-          selectedLabel = selectedLabel.split(',');
-        }
-        showNo = $dropdown.data('show-no');
-        showAny = $dropdown.data('show-any');
-        showMenuAbove = $dropdown.data('showMenuAbove');
-        defaultLabel = $dropdown.data('default-label');
-        abilityName = $dropdown.data('ability-name');
-        $selectbox = $dropdown.closest('.selectbox');
-        $block = $selectbox.closest('.block');
-        $form = $dropdown.closest('form, .js-issuable-update');
-        $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
-        $sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip');
-        $value = $block.find('.value');
-        $loading = $block.find('.block-loading').fadeOut();
-        fieldName = $dropdown.data('field-name');
-        useId = $dropdown.is('.js-issuable-form-dropdown, .js-filter-bulk-update, .js-label-sidebar-dropdown');
-        propertyName = useId ? 'id' : 'title';
-        initialSelected = $selectbox
-          .find('input[name="' + $dropdown.data('field-name') + '"]')
-          .map(function () {
-            return this.value;
-          }).get();
-        if (issueUpdateURL != null) {
-          issueURLSplit = issueUpdateURL.split('/');
-        }
-        if (issueUpdateURL) {
-          labelHTMLTemplate = _.template('<% _.each(labels, function(label){ %> <a href="<%- ["",issueURLSplit[1], issueURLSplit[2],""].join("/") %>issues?label_name[]=<%- encodeURIComponent(label.title) %>"> <span class="label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;"> <%- label.title %> </span> </a> <% }); %>');
-          labelNoneHTMLTemplate = '<span class="no-value">None</span>';
-        }
+    $els.each(function(i, dropdown) {
+      var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, namespacePath, projectPath, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected, $toggleText, fieldName, useId, propertyName, showMenuAbove, $container, $dropdownContainer;
+      $dropdown = $(dropdown);
+      $dropdownContainer = $dropdown.closest('.labels-filter');
+      $toggleText = $dropdown.find('.dropdown-toggle-text');
+      namespacePath = $dropdown.data('namespace-path');
+      projectPath = $dropdown.data('project-path');
+      labelUrl = $dropdown.data('labels');
+      issueUpdateURL = $dropdown.data('issueUpdate');
+      selectedLabel = $dropdown.data('selected');
+      if ((selectedLabel != null) && !$dropdown.hasClass('js-multiselect')) {
+        selectedLabel = selectedLabel.split(',');
+      }
+      showNo = $dropdown.data('show-no');
+      showAny = $dropdown.data('show-any');
+      showMenuAbove = $dropdown.data('showMenuAbove');
+      defaultLabel = $dropdown.data('default-label');
+      abilityName = $dropdown.data('ability-name');
+      $selectbox = $dropdown.closest('.selectbox');
+      $block = $selectbox.closest('.block');
+      $form = $dropdown.closest('form, .js-issuable-update');
+      $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span');
+      $sidebarLabelTooltip = $block.find('.js-sidebar-labels-tooltip');
+      $value = $block.find('.value');
+      $loading = $block.find('.block-loading').fadeOut();
+      fieldName = $dropdown.data('field-name');
+      useId = $dropdown.is('.js-issuable-form-dropdown, .js-filter-bulk-update, .js-label-sidebar-dropdown');
+      propertyName = useId ? 'id' : 'title';
+      initialSelected = $selectbox
+        .find('input[name="' + $dropdown.data('field-name') + '"]')
+        .map(function () {
+          return this.value;
+        }).get();
+      if (issueUpdateURL != null) {
+        issueURLSplit = issueUpdateURL.split('/');
+      }
+      if (issueUpdateURL) {
+        labelHTMLTemplate = _.template('<% _.each(labels, function(label){ %> <a href="<%- ["",issueURLSplit[1], issueURLSplit[2],""].join("/") %>issues?label_name[]=<%- encodeURIComponent(label.title) %>"> <span class="label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;"> <%- label.title %> </span> </a> <% }); %>');
+        labelNoneHTMLTemplate = '<span class="no-value">None</span>';
+      }
 
-        $sidebarLabelTooltip.tooltip();
+      $sidebarLabelTooltip.tooltip();
 
-        if ($dropdown.closest('.dropdown').find('.dropdown-new-label').length) {
-          new CreateLabelDropdown($dropdown.closest('.dropdown').find('.dropdown-new-label'), namespacePath, projectPath);
-        }
+      if ($dropdown.closest('.dropdown').find('.dropdown-new-label').length) {
+        new CreateLabelDropdown($dropdown.closest('.dropdown').find('.dropdown-new-label'), namespacePath, projectPath);
+      }
 
-        saveLabelData = function() {
-          var data, selected;
-          selected = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "']").map(function() {
-            return this.value;
-          }).get();
+      saveLabelData = function() {
+        var data, selected;
+        selected = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "']").map(function() {
+          return this.value;
+        }).get();
 
-          if (_.isEqual(initialSelected, selected)) return;
-          initialSelected = selected;
+        if (_.isEqual(initialSelected, selected)) return;
+        initialSelected = selected;
 
-          data = {};
-          data[abilityName] = {};
-          data[abilityName].label_ids = selected;
-          if (!selected.length) {
-            data[abilityName].label_ids = [''];
+        data = {};
+        data[abilityName] = {};
+        data[abilityName].label_ids = selected;
+        if (!selected.length) {
+          data[abilityName].label_ids = [''];
+        }
+        $loading.removeClass('hidden').fadeIn();
+        $dropdown.trigger('loading.gl.dropdown');
+        return $.ajax({
+          type: 'PUT',
+          url: issueUpdateURL,
+          dataType: 'JSON',
+          data: data
+        }).done(function(data) {
+          var labelCount, template, labelTooltipTitle, labelTitles;
+          $loading.fadeOut();
+          $dropdown.trigger('loaded.gl.dropdown');
+          $selectbox.hide();
+          data.issueURLSplit = issueURLSplit;
+          labelCount = 0;
+          if (data.labels.length) {
+            template = labelHTMLTemplate(data);
+            labelCount = data.labels.length;
           }
-          $loading.removeClass('hidden').fadeIn();
-          $dropdown.trigger('loading.gl.dropdown');
-          return $.ajax({
-            type: 'PUT',
-            url: issueUpdateURL,
-            dataType: 'JSON',
-            data: data
-          }).done(function(data) {
-            var labelCount, template, labelTooltipTitle, labelTitles;
-            $loading.fadeOut();
-            $dropdown.trigger('loaded.gl.dropdown');
-            $selectbox.hide();
-            data.issueURLSplit = issueURLSplit;
-            labelCount = 0;
-            if (data.labels.length) {
-              template = labelHTMLTemplate(data);
-              labelCount = data.labels.length;
-            }
-            else {
-              template = labelNoneHTMLTemplate;
-            }
-            $value.removeAttr('style').html(template);
-            $sidebarCollapsedValue.text(labelCount);
-
-            if (data.labels.length) {
-              labelTitles = data.labels.map(function(label) {
-                return label.title;
-              });
+          else {
+            template = labelNoneHTMLTemplate;
+          }
+          $value.removeAttr('style').html(template);
+          $sidebarCollapsedValue.text(labelCount);
 
-              if (labelTitles.length > 5) {
-                labelTitles = labelTitles.slice(0, 5);
-                labelTitles.push('and ' + (data.labels.length - 5) + ' more');
-              }
+          if (data.labels.length) {
+            labelTitles = data.labels.map(function(label) {
+              return label.title;
+            });
 
-              labelTooltipTitle = labelTitles.join(', ');
-            }
-            else {
-              labelTooltipTitle = '';
-              $sidebarLabelTooltip.tooltip('destroy');
+            if (labelTitles.length > 5) {
+              labelTitles = labelTitles.slice(0, 5);
+              labelTitles.push('and ' + (data.labels.length - 5) + ' more');
             }
 
-            $sidebarLabelTooltip
-              .attr('title', labelTooltipTitle)
-              .tooltip('fixTitle');
+            labelTooltipTitle = labelTitles.join(', ');
+          }
+          else {
+            labelTooltipTitle = '';
+            $sidebarLabelTooltip.tooltip('destroy');
+          }
 
-            $('.has-tooltip', $value).tooltip({
-              container: 'body'
-            });
+          $sidebarLabelTooltip
+            .attr('title', labelTooltipTitle)
+            .tooltip('fixTitle');
+
+          $('.has-tooltip', $value).tooltip({
+            container: 'body'
           });
-        };
-        $dropdown.glDropdown({
-          showMenuAbove: showMenuAbove,
-          data: function(term, callback) {
-            return $.ajax({
-              url: labelUrl
-            }).done(function(data) {
-              data = _.chain(data).groupBy(function(label) {
-                return label.title;
-              }).map(function(label) {
-                var color;
-                color = _.map(label, function(dup) {
-                  return dup.color;
+        });
+      };
+      $dropdown.glDropdown({
+        showMenuAbove: showMenuAbove,
+        data: function(term, callback) {
+          return $.ajax({
+            url: labelUrl
+          }).done(function(data) {
+            data = _.chain(data).groupBy(function(label) {
+              return label.title;
+            }).map(function(label) {
+              var color;
+              color = _.map(label, function(dup) {
+                return dup.color;
+              });
+              return {
+                id: label[0].id,
+                title: label[0].title,
+                color: color,
+                duplicate: color.length > 1
+              };
+            }).value();
+            if ($dropdown.hasClass('js-extra-options')) {
+              var extraData = [];
+              if (showNo) {
+                extraData.unshift({
+                  id: 0,
+                  title: 'No Label'
                 });
-                return {
-                  id: label[0].id,
-                  title: label[0].title,
-                  color: color,
-                  duplicate: color.length > 1
-                };
-              }).value();
-              if ($dropdown.hasClass('js-extra-options')) {
-                var extraData = [];
-                if (showNo) {
-                  extraData.unshift({
-                    id: 0,
-                    title: 'No Label'
-                  });
-                }
-                if (showAny) {
-                  extraData.unshift({
-                    isAny: true,
-                    title: 'Any Label'
-                  });
-                }
-                if (extraData.length) {
-                  extraData.push('divider');
-                  data = extraData.concat(data);
-                }
-              }
-
-              callback(data);
-              if (showMenuAbove) {
-                $dropdown.data('glDropdown').positionMenuAbove();
-              }
-            });
-          },
-          renderRow: function(label, instance) {
-            var $a, $li, color, colorEl, indeterminate, removesAll, selectedClass, spacing, i, marked, dropdownName, dropdownValue;
-            $li = $('<li>');
-            $a = $('<a href="#">');
-            selectedClass = [];
-            removesAll = label.id <= 0 || (label.id == null);
-            if ($dropdown.hasClass('js-filter-bulk-update')) {
-              indeterminate = $dropdown.data('indeterminate') || [];
-              marked = $dropdown.data('marked') || [];
-
-              if (indeterminate.indexOf(label.id) !== -1) {
-                selectedClass.push('is-indeterminate');
               }
-
-              if (marked.indexOf(label.id) !== -1) {
-                // Remove is-indeterminate class if the item will be marked as active
-                i = selectedClass.indexOf('is-indeterminate');
-                if (i !== -1) {
-                  selectedClass.splice(i, 1);
-                }
-                selectedClass.push('is-active');
+              if (showAny) {
+                extraData.unshift({
+                  isAny: true,
+                  title: 'Any Label'
+                });
               }
-            } else {
-              if (this.id(label)) {
-                dropdownName = $dropdown.data('fieldName');
-                dropdownValue = this.id(label).toString().replace(/'/g, '\\\'');
-
-                if ($form.find("input[type='hidden'][name='" + dropdownName + "'][value='" + dropdownValue + "']").length) {
-                  selectedClass.push('is-active');
-                }
+              if (extraData.length) {
+                extraData.push('divider');
+                data = extraData.concat(data);
               }
+            }
 
-              if ($dropdown.hasClass('js-multiselect') && removesAll) {
-                selectedClass.push('dropdown-clear-active');
-              }
+            callback(data);
+            if (showMenuAbove) {
+              $dropdown.data('glDropdown').positionMenuAbove();
             }
-            if (label.duplicate) {
-              color = gl.DropdownUtils.duplicateLabelColor(label.color);
+          });
+        },
+        renderRow: function(label, instance) {
+          var $a, $li, color, colorEl, indeterminate, removesAll, selectedClass, spacing, i, marked, dropdownName, dropdownValue;
+          $li = $('<li>');
+          $a = $('<a href="#">');
+          selectedClass = [];
+          removesAll = label.id <= 0 || (label.id == null);
+          if ($dropdown.hasClass('js-filter-bulk-update')) {
+            indeterminate = $dropdown.data('indeterminate') || [];
+            marked = $dropdown.data('marked') || [];
+
+            if (indeterminate.indexOf(label.id) !== -1) {
+              selectedClass.push('is-indeterminate');
             }
-            else {
-              if (label.color != null) {
-                color = label.color[0];
+
+            if (marked.indexOf(label.id) !== -1) {
+              // Remove is-indeterminate class if the item will be marked as active
+              i = selectedClass.indexOf('is-indeterminate');
+              if (i !== -1) {
+                selectedClass.splice(i, 1);
               }
+              selectedClass.push('is-active');
             }
-            if (color) {
-              colorEl = "<span class='dropdown-label-box' style='background: " + color + "'></span>";
-            }
-            else {
-              colorEl = '';
-            }
-            // We need to identify which items are actually labels
-            if (label.id) {
-              selectedClass.push('label-item');
-              $a.attr('data-label-id', label.id);
-            }
-            $a.addClass(selectedClass.join(' ')).html(colorEl + " " + label.title);
-            // Return generated html
-            return $li.html($a).prop('outerHTML');
-          },
-          search: {
-            fields: ['title']
-          },
-          selectable: true,
-          filterable: true,
-          selected: $dropdown.data('selected') || [],
-          toggleLabel: function(selected, el) {
-            var isSelected = el !== null ? el.hasClass('is-active') : false;
-            var title = selected.title;
-            var selectedLabels = this.selected;
-
-            if (selected.id === 0) {
-              this.selected = [];
-              return 'No Label';
+          } else {
+            if (this.id(label)) {
+              dropdownName = $dropdown.data('fieldName');
+              dropdownValue = this.id(label).toString().replace(/'/g, '\\\'');
+
+              if ($form.find("input[type='hidden'][name='" + dropdownName + "'][value='" + dropdownValue + "']").length) {
+                selectedClass.push('is-active');
+              }
             }
-            else if (isSelected) {
-              this.selected.push(title);
+
+            if ($dropdown.hasClass('js-multiselect') && removesAll) {
+              selectedClass.push('dropdown-clear-active');
             }
-            else {
-              var index = this.selected.indexOf(title);
-              this.selected.splice(index, 1);
+          }
+          if (label.duplicate) {
+            color = gl.DropdownUtils.duplicateLabelColor(label.color);
+          }
+          else {
+            if (label.color != null) {
+              color = label.color[0];
             }
+          }
+          if (color) {
+            colorEl = "<span class='dropdown-label-box' style='background: " + color + "'></span>";
+          }
+          else {
+            colorEl = '';
+          }
+          // We need to identify which items are actually labels
+          if (label.id) {
+            selectedClass.push('label-item');
+            $a.attr('data-label-id', label.id);
+          }
+          $a.addClass(selectedClass.join(' ')).html(colorEl + " " + label.title);
+          // Return generated html
+          return $li.html($a).prop('outerHTML');
+        },
+        search: {
+          fields: ['title']
+        },
+        selectable: true,
+        filterable: true,
+        selected: $dropdown.data('selected') || [],
+        toggleLabel: function(selected, el) {
+          var isSelected = el !== null ? el.hasClass('is-active') : false;
+          var title = selected.title;
+          var selectedLabels = this.selected;
+
+          if (selected.id === 0) {
+            this.selected = [];
+            return 'No Label';
+          }
+          else if (isSelected) {
+            this.selected.push(title);
+          }
+          else {
+            var index = this.selected.indexOf(title);
+            this.selected.splice(index, 1);
+          }
+
+          if (selectedLabels.length === 1) {
+            return selectedLabels;
+          }
+          else if (selectedLabels.length) {
+            return selectedLabels[0] + " +" + (selectedLabels.length - 1) + " more";
+          }
+          else {
+            return defaultLabel;
+          }
+        },
+        fieldName: $dropdown.data('field-name'),
+        id: function(label) {
+          if (label.id <= 0) return label.title;
+
+          if ($dropdown.hasClass('js-issuable-form-dropdown')) {
+            return label.id;
+          }
 
-            if (selectedLabels.length === 1) {
-              return selectedLabels;
+          if ($dropdown.hasClass("js-filter-submit") && (label.isAny == null)) {
+            return label.title;
+          }
+          else {
+            return label.id;
+          }
+        },
+        hidden: function() {
+          var isIssueIndex, isMRIndex, page, selectedLabels;
+          page = $('body').attr('data-page');
+          isIssueIndex = page === 'projects:issues:index';
+          isMRIndex = page === 'projects:merge_requests:index';
+          $selectbox.hide();
+          // display:block overrides the hide-collapse rule
+          $value.removeAttr('style');
+
+          if ($dropdown.hasClass('js-issuable-form-dropdown')) {
+            return;
+          }
+
+          if ($('html').hasClass('issue-boards-page')) {
+            return;
+          }
+          if ($dropdown.hasClass('js-multiselect')) {
+            if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
+              selectedLabels = $dropdown.closest('form').find("input:hidden[name='" + ($dropdown.data('fieldName')) + "']");
+              Issuable.filterResults($dropdown.closest('form'));
             }
-            else if (selectedLabels.length) {
-              return selectedLabels[0] + " +" + (selectedLabels.length - 1) + " more";
+            else if ($dropdown.hasClass('js-filter-submit')) {
+              $dropdown.closest('form').submit();
             }
             else {
-              return defaultLabel;
+              if (!$dropdown.hasClass('js-filter-bulk-update')) {
+                saveLabelData();
+              }
             }
-          },
-          fieldName: $dropdown.data('field-name'),
-          id: function(label) {
-            if (label.id <= 0) return label.title;
+          }
+        },
+        multiSelect: $dropdown.hasClass('js-multiselect'),
+        vue: $dropdown.hasClass('js-issue-board-sidebar'),
+        clicked: function(options) {
+          const { $el, e, isMarking } = options;
+          const label = options.selectedObj;
+
+          var isIssueIndex, isMRIndex, page, boardsModel;
+          var fadeOutLoader = () => {
+            $loading.fadeOut();
+          };
 
-            if ($dropdown.hasClass('js-issuable-form-dropdown')) {
-              return label.id;
-            }
+          page = $('body').attr('data-page');
+          isIssueIndex = page === 'projects:issues:index';
+          isMRIndex = page === 'projects:merge_requests:index';
 
-            if ($dropdown.hasClass("js-filter-submit") && (label.isAny == null)) {
-              return label.title;
-            }
-            else {
-              return label.id;
-            }
-          },
-          hidden: function() {
-            var isIssueIndex, isMRIndex, page, selectedLabels;
-            page = $('body').attr('data-page');
-            isIssueIndex = page === 'projects:issues:index';
-            isMRIndex = page === 'projects:merge_requests:index';
-            $selectbox.hide();
-            // display:block overrides the hide-collapse rule
-            $value.removeAttr('style');
-
-            if ($dropdown.hasClass('js-issuable-form-dropdown')) {
-              return;
-            }
+          if ($dropdown.parent().find('.is-active:not(.dropdown-clear-active)').length) {
+            $dropdown.parent()
+              .find('.dropdown-clear-active')
+              .removeClass('is-active');
+          }
 
-            if ($('html').hasClass('issue-boards-page')) {
-              return;
-            }
-            if ($dropdown.hasClass('js-multiselect')) {
-              if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
-                selectedLabels = $dropdown.closest('form').find("input:hidden[name='" + ($dropdown.data('fieldName')) + "']");
-                Issuable.filterResults($dropdown.closest('form'));
-              }
-              else if ($dropdown.hasClass('js-filter-submit')) {
-                $dropdown.closest('form').submit();
-              }
-              else {
-                if (!$dropdown.hasClass('js-filter-bulk-update')) {
-                  saveLabelData();
-                }
-              }
-            }
-          },
-          multiSelect: $dropdown.hasClass('js-multiselect'),
-          vue: $dropdown.hasClass('js-issue-board-sidebar'),
-          clicked: function(options) {
-            const { $el, e, isMarking } = options;
-            const label = options.selectedObj;
-
-            var isIssueIndex, isMRIndex, page, boardsModel;
-            var fadeOutLoader = () => {
-              $loading.fadeOut();
-            };
-
-            page = $('body').attr('data-page');
-            isIssueIndex = page === 'projects:issues:index';
-            isMRIndex = page === 'projects:merge_requests:index';
-
-            if ($dropdown.parent().find('.is-active:not(.dropdown-clear-active)').length) {
-              $dropdown.parent()
-                .find('.dropdown-clear-active')
-                .removeClass('is-active');
-            }
+          if ($dropdown.hasClass('js-issuable-form-dropdown')) {
+            return;
+          }
 
-            if ($dropdown.hasClass('js-issuable-form-dropdown')) {
-              return;
-            }
+          if ($dropdown.hasClass('js-filter-bulk-update')) {
+            _this.enableBulkLabelDropdown();
+            _this.setDropdownData($dropdown, isMarking, label.id);
+            return;
+          }
 
-            if ($dropdown.hasClass('js-filter-bulk-update')) {
-              _this.enableBulkLabelDropdown();
-              _this.setDropdownData($dropdown, isMarking, label.id);
-              return;
-            }
+          if ($dropdown.closest('.add-issues-modal').length) {
+            boardsModel = gl.issueBoards.ModalStore.store.filter;
+          }
 
-            if ($dropdown.closest('.add-issues-modal').length) {
-              boardsModel = gl.issueBoards.ModalStore.store.filter;
+          if (boardsModel) {
+            if (label.isAny) {
+              boardsModel['label_name'] = [];
+            } else if ($el.hasClass('is-active')) {
+              boardsModel['label_name'].push(label.title);
             }
 
-            if (boardsModel) {
-              if (label.isAny) {
-                boardsModel['label_name'] = [];
-              } else if ($el.hasClass('is-active')) {
-                boardsModel['label_name'].push(label.title);
-              }
-
-              e.preventDefault();
-              return;
+            e.preventDefault();
+            return;
+          }
+          else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
+            if (!$dropdown.hasClass('js-multiselect')) {
+              selectedLabel = label.title;
+              return Issuable.filterResults($dropdown.closest('form'));
             }
-            else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
-              if (!$dropdown.hasClass('js-multiselect')) {
-                selectedLabel = label.title;
-                return Issuable.filterResults($dropdown.closest('form'));
-              }
+          }
+          else if ($dropdown.hasClass('js-filter-submit')) {
+            return $dropdown.closest('form').submit();
+          }
+          else if ($dropdown.hasClass('js-issue-board-sidebar')) {
+            if ($el.hasClass('is-active')) {
+              gl.issueBoards.BoardsStore.detail.issue.labels.push(new ListLabel({
+                id: label.id,
+                title: label.title,
+                color: label.color[0],
+                textColor: '#fff'
+              }));
             }
-            else if ($dropdown.hasClass('js-filter-submit')) {
-              return $dropdown.closest('form').submit();
+            else {
+              var labels = gl.issueBoards.BoardsStore.detail.issue.labels;
+              labels = labels.filter(function (selectedLabel) {
+                return selectedLabel.id !== label.id;
+              });
+              gl.issueBoards.BoardsStore.detail.issue.labels = labels;
             }
-            else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-              if ($el.hasClass('is-active')) {
-                gl.issueBoards.BoardsStore.detail.issue.labels.push(new ListLabel({
-                  id: label.id,
-                  title: label.title,
-                  color: label.color[0],
-                  textColor: '#fff'
-                }));
-              }
-              else {
-                var labels = gl.issueBoards.BoardsStore.detail.issue.labels;
-                labels = labels.filter(function (selectedLabel) {
-                  return selectedLabel.id !== label.id;
-                });
-                gl.issueBoards.BoardsStore.detail.issue.labels = labels;
-              }
 
-              $loading.fadeIn();
+            $loading.fadeIn();
+
+            gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
+              .then(fadeOutLoader)
+              .catch(fadeOutLoader);
+          }
+          else {
+            if ($dropdown.hasClass('js-multiselect')) {
 
-              gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
-                .then(fadeOutLoader)
-                .catch(fadeOutLoader);
             }
             else {
-              if ($dropdown.hasClass('js-multiselect')) {
-
-              }
-              else {
-                return saveLabelData();
-              }
+              return saveLabelData();
             }
-          },
-        });
-
-        // Set dropdown data
-        _this.setOriginalDropdownData($dropdownContainer, $dropdown);
+          }
+        },
       });
-      this.bindEvents();
-    }
 
-    LabelsSelect.prototype.bindEvents = function() {
-      return $('body').on('change', '.selected_issue', this.onSelectCheckboxIssue);
-    };
-
-    LabelsSelect.prototype.onSelectCheckboxIssue = function() {
-      if ($('.selected_issue:checked').length) {
-        return;
+      // Set dropdown data
+      _this.setOriginalDropdownData($dropdownContainer, $dropdown);
+    });
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    return $('body').on('change', '.selected_issue', this.onSelectCheckboxIssue);
+  }
+  // eslint-disable-next-line class-methods-use-this
+  onSelectCheckboxIssue() {
+    if ($('.selected_issue:checked').length) {
+      return;
+    }
+    return $('.issues-bulk-update .labels-filter .dropdown-toggle-text').text('Label');
+  }
+  // eslint-disable-next-line class-methods-use-this
+  enableBulkLabelDropdown() {
+    IssuableBulkUpdateActions.willUpdateLabels = true;
+  }
+  // eslint-disable-next-line class-methods-use-this
+  setDropdownData($dropdown, isMarking, value) {
+    var i, markedIds, unmarkedIds, indeterminateIds;
+
+    markedIds = $dropdown.data('marked') || [];
+    unmarkedIds = $dropdown.data('unmarked') || [];
+    indeterminateIds = $dropdown.data('indeterminate') || [];
+
+    if (isMarking) {
+      markedIds.push(value);
+
+      i = indeterminateIds.indexOf(value);
+      if (i > -1) {
+        indeterminateIds.splice(i, 1);
       }
-      return $('.issues-bulk-update .labels-filter .dropdown-toggle-text').text('Label');
-    };
 
-    LabelsSelect.prototype.enableBulkLabelDropdown = function() {
-      IssuableBulkUpdateActions.willUpdateLabels = true;
-    };
-
-    LabelsSelect.prototype.setDropdownData = function($dropdown, isMarking, value) {
-      var i, markedIds, unmarkedIds, indeterminateIds;
-
-      markedIds = $dropdown.data('marked') || [];
-      unmarkedIds = $dropdown.data('unmarked') || [];
-      indeterminateIds = $dropdown.data('indeterminate') || [];
-
-      if (isMarking) {
-        markedIds.push(value);
-
-        i = indeterminateIds.indexOf(value);
-        if (i > -1) {
-          indeterminateIds.splice(i, 1);
-        }
-
-        i = unmarkedIds.indexOf(value);
-        if (i > -1) {
-          unmarkedIds.splice(i, 1);
-        }
-      } else {
-        // If marked item (not common) is unmarked
-        i = markedIds.indexOf(value);
-        if (i > -1) {
-          markedIds.splice(i, 1);
-        }
-
-        // If an indeterminate item is being unmarked
-        if (IssuableBulkUpdateActions.getOriginalIndeterminateIds().indexOf(value) > -1) {
-          unmarkedIds.push(value);
-        }
-
-        // If a marked item is being unmarked
-        // (a marked item could also be a label that is present in all selection)
-        if (IssuableBulkUpdateActions.getOriginalCommonIds().indexOf(value) > -1) {
-          unmarkedIds.push(value);
-        }
+      i = unmarkedIds.indexOf(value);
+      if (i > -1) {
+        unmarkedIds.splice(i, 1);
+      }
+    } else {
+      // If marked item (not common) is unmarked
+      i = markedIds.indexOf(value);
+      if (i > -1) {
+        markedIds.splice(i, 1);
       }
 
-      $dropdown.data('marked', markedIds);
-      $dropdown.data('unmarked', unmarkedIds);
-      $dropdown.data('indeterminate', indeterminateIds);
-    };
+      // If an indeterminate item is being unmarked
+      if (IssuableBulkUpdateActions.getOriginalIndeterminateIds().indexOf(value) > -1) {
+        unmarkedIds.push(value);
+      }
 
-    LabelsSelect.prototype.setOriginalDropdownData = function($container, $dropdown) {
-      var labels = [];
-      $container.find('[name="label_name[]"]').map(function() {
-        return labels.push(this.value);
-      });
-      $dropdown.data('marked', labels);
-    };
+      // If a marked item is being unmarked
+      // (a marked item could also be a label that is present in all selection)
+      if (IssuableBulkUpdateActions.getOriginalCommonIds().indexOf(value) > -1) {
+        unmarkedIds.push(value);
+      }
+    }
 
-    return LabelsSelect;
-  })();
-}).call(window);
+    $dropdown.data('marked', markedIds);
+    $dropdown.data('unmarked', unmarkedIds);
+    $dropdown.data('indeterminate', indeterminateIds);
+  }
+  // eslint-disable-next-line class-methods-use-this
+  setOriginalDropdownData($container, $dropdown) {
+    const labels = [];
+    $container.find('[name="label_name[]"]').map(function() {
+      return labels.push(this.value);
+    });
+    $dropdown.data('marked', labels);
+  }
+}
diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index d064a2c0024..a6f82b247e2 100644
--- a/app/assets/javascripts/layout_nav.js
+++ b/app/assets/javascripts/layout_nav.js
@@ -1,7 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */
 import _ from 'underscore';
 import Cookies from 'js-cookie';
-import NewNavSidebar from './new_sidebar';
+import ContextualSidebar from './contextual_sidebar';
 import initFlyOutNav from './fly_out_nav';
 
 (function() {
@@ -51,8 +51,8 @@ import initFlyOutNav from './fly_out_nav';
   });
 
   $(() => {
-    const newNavSidebar = new NewNavSidebar();
-    newNavSidebar.bindEvents();
+    const contextualSidebar = new ContextualSidebar();
+    contextualSidebar.bindEvents();
 
     initFlyOutNav();
   });
diff --git a/app/assets/javascripts/lazy_loader.js b/app/assets/javascripts/lazy_loader.js
index 3d64b121fa7..dbbf1637a47 100644
--- a/app/assets/javascripts/lazy_loader.js
+++ b/app/assets/javascripts/lazy_loader.js
@@ -1,5 +1,3 @@
-/* eslint-disable one-export, one-var, one-var-declaration-per-line */
-
 import _ from 'underscore';
 
 export const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
@@ -21,7 +19,10 @@ export default class LazyLoader {
   }
   searchLazyImages() {
     this.lazyImages = [].slice.call(document.querySelectorAll('.lazy'));
-    this.checkElementsInView();
+
+    if (this.lazyImages.length) {
+      this.checkElementsInView();
+    }
   }
   startContentObserver() {
     const contentNode = document.querySelector(this.observerNode) || document.querySelector('body');
@@ -45,15 +46,13 @@ export default class LazyLoader {
   checkElementsInView() {
     const scrollTop = pageYOffset;
     const visHeight = scrollTop + innerHeight + SCROLL_THRESHOLD;
-    let imgBoundRect, imgTop, imgBound;
 
     // Loading Images which are in the current viewport or close to them
     this.lazyImages = this.lazyImages.filter((selectedImage) => {
       if (selectedImage.getAttribute('data-src')) {
-        imgBoundRect = selectedImage.getBoundingClientRect();
-
-        imgTop = scrollTop + imgBoundRect.top;
-        imgBound = imgTop + imgBoundRect.height;
+        const imgBoundRect = selectedImage.getBoundingClientRect();
+        const imgTop = scrollTop + imgBoundRect.top;
+        const imgBound = imgTop + imgBoundRect.height;
 
         if (scrollTop < imgBound && visHeight > imgTop) {
           LazyLoader.loadImage(selectedImage);
diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js
index 64db42701ce..098afcfa1b4 100644
--- a/app/assets/javascripts/lib/utils/sticky.js
+++ b/app/assets/javascripts/lib/utils/sticky.js
@@ -28,14 +28,10 @@ export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
   }
 };
 
-export default (el, insertPlaceholder = true) => {
+export default (el, stickyTop, insertPlaceholder = true) => {
   if (!el) return;
 
-  const computedStyle = window.getComputedStyle(el);
-
-  if (!/sticky/.test(computedStyle.position)) return;
-
-  const stickyTop = parseInt(computedStyle.top, 10);
+  if (typeof CSS === 'undefined' || !(CSS.supports('(position: -webkit-sticky) or (position: sticky)'))) return;
 
   document.addEventListener('scroll', () => isSticky(el, window.scrollY, stickyTop, insertPlaceholder), {
     passive: true,
diff --git a/app/assets/javascripts/logo.js b/app/assets/javascripts/logo.js
index 729baa2e1a7..3688a57937e 100644
--- a/app/assets/javascripts/logo.js
+++ b/app/assets/javascripts/logo.js
@@ -1,7 +1,5 @@
-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback */
-
-(function() {
-  window.addEventListener('beforeunload', function() {
+export default function initLogoAnimation() {
+  window.addEventListener('beforeunload', () => {
     $('.tanuki-logo').addClass('animate');
   });
-}).call(window);
+}
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 52715fba43f..9117f033c9f 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -12,7 +12,6 @@ import svg4everybody from 'svg4everybody';
 // libraries with import side-effects
 import 'mousetrap';
 import 'mousetrap/plugins/pause/mousetrap-pause';
-import 'vendor/fuzzaldrin-plus';
 
 // expose common libraries as globals (TODO: remove these)
 window.jQuery = jQuery;
@@ -41,7 +40,6 @@ import './behaviors/';
 import './activities';
 import './admin';
 import './aside';
-import './autosave';
 import loadAwardsHandler from './awards_handler';
 import bp from './breakpoints';
 import './commits';
@@ -55,19 +53,12 @@ import './gl_dropdown';
 import './gl_field_error';
 import './gl_field_errors';
 import './gl_form';
-import './groups_select';
-import './header';
-import './importer_status';
-import './issuable_index';
-import './issuable_context';
-import './issuable_form';
-import './issue';
-import './issue_status_select';
-import './labels_select';
+import initTodoToggle from './header';
+import initImporterStatus from './importer_status';
 import './layout_nav';
 import LazyLoader from './lazy_loader';
 import './line_highlighter';
-import './logo';
+import initLogoAnimation from './logo';
 import './merge_request';
 import './merge_request_tabs';
 import './milestone';
@@ -140,6 +131,9 @@ $(function () {
   var fitSidebarForSize;
 
   initBreadcrumbs();
+  initImporterStatus();
+  initTodoToggle();
+  initLogoAnimation();
 
   // Set the default path for all cookies to GitLab's root directory
   Cookies.defaults.path = gon.relative_url_root || '/';
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 789ccf48190..54c1b7a268e 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -67,6 +67,10 @@ import Diff from './diff';
   class MergeRequestTabs {
 
     constructor({ action, setUrl, stubLocation } = {}) {
+      const mergeRequestTabs = document.querySelector('.js-tabs-affix');
+      const navbar = document.querySelector('.navbar-gitlab');
+      const paddingTop = 16;
+
       this.diffsLoaded = false;
       this.pipelinesLoaded = false;
       this.commitsLoaded = false;
@@ -76,6 +80,11 @@ import Diff from './diff';
       this.setCurrentAction = this.setCurrentAction.bind(this);
       this.tabShown = this.tabShown.bind(this);
       this.showTab = this.showTab.bind(this);
+      this.stickyTop = navbar ? navbar.offsetHeight - paddingTop : 0;
+
+      if (mergeRequestTabs) {
+        this.stickyTop += mergeRequestTabs.offsetHeight;
+      }
 
       if (stubLocation) {
         location = stubLocation;
@@ -278,7 +287,7 @@ import Diff from './diff';
           const $container = $('#diffs');
           $container.html(data.html);
 
-          initChangesDropdown();
+          initChangesDropdown(this.stickyTop);
 
           if (typeof gl.diffNotesCompileComponents !== 'undefined') {
             gl.diffNotesCompileComponents();
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 5a6868be444..705bec23b53 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -5,14 +5,14 @@ default-case, prefer-template, consistent-return, no-alert, no-return-assign,
 no-param-reassign, prefer-arrow-callback, no-else-return, comma-dangle, no-new,
 brace-style, no-lonely-if, vars-on-top, no-unused-vars, no-sequences, no-shadow,
 newline-per-chained-call, no-useless-escape, class-methods-use-this */
-/* global Autosave */
+
 /* global ResolveService */
 /* global mrRefreshWidgetUrl */
 
 import $ from 'jquery';
 import _ from 'underscore';
 import Cookies from 'js-cookie';
-import autosize from 'vendor/autosize';
+import Autosize from 'autosize';
 import 'vendor/jquery.caret'; // required by jquery.atwho
 import 'vendor/jquery.atwho';
 import AjaxCache from '~/lib/utils/ajax_cache';
@@ -20,12 +20,12 @@ import Flash from './flash';
 import CommentTypeToggle from './comment_type_toggle';
 import GLForm from './gl_form';
 import loadAwardsHandler from './awards_handler';
-import './autosave';
+import Autosave from './autosave';
 import TaskList from './task_list';
 import { ajaxPost, isInViewport, getPagePath, scrollToElement, isMetaKey } from './lib/utils/common_utils';
 import imageDiffHelper from './image_diff/helpers/index';
 
-window.autosize = autosize;
+window.autosize = Autosize;
 
 function normalizeNewlines(str) {
   return str.replace(/\r\n/g, '\n');
diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index 2ce52e4538a..db8f85759b2 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -1,10 +1,9 @@
 <script>
-  /* global Autosave */
   import { mapActions, mapGetters } from 'vuex';
   import _ from 'underscore';
-  import autosize from 'vendor/autosize';
+  import Autosize from 'autosize';
   import Flash from '../../flash';
-  import '../../autosave';
+  import Autosave from '../../autosave';
   import TaskList from '../../task_list';
   import * as constants from '../constants';
   import eventHub from '../event_hub';
@@ -220,7 +219,7 @@
       },
       resizeTextarea() {
         this.$nextTick(() => {
-          autosize.update(this.$refs.textarea);
+          Autosize.update(this.$refs.textarea);
         });
       },
     },
diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index baf43190d9e..0f13221b81e 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -9,8 +9,8 @@
   import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
   import issueNoteEditedText from './issue_note_edited_text.vue';
   import issueNoteForm from './issue_note_form.vue';
-  import placeholderNote from './issue_placeholder_note.vue';
-  import placeholderSystemNote from './issue_placeholder_system_note.vue';
+  import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
+  import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
   import autosave from '../mixins/autosave';
 
   export default {
diff --git a/app/assets/javascripts/notes/components/issue_notes_app.vue b/app/assets/javascripts/notes/components/issue_notes_app.vue
index aecd1f957e5..5c9119644e3 100644
--- a/app/assets/javascripts/notes/components/issue_notes_app.vue
+++ b/app/assets/javascripts/notes/components/issue_notes_app.vue
@@ -5,10 +5,10 @@
   import * as constants from '../constants';
   import issueNote from './issue_note.vue';
   import issueDiscussion from './issue_discussion.vue';
-  import issueSystemNote from './issue_system_note.vue';
+  import systemNote from '../../vue_shared/components/notes/system_note.vue';
   import issueCommentForm from './issue_comment_form.vue';
-  import placeholderNote from './issue_placeholder_note.vue';
-  import placeholderSystemNote from './issue_placeholder_system_note.vue';
+  import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
+  import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
   export default {
@@ -37,7 +37,7 @@
     components: {
       issueNote,
       issueDiscussion,
-      issueSystemNote,
+      systemNote,
       issueCommentForm,
       loadingIcon,
       placeholderNote,
@@ -68,7 +68,7 @@
           }
           return placeholderNote;
         } else if (note.individual_note) {
-          return note.notes[0].system ? issueSystemNote : issueNote;
+          return note.notes[0].system ? systemNote : issueNote;
         }
 
         return issueDiscussion;
diff --git a/app/assets/javascripts/notes/mixins/autosave.js b/app/assets/javascripts/notes/mixins/autosave.js
index 5843b97f225..a008171beda 100644
--- a/app/assets/javascripts/notes/mixins/autosave.js
+++ b/app/assets/javascripts/notes/mixins/autosave.js
@@ -1,5 +1,4 @@
-/* globals Autosave */
-import '../../autosave';
+import Autosave from '../../autosave';
 
 export default {
   methods: {
diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index 11f9754780d..19682b20a4a 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -1,5 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, consistent-return, one-var, one-var-declaration-per-line, no-cond-assign, max-len, object-shorthand, no-param-reassign, comma-dangle, prefer-template, no-unused-vars, no-return-assign */
-/* global fuzzaldrinPlus */
+
+import fuzzaldrinPlus from 'fuzzaldrin-plus';
 
 (function() {
   this.ProjectFindFile = (function() {
diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js
index fb01390f91c..bffc85e6315 100644
--- a/app/assets/javascripts/project_select.js
+++ b/app/assets/javascripts/project_select.js
@@ -2,13 +2,15 @@
 import Api from './api';
 import ProjectSelectComboButton from './project_select_combo_button';
 
-(function() {
-  this.ProjectSelect = (function() {
+(function () {
+  this.ProjectSelect = (function () {
     function ProjectSelect() {
       $('.ajax-project-select').each(function(i, select) {
         var placeholder;
+        const simpleFilter = $(select).data('simple-filter') || false;
         this.groupId = $(select).data('group-id');
         this.includeGroups = $(select).data('include-groups');
+        this.allProjects = $(select).data('all-projects') || false;
         this.orderBy = $(select).data('order-by') || 'id';
         this.withIssuesEnabled = $(select).data('with-issues-enabled');
         this.withMergeRequestsEnabled = $(select).data('with-merge-requests-enabled');
@@ -21,10 +23,10 @@ import ProjectSelectComboButton from './project_select_combo_button';
         $(select).select2({
           placeholder: placeholder,
           minimumInputLength: 0,
-          query: (function(_this) {
-            return function(query) {
+          query: (function (_this) {
+            return function (query) {
               var finalCallback, projectsCallback;
-              finalCallback = function(projects) {
+              finalCallback = function (projects) {
                 var data;
                 data = {
                   results: projects
@@ -32,9 +34,9 @@ import ProjectSelectComboButton from './project_select_combo_button';
                 return query.callback(data);
               };
               if (_this.includeGroups) {
-                projectsCallback = function(projects) {
+                projectsCallback = function (projects) {
                   var groupsCallback;
-                  groupsCallback = function(groups) {
+                  groupsCallback = function (groups) {
                     var data;
                     data = groups.concat(projects);
                     return finalCallback(data);
@@ -50,23 +52,25 @@ import ProjectSelectComboButton from './project_select_combo_button';
                 return Api.projects(query.term, {
                   order_by: _this.orderBy,
                   with_issues_enabled: _this.withIssuesEnabled,
-                  with_merge_requests_enabled: _this.withMergeRequestsEnabled
+                  with_merge_requests_enabled: _this.withMergeRequestsEnabled,
+                  membership: !_this.allProjects,
                 }, projectsCallback);
               }
             };
           })(this),
           id: function(project) {
+            if (simpleFilter) return project.id;
             return JSON.stringify({
               name: project.name,
               url: project.web_url,
             });
           },
-          text: function(project) {
+          text: function (project) {
             return project.name_with_namespace || project.name;
           },
           dropdownCssClass: "ajax-project-dropdown"
         });
-
+        if (simpleFilter) return select;
         return new ProjectSelectComboButton(select);
       });
     }
diff --git a/app/assets/javascripts/repo/components/new_branch_form.vue b/app/assets/javascripts/repo/components/new_branch_form.vue
index eac43e692b0..ba7090e4a9d 100644
--- a/app/assets/javascripts/repo/components/new_branch_form.vue
+++ b/app/assets/javascripts/repo/components/new_branch_form.vue
@@ -1,18 +1,12 @@
 <script>
+  import { mapState, mapActions } from 'vuex';
   import flash, { hideFlash } from '../../flash';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import eventHub from '../event_hub';
 
   export default {
     components: {
       loadingIcon,
     },
-    props: {
-      currentBranch: {
-        type: String,
-        required: true,
-      },
-    },
     data() {
       return {
         branchName: '',
@@ -20,11 +14,17 @@
       };
     },
     computed: {
+      ...mapState([
+        'currentBranch',
+      ]),
       btnDisabled() {
         return this.loading || this.branchName === '';
       },
     },
     methods: {
+      ...mapActions([
+        'createNewBranch',
+      ]),
       toggleDropdown() {
         this.$dropdown.dropdown('toggle');
       },
@@ -38,19 +38,21 @@
           hideFlash(flashEl, false);
         }
 
-        eventHub.$emit('createNewBranch', this.branchName);
-      },
-      showErrorMessage(message) {
-        this.loading = false;
-        flash(message, 'alert', this.$el);
-      },
-      createdNewBranch(newBranchName) {
-        this.loading = false;
-        this.branchName = '';
+        this.createNewBranch(this.branchName)
+          .then(() => {
+            this.loading = false;
+            this.branchName = '';
 
-        if (this.dropdownText) {
-          this.dropdownText.textContent = newBranchName;
-        }
+            if (this.dropdownText) {
+              this.dropdownText.textContent = this.currentBranch;
+            }
+
+            this.toggleDropdown();
+          })
+          .catch(res => res.json().then((data) => {
+            this.loading = false;
+            flash(data.message, 'alert', this.$el);
+          }));
       },
     },
     created() {
@@ -59,15 +61,6 @@
 
       // text element is outside Vue app
       this.dropdownText = document.querySelector('.project-refs-form .dropdown-toggle-text');
-
-      eventHub.$on('createNewBranchSuccess', this.createdNewBranch);
-      eventHub.$on('createNewBranchError', this.showErrorMessage);
-      eventHub.$on('toggleNewBranchDropdown', this.toggleDropdown);
-    },
-    destroyed() {
-      eventHub.$off('createNewBranchSuccess', this.createdNewBranch);
-      eventHub.$off('toggleNewBranchDropdown', this.toggleDropdown);
-      eventHub.$off('createNewBranchError', this.showErrorMessage);
     },
   };
 </script>
diff --git a/app/assets/javascripts/repo/components/new_dropdown/index.vue b/app/assets/javascripts/repo/components/new_dropdown/index.vue
new file mode 100644
index 00000000000..a5ee4f71281
--- /dev/null
+++ b/app/assets/javascripts/repo/components/new_dropdown/index.vue
@@ -0,0 +1,84 @@
+<script>
+  import { mapState } from 'vuex';
+  import newModal from './modal.vue';
+  import upload from './upload.vue';
+
+  export default {
+    components: {
+      newModal,
+      upload,
+    },
+    data() {
+      return {
+        openModal: false,
+        modalType: '',
+      };
+    },
+    computed: {
+      ...mapState([
+        'path',
+      ]),
+    },
+    methods: {
+      createNewItem(type) {
+        this.modalType = type;
+        this.toggleModalOpen();
+      },
+      toggleModalOpen() {
+        this.openModal = !this.openModal;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div>
+    <ul class="breadcrumb repo-breadcrumb">
+      <li class="dropdown">
+        <button
+          type="button"
+          class="btn btn-default dropdown-toggle add-to-tree"
+          data-toggle="dropdown"
+          aria-label="Create new file or directory"
+        >
+          <i
+            class="fa fa-plus"
+            aria-hidden="true"
+          >
+          </i>
+        </button>
+        <ul class="dropdown-menu">
+          <li>
+            <a
+              href="#"
+              role="button"
+              @click.prevent="createNewItem('blob')"
+            >
+              {{ __('New file') }}
+            </a>
+          </li>
+          <li>
+            <upload
+              :path="path"
+            />
+          </li>
+          <li>
+            <a
+              href="#"
+              role="button"
+              @click.prevent="createNewItem('tree')"
+            >
+              {{ __('New directory') }}
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <new-modal
+      v-if="openModal"
+      :type="modalType"
+      :path="path"
+      @toggle="toggleModalOpen"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
new file mode 100644
index 00000000000..ac1f613bb71
--- /dev/null
+++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue
@@ -0,0 +1,98 @@
+<script>
+  import { mapActions } from 'vuex';
+  import { __ } from '../../../locale';
+  import popupDialog from '../../../vue_shared/components/popup_dialog.vue';
+
+  export default {
+    props: {
+      type: {
+        type: String,
+        required: true,
+      },
+      path: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        entryName: this.path !== '' ? `${this.path}/` : '',
+      };
+    },
+    components: {
+      popupDialog,
+    },
+    methods: {
+      ...mapActions([
+        'createTempEntry',
+      ]),
+      createEntryInStore() {
+        this.createTempEntry({
+          name: this.entryName.replace(new RegExp(`^${this.path}/`), ''),
+          type: this.type,
+        });
+
+        this.toggleModalOpen();
+      },
+      toggleModalOpen() {
+        this.$emit('toggle');
+      },
+    },
+    computed: {
+      modalTitle() {
+        if (this.type === 'tree') {
+          return __('Create new directory');
+        }
+
+        return __('Create new file');
+      },
+      buttonLabel() {
+        if (this.type === 'tree') {
+          return __('Create directory');
+        }
+
+        return __('Create file');
+      },
+      formLabelName() {
+        if (this.type === 'tree') {
+          return __('Directory name');
+        }
+
+        return __('File name');
+      },
+    },
+    mounted() {
+      this.$refs.fieldName.focus();
+    },
+  };
+</script>
+
+<template>
+  <popup-dialog
+    :title="modalTitle"
+    :primary-button-label="buttonLabel"
+    kind="success"
+    @toggle="toggleModalOpen"
+    @submit="createEntryInStore"
+  >
+    <form
+      class="form-horizontal"
+      slot="body"
+      @submit.prevent="createEntryInStore"
+    >
+      <fieldset class="form-group append-bottom-0">
+        <label class="label-light col-sm-3">
+          {{ formLabelName }}
+        </label>
+        <div class="col-sm-9">
+          <input
+            type="text"
+            class="form-control"
+            v-model="entryName"
+            ref="fieldName"
+          />
+        </div>
+      </fieldset>
+    </form>
+  </popup-dialog>
+</template>
diff --git a/app/assets/javascripts/repo/components/new_dropdown/upload.vue b/app/assets/javascripts/repo/components/new_dropdown/upload.vue
new file mode 100644
index 00000000000..14ad32f4ae0
--- /dev/null
+++ b/app/assets/javascripts/repo/components/new_dropdown/upload.vue
@@ -0,0 +1,68 @@
+<script>
+  import { mapActions } from 'vuex';
+
+  export default {
+    props: {
+      path: {
+        type: String,
+        required: true,
+      },
+    },
+    methods: {
+      ...mapActions([
+        'createTempEntry',
+      ]),
+      createFile(target, file, isText) {
+        const { name } = file;
+        let { result } = target;
+
+        if (!isText) {
+          result = result.split('base64,')[1];
+        }
+
+        this.createTempEntry({
+          name,
+          type: 'blob',
+          content: result,
+          base64: !isText,
+        });
+      },
+      readFile(file) {
+        const reader = new FileReader();
+        const isText = file.type.match(/text.*/) !== null;
+
+        reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true });
+
+        if (isText) {
+          reader.readAsText(file);
+        } else {
+          reader.readAsDataURL(file);
+        }
+      },
+      openFile() {
+        Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
+      },
+    },
+    mounted() {
+      this.$refs.fileUpload.addEventListener('change', this.openFile);
+    },
+    beforeDestroy() {
+      this.$refs.fileUpload.removeEventListener('change', this.openFile);
+    },
+  };
+</script>
+
+<template>
+  <label
+    role="button"
+    class="menu-item"
+  >
+    {{ __('Upload file') }}
+    <input
+      id="file-upload"
+      type="file"
+      class="hidden"
+      ref="fileUpload"
+    />
+  </label>
+</template>
diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index 6310bdb3270..98117802016 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -1,98 +1,59 @@
 <script>
+import { mapState, mapGetters } from 'vuex';
 import RepoSidebar from './repo_sidebar.vue';
 import RepoCommitSection from './repo_commit_section.vue';
 import RepoTabs from './repo_tabs.vue';
 import RepoFileButtons from './repo_file_buttons.vue';
 import RepoPreview from './repo_preview.vue';
-import RepoMixin from '../mixins/repo_mixin';
-import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
-import Store from '../stores/repo_store';
-import Helper from '../helpers/repo_helper';
-import Service from '../services/repo_service';
-import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
-import eventHub from '../event_hub';
+import repoEditor from './repo_editor.vue';
 
 export default {
-  data() {
-    return Store;
+  computed: {
+    ...mapState([
+      'currentBlobView',
+    ]),
+    ...mapGetters([
+      'isCollapsed',
+      'changedFiles',
+    ]),
   },
-  mixins: [RepoMixin],
   components: {
     RepoSidebar,
     RepoTabs,
     RepoFileButtons,
-    'repo-editor': MonacoLoaderHelper.repoEditorLoader,
+    repoEditor,
     RepoCommitSection,
-    PopupDialog,
     RepoPreview,
   },
-  created() {
-    eventHub.$on('createNewBranch', this.createNewBranch);
-  },
   mounted() {
-    Helper.getContent().catch(Helper.loadingError);
-  },
-  destroyed() {
-    eventHub.$off('createNewBranch', this.createNewBranch);
-  },
-  methods: {
-    getCurrentLocation() {
-      return location.href;
-    },
-    toggleDialogOpen(toggle) {
-      this.dialog.open = toggle;
-    },
-
-    dialogSubmitted(status) {
-      this.toggleDialogOpen(false);
-      this.dialog.status = status;
-    },
-    toggleBlobView: Store.toggleBlobView,
-    createNewBranch(branch) {
-      Service.createBranch({
-        branch,
-        ref: Store.currentBranch,
-      }).then((res) => {
-        const newBranchName = res.data.name;
-        const newUrl = this.getCurrentLocation().replace(Store.currentBranch, newBranchName);
-
-        Store.currentBranch = newBranchName;
-
-        history.pushState({ key: Helper.key }, '', newUrl);
+    const returnValue = 'Are you sure you want to lose unsaved changes?';
+    window.onbeforeunload = (e) => {
+      if (!this.changedFiles.length) return undefined;
 
-        eventHub.$emit('createNewBranchSuccess', newBranchName);
-        eventHub.$emit('toggleNewBranchDropdown');
-      }).catch((err) => {
-        eventHub.$emit('createNewBranchError', err.response.data.message);
+      Object.assign(e, {
+        returnValue,
       });
-    },
+      return returnValue;
+    };
   },
 };
 </script>
 
 <template>
   <div class="repository-view">
-    <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isMini}">
+    <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isCollapsed}">
       <repo-sidebar/>
-      <div v-if="isMini"
-      class="panel-right"
-      :class="{'edit-mode': editMode}">
+      <div
+        v-if="isCollapsed"
+        class="panel-right"
+      >
         <repo-tabs/>
         <component
           :is="currentBlobView"
-          class="blob-viewer-container"/>
+        />
         <repo-file-buttons/>
       </div>
     </div>
-    <repo-commit-section/>
-    <popup-dialog
-      v-show="dialog.open"
-      :primary-button-label="__('Discard changes')"
-      kind="warning"
-      :title="__('Are you sure?')"
-      :text="__('Are you sure you want to discard your changes?')"
-      @toggle="toggleDialogOpen"
-      @submit="dialogSubmitted"
-    />
+    <repo-commit-section v-if="changedFiles.length" />
   </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index 185cd90ac06..377e3d65348 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/components/repo_commit_section.vue
@@ -1,139 +1,100 @@
 <script>
-import Flash from '../../flash';
-import Store from '../stores/repo_store';
-import RepoMixin from '../mixins/repo_mixin';
-import Service from '../services/repo_service';
+import { mapGetters, mapState, mapActions } from 'vuex';
 import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
-import { visitUrl } from '../../lib/utils/url_utility';
+import { n__ } from '../../locale';
 
 export default {
-  mixins: [RepoMixin],
-
-  data() {
-    return Store;
-  },
-
   components: {
     PopupDialog,
   },
-
+  data() {
+    return {
+      showNewBranchDialog: false,
+      submitCommitsLoading: false,
+      startNewMR: false,
+      commitMessage: '',
+    };
+  },
   computed: {
-    showCommitable() {
-      return this.isCommitable && this.changedFiles.length;
-    },
-
-    branchPaths() {
-      return this.changedFiles.map(f => f.path);
-    },
-
-    cantCommitYet() {
+    ...mapState([
+      'currentBranch',
+    ]),
+    ...mapGetters([
+      'changedFiles',
+    ]),
+    commitButtonDisabled() {
       return !this.commitMessage || this.submitCommitsLoading;
     },
-
-    filePluralize() {
-      return this.changedFiles.length > 1 ? 'files' : 'file';
+    commitButtonText() {
+      return n__('Commit %d file', 'Commit %d files', this.changedFiles.length);
     },
   },
-
   methods: {
-    commitToNewBranch(status) {
-      if (status) {
-        this.showNewBranchDialog = false;
-        this.tryCommit(null, true, true);
-      } else {
-        // reset the state
-      }
-    },
+    ...mapActions([
+      'checkCommitStatus',
+      'commitChanges',
+      'getTreeData',
+    ]),
+    makeCommit(newBranch = false) {
+      const createNewBranch = newBranch || this.startNewMR;
 
-    makeCommit(newBranch) {
-      // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
-      const commitMessage = this.commitMessage;
-      const actions = this.changedFiles.map(f => ({
-        action: 'update',
-        file_path: f.path,
-        content: f.newContent,
-      }));
-      const branch = newBranch ? `${this.currentBranch}-${this.currentShortHash}` : this.currentBranch;
       const payload = {
-        branch,
-        commit_message: commitMessage,
-        actions,
+        branch: createNewBranch ? `${this.currentBranch}-${new Date().getTime().toString()}` : this.currentBranch,
+        commit_message: this.commitMessage,
+        actions: this.changedFiles.map(f => ({
+          action: f.tempFile ? 'create' : 'update',
+          file_path: f.path,
+          content: f.content,
+          encoding: f.base64 ? 'base64' : 'text',
+        })),
+        start_branch: createNewBranch ? this.currentBranch : undefined,
       };
-      if (newBranch) {
-        payload.start_branch = this.currentBranch;
-      }
+
+      this.showNewBranchDialog = false;
       this.submitCommitsLoading = true;
-      Service.commitFiles(payload)
+
+      this.commitChanges({ payload, newMr: this.startNewMR })
         .then(() => {
-          this.resetCommitState();
-          if (this.startNewMR) {
-            this.redirectToNewMr(branch);
-          } else {
-            this.redirectToBranch(branch);
-          }
+          this.submitCommitsLoading = false;
+          this.getTreeData();
         })
         .catch(() => {
-          Flash('An error occurred while committing your changes');
+          this.submitCommitsLoading = false;
         });
     },
+    tryCommit() {
+      this.submitCommitsLoading = true;
 
-    tryCommit(e, skipBranchCheck = false, newBranch = false) {
-      if (skipBranchCheck) {
-        this.makeCommit(newBranch);
-      } else {
-        Store.setBranchHash()
-          .then(() => {
-            if (Store.branchChanged) {
-              Store.showNewBranchDialog = true;
-              return;
-            }
-            this.makeCommit(newBranch);
-          })
-          .catch(() => {
-            Flash('An error occurred while committing your changes');
-          });
-      }
-    },
-
-    redirectToNewMr(branch) {
-      visitUrl(this.newMrTemplateUrl.replace('{{source_branch}}', branch));
-    },
-
-    redirectToBranch(branch) {
-      visitUrl(this.customBranchURL.replace('{{branch}}', branch));
-    },
-
-    resetCommitState() {
-      this.submitCommitsLoading = false;
-      this.openedFiles = this.openedFiles.map((file) => {
-        const f = file;
-        f.changed = false;
-        return f;
-      });
-      this.changedFiles = [];
-      this.commitMessage = '';
-      this.editMode = false;
-      window.scrollTo(0, 0);
+      this.checkCommitStatus()
+        .then((branchChanged) => {
+          if (branchChanged) {
+            this.showNewBranchDialog = true;
+          } else {
+            this.makeCommit();
+          }
+        })
+        .catch(() => {
+          this.submitCommitsLoading = false;
+        });
     },
   },
 };
 </script>
 
 <template>
-<div
-  v-if="showCommitable"
-  id="commit-area">
+<div id="commit-area">
   <popup-dialog
     v-if="showNewBranchDialog"
     :primary-button-label="__('Create new branch')"
     kind="primary"
     :title="__('Branch has changed')"
     :text="__('This branch has changed since you started editing. Would you like to create a new branch?')"
-    @submit="commitToNewBranch"
+    @toggle="showNewBranchDialog = false"
+    @submit="makeCommit(true)"
   />
   <form
     class="form-horizontal"
-    @submit.prevent="tryCommit">
+    @submit.prevent="tryCommit()">
     <fieldset>
       <div class="form-group">
         <label class="col-md-4 control-label staged-files">
@@ -142,10 +103,10 @@ export default {
         <div class="col-md-6">
           <ul class="list-unstyled changed-files">
             <li
-              v-for="branchPath in branchPaths"
-              :key="branchPath">
+              v-for="(file, index) in changedFiles"
+              :key="index">
               <span class="help-block">
-                {{branchPath}}
+                {{ file.path }}
               </span>
             </li>
           </ul>
@@ -180,9 +141,8 @@ export default {
       </div>
       <div class="col-md-offset-4 col-md-6">
         <button
-          ref="submitCommit"
           type="submit"
-          :disabled="cantCommitYet"
+          :disabled="commitButtonDisabled"
           class="btn btn-success">
           <i
             v-if="submitCommitsLoading"
@@ -191,7 +151,7 @@ export default {
             aria-label="loading">
           </i>
           <span class="commit-summary">
-            Commit {{changedFiles.length}} {{filePluralize}}
+            {{ commitButtonText }}
           </span>
         </button>
       </div>
diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue
index e6e8b2e5205..6c1bb4b8566 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -1,50 +1,57 @@
 <script>
-import Store from '../stores/repo_store';
-import RepoMixin from '../mixins/repo_mixin';
+import { mapGetters, mapActions, mapState } from 'vuex';
+import popupDialog from '../../vue_shared/components/popup_dialog.vue';
 
 export default {
-  data() {
-    return Store;
+  components: {
+    popupDialog,
   },
-  mixins: [RepoMixin],
   computed: {
+    ...mapState([
+      'editMode',
+      'discardPopupOpen',
+    ]),
+    ...mapGetters([
+      'canEditFile',
+    ]),
     buttonLabel() {
       return this.editMode ? this.__('Cancel edit') : this.__('Edit');
     },
-
-    showButton() {
-      return this.isCommitable &&
-        !this.activeFile.render_error &&
-        !this.binary &&
-        this.openedFiles.length;
-    },
   },
   methods: {
-    editCancelClicked() {
-      if (this.changedFiles.length) {
-        this.dialog.open = true;
-        return;
-      }
-      this.editMode = !this.editMode;
-      Store.toggleBlobView();
-    },
+    ...mapActions([
+      'toggleEditMode',
+      'closeDiscardPopup',
+    ]),
   },
 };
 </script>
 
 <template>
-<button
-  v-if="showButton"
-  class="btn btn-default"
-  type="button"
-  @click.prevent="editCancelClicked">
-  <i
-    v-if="!editMode"
-    class="fa fa-pencil"
-    aria-hidden="true">
-  </i>
-  <span>
-    {{buttonLabel}}
-  </span>
-</button>
+  <div class="editable-mode">
+    <button
+      v-if="canEditFile"
+      class="btn btn-default"
+      type="button"
+      @click.prevent="toggleEditMode()">
+      <i
+        v-if="!editMode"
+        class="fa fa-pencil"
+        aria-hidden="true">
+      </i>
+      <span>
+        {{buttonLabel}}
+      </span>
+    </button>
+    <popup-dialog
+      v-if="discardPopupOpen"
+      class="text-left"
+      :primary-button-label="__('Discard changes')"
+      kind="warning"
+      :title="__('Are you sure?')"
+      :text="__('Are you sure you want to discard your changes?')"
+      @toggle="closeDiscardPopup"
+      @submit="toggleEditMode(true)"
+    />
+  </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index 4639bee6d66..0d6729bb99b 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -1,124 +1,101 @@
 <script>
 /* global monaco */
-import Store from '../stores/repo_store';
-import Service from '../services/repo_service';
-import Helper from '../helpers/repo_helper';
-
-const RepoEditor = {
-  data() {
-    return Store;
-  },
+import { mapGetters, mapActions } from 'vuex';
+import flash from '../../flash';
+import monacoLoader from '../monaco_loader';
 
+export default {
   destroyed() {
-    if (Helper.monacoInstance) {
-      Helper.monacoInstance.destroy();
+    if (this.monacoInstance) {
+      this.monacoInstance.destroy();
     }
   },
-
   mounted() {
-    Service.getRaw(this.activeFile.raw_path)
-      .then((rawResponse) => {
-        Store.blobRaw = rawResponse.data;
-        Store.activeFile.plain = rawResponse.data;
-
-        const monacoInstance = Helper.monaco.editor.create(this.$el, {
-          model: null,
-          readOnly: false,
-          contextmenu: true,
-          scrollBeyondLastLine: false,
-        });
+    if (this.monaco) {
+      this.initMonaco();
+    } else {
+      monacoLoader(['vs/editor/editor.main'], () => {
+        this.monaco = monaco;
+
+        this.initMonaco();
+      });
+    }
+  },
+  methods: {
+    ...mapActions([
+      'getRawFileData',
+      'changeFileContent',
+    ]),
+    initMonaco() {
+      if (this.monacoInstance) {
+        this.monacoInstance.setModel(null);
+      }
 
-        Helper.monacoInstance = monacoInstance;
+      this.getRawFileData(this.activeFile)
+        .then(() => {
+          if (!this.monacoInstance) {
+            this.monacoInstance = this.monaco.editor.create(this.$el, {
+              model: null,
+              readOnly: false,
+              contextmenu: true,
+              scrollBeyondLastLine: false,
+            });
 
-        this.addMonacoEvents();
+            this.languages = this.monaco.languages.getLanguages();
 
-        this.setupEditor();
-      })
-      .catch(Helper.loadingError);
-  },
+            this.addMonacoEvents();
+          }
 
-  methods: {
+          this.setupEditor();
+        })
+        .catch(() => flash('Error setting up monaco. Please try again.'));
+    },
     setupEditor() {
-      this.showHide();
+      if (!this.activeFile) return;
+      const content = this.activeFile.content !== '' ? this.activeFile.content : this.activeFile.raw;
 
-      Helper.setMonacoModelFromLanguage();
-    },
+      const foundLang = this.languages.find(lang =>
+        lang.extensions && lang.extensions.indexOf(this.activeFileExtension) === 0,
+      );
+      const newModel = this.monaco.editor.createModel(
+        content, foundLang ? foundLang.id : 'plaintext',
+      );
 
-    showHide() {
-      if (!this.openedFiles.length || (this.binary && !this.activeFile.raw)) {
-        this.$el.style.display = 'none';
-      } else {
-        this.$el.style.display = 'inline-block';
-      }
+      this.monacoInstance.setModel(newModel);
     },
-
     addMonacoEvents() {
-      Helper.monacoInstance.onMouseUp(this.onMonacoEditorMouseUp);
-      Helper.monacoInstance.onKeyUp(this.onMonacoEditorKeysPressed.bind(this));
-    },
-
-    onMonacoEditorKeysPressed() {
-      Store.setActiveFileContents(Helper.monacoInstance.getValue());
-    },
-
-    onMonacoEditorMouseUp(e) {
-      if (!e.target.position) return;
-      const lineNumber = e.target.position.lineNumber;
-      if (e.target.element.classList.contains('line-numbers')) {
-        location.hash = `L${lineNumber}`;
-        Store.setActiveLine(lineNumber);
-      }
+      this.monacoInstance.onKeyUp(() => {
+        this.changeFileContent({
+          file: this.activeFile,
+          content: this.monacoInstance.getValue(),
+        });
+      });
     },
   },
-
   watch: {
-    dialog: {
-      handler(obj) {
-        const newObj = obj;
-        if (newObj.status) {
-          newObj.status = false;
-          this.openedFiles = this.openedFiles.map((file) => {
-            const f = file;
-            if (f.active) {
-              this.blobRaw = f.plain;
-            }
-            f.changed = false;
-            delete f.newContent;
-
-            return f;
-          });
-          this.editMode = false;
-          Store.toggleBlobView();
-        }
-      },
-      deep: true,
-    },
-
-    blobRaw() {
-      if (Helper.monacoInstance) {
-        this.setupEditor();
-      }
-    },
-
-    activeLine() {
-      if (Helper.monacoInstance) {
-        Helper.monacoInstance.setPosition({
-          lineNumber: this.activeLine,
-          column: 1,
-        });
+    activeFile(oldVal, newVal) {
+      if (newVal && !newVal.active) {
+        this.initMonaco();
       }
     },
   },
   computed: {
+    ...mapGetters([
+      'activeFile',
+      'activeFileExtension',
+    ]),
     shouldHideEditor() {
-      return !this.openedFiles.length || (this.binary && !this.activeFile.raw);
+      return this.activeFile.binary && !this.activeFile.raw;
     },
   },
 };
-
-export default RepoEditor;
 </script>
 
 <template>
-<div id="ide" v-if='!shouldHideEditor'></div>
+  <div
+    id="ide"
+    v-if='!shouldHideEditor'
+    class="blob-viewer-container blob-editor-container"
+  >
+  </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index 8c86e87ed3a..7a23154b340 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -1,11 +1,9 @@
 <script>
+  import { mapActions, mapGetters } from 'vuex';
   import timeAgoMixin from '../../vue_shared/mixins/timeago';
-  import eventHub from '../event_hub';
-  import repoMixin from '../mixins/repo_mixin';
 
   export default {
     mixins: [
-      repoMixin,
       timeAgoMixin,
     ],
     props: {
@@ -15,13 +13,15 @@
       },
     },
     computed: {
+      ...mapGetters([
+        'isCollapsed',
+      ]),
       fileIcon() {
-        const classObj = {
+        return {
           'fa-spinner fa-spin': this.file.loading,
           [this.file.icon]: !this.file.loading,
           'fa-folder-open': !this.file.loading && this.file.opened,
         };
-        return classObj;
       },
       levelIndentation() {
         return {
@@ -33,9 +33,9 @@
       },
     },
     methods: {
-      linkClicked(file) {
-        eventHub.$emit('fileNameClicked', file);
-      },
+      ...mapActions([
+        'clickedTreeRow',
+      ]),
     },
   };
 </script>
@@ -43,7 +43,7 @@
 <template>
   <tr
     class="file"
-    @click.prevent="linkClicked(file)">
+    @click.prevent="clickedTreeRow(file)">
     <td>
       <i
         class="fa fa-fw file-icon"
@@ -71,7 +71,7 @@
       </template>
     </td>
 
-    <template v-if="!isMini">
+    <template v-if="!isCollapsed">
       <td class="hidden-sm hidden-xs">
         <a
           @click.stop
diff --git a/app/assets/javascripts/repo/components/repo_file_buttons.vue b/app/assets/javascripts/repo/components/repo_file_buttons.vue
index 03cd219e718..dd948ee84fb 100644
--- a/app/assets/javascripts/repo/components/repo_file_buttons.vue
+++ b/app/assets/javascripts/repo/components/repo_file_buttons.vue
@@ -1,42 +1,35 @@
 <script>
-import Store from '../stores/repo_store';
-import Helper from '../helpers/repo_helper';
-import RepoMixin from '../mixins/repo_mixin';
-
-const RepoFileButtons = {
-  data() {
-    return Store;
-  },
-
-  mixins: [RepoMixin],
+import { mapGetters } from 'vuex';
 
+export default {
   computed: {
-
-    rawDownloadButtonLabel() {
-      return this.binary ? 'Download' : 'Raw';
+    ...mapGetters([
+      'activeFile',
+    ]),
+    showButtons() {
+      return this.activeFile.rawPath ||
+        this.activeFile.blamePath ||
+        this.activeFile.commitsPath ||
+        this.activeFile.permalink;
     },
-
-    canPreview() {
-      return Helper.isRenderable();
+    rawDownloadButtonLabel() {
+      return this.activeFile.binary ? 'Download' : 'Raw';
     },
   },
-
-  methods: {
-    rawPreviewToggle: Store.toggleRawPreview,
-  },
 };
-
-export default RepoFileButtons;
 </script>
 
 <template>
-  <div id="repo-file-buttons">
+  <div
+    v-if="showButtons"
+    class="repo-file-buttons"
+  >
     <a
-      :href="activeFile.raw_path"
+      :href="activeFile.rawPath"
       target="_blank"
       class="btn btn-default raw"
       rel="noopener noreferrer">
-      {{rawDownloadButtonLabel}}
+      {{ rawDownloadButtonLabel }}
     </a>
 
     <div
@@ -44,12 +37,12 @@ export default RepoFileButtons;
       role="group"
       aria-label="File actions">
       <a
-        :href="activeFile.blame_path"
+        :href="activeFile.blamePath"
         class="btn btn-default blame">
         Blame
       </a>
       <a
-        :href="activeFile.commits_path"
+        :href="activeFile.commitsPath"
         class="btn btn-default history">
         History
       </a>
@@ -59,13 +52,5 @@ export default RepoFileButtons;
         Permalink
       </a>
     </div>
-
-    <a
-      v-if="canPreview"
-      href="#"
-      @click.prevent="rawPreviewToggle"
-      class="btn btn-default preview">
-      {{activeFileLabel}}
-    </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_loading_file.vue b/app/assets/javascripts/repo/components/repo_loading_file.vue
index 832b45b2b29..1e6c405f292 100644
--- a/app/assets/javascripts/repo/components/repo_loading_file.vue
+++ b/app/assets/javascripts/repo/components/repo_loading_file.vue
@@ -1,10 +1,12 @@
 <script>
-  import repoMixin from '../mixins/repo_mixin';
+  import { mapGetters } from 'vuex';
 
   export default {
-    mixins: [
-      repoMixin,
-    ],
+    computed: {
+      ...mapGetters([
+        'isCollapsed',
+      ]),
+    },
     methods: {
       lineOfCode(n) {
         return `skeleton-line-${n}`;
@@ -28,7 +30,7 @@
         </div>
       </div>
     </td>
-    <template v-if="!isMini">
+    <template v-if="!isCollapsed">
       <td
         class="hidden-sm hidden-xs">
         <div class="animation-container">
diff --git a/app/assets/javascripts/repo/components/repo_prev_directory.vue b/app/assets/javascripts/repo/components/repo_prev_directory.vue
index c4bf6dcdec2..a2b305bbd05 100644
--- a/app/assets/javascripts/repo/components/repo_prev_directory.vue
+++ b/app/assets/javascripts/repo/components/repo_prev_directory.vue
@@ -1,26 +1,22 @@
 <script>
-  import eventHub from '../event_hub';
-  import repoMixin from '../mixins/repo_mixin';
+  import { mapGetters, mapState, mapActions } from 'vuex';
 
   export default {
-    mixins: [
-      repoMixin,
-    ],
-    props: {
-      prevUrl: {
-        type: String,
-        required: true,
-      },
-    },
     computed: {
+      ...mapState([
+        'parentTreeUrl',
+      ]),
+      ...mapGetters([
+        'isCollapsed',
+      ]),
       colSpanCondition() {
-        return this.isMini ? undefined : 3;
+        return this.isCollapsed ? undefined : 3;
       },
     },
     methods: {
-      linkClicked(file) {
-        eventHub.$emit('goToPreviousDirectoryClicked', file);
-      },
+      ...mapActions([
+        'getTreeData',
+      ]),
     },
   };
 </script>
@@ -30,9 +26,9 @@
     <td
       :colspan="colSpanCondition"
       class="table-cell"
-      @click.prevent="linkClicked(prevUrl)"
+      @click.prevent="getTreeData({ endpoint: parentTreeUrl })"
     >
-      <a :href="prevUrl">...</a>
+      <a :href="parentTreeUrl">...</a>
     </td>
   </tr>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index b5be771d539..d1883299bd9 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -1,26 +1,20 @@
 <script>
 /* global LineHighlighter */
-
-import Store from '../stores/repo_store';
+import { mapGetters } from 'vuex';
 
 export default {
-  data() {
-    return Store;
-  },
   computed: {
-    html() {
-      return this.activeFile.html;
+    ...mapGetters([
+      'activeFile',
+    ]),
+    renderErrorTooLarge() {
+      return this.activeFile.renderError === 'too_large';
     },
   },
   methods: {
     highlightFile() {
       $(this.$el).find('.file-content').syntaxHighlight();
     },
-    highlightLine() {
-      if (Store.activeLine > -1) {
-        this.lineHighlighter.highlightHash(`#L${Store.activeLine}`);
-      }
-    },
   },
   mounted() {
     this.highlightFile();
@@ -29,38 +23,39 @@ export default {
       scrollFileHolder: true,
     });
   },
-  watch: {
-    html() {
-      this.$nextTick(() => {
-        this.highlightFile();
-        this.highlightLine();
-      });
-    },
-    activeLine() {
-      this.highlightLine();
-    },
+  updated() {
+    this.$nextTick(() => {
+      this.highlightFile();
+    });
   },
 };
 </script>
 
 <template>
-<div>
+<div class="blob-viewer-container">
   <div
-    v-if="!activeFile.render_error"
+    v-if="!activeFile.renderError"
     v-html="activeFile.html">
   </div>
   <div
-    v-else-if="activeFile.tooLarge"
+    v-else-if="activeFile.tempFile"
+    class="vertical-center render-error">
+    <p class="text-center">
+      The source could not be displayed for this temporary file.
+    </p>
+  </div>
+  <div
+    v-else-if="renderErrorTooLarge"
     class="vertical-center render-error">
     <p class="text-center">
-      The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.
+      The source could not be displayed because it is too large. You can <a :href="activeFile.rawPath" download>download</a> it instead.
     </p>
   </div>
   <div
     v-else
     class="vertical-center render-error">
     <p class="text-center">
-      The source could not be displayed because a rendering error occurred. You can <a :href="activeFile.raw_path">download</a> it instead.
+      The source could not be displayed because a rendering error occurred. You can <a :href="activeFile.rawPath" download>download</a> it instead.
     </p>
   </div>
 </div>
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 09dc9ee25d7..63c0d70f5c0 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -1,120 +1,55 @@
 <script>
-import _ from 'underscore';
-import Service from '../services/repo_service';
-import Helper from '../helpers/repo_helper';
-import Store from '../stores/repo_store';
-import eventHub from '../event_hub';
+import { mapState, mapGetters, mapActions } from 'vuex';
 import RepoPreviousDirectory from './repo_prev_directory.vue';
 import RepoFile from './repo_file.vue';
 import RepoLoadingFile from './repo_loading_file.vue';
-import RepoMixin from '../mixins/repo_mixin';
 
 export default {
-  mixins: [RepoMixin],
   components: {
     'repo-previous-directory': RepoPreviousDirectory,
     'repo-file': RepoFile,
     'repo-loading-file': RepoLoadingFile,
   },
   created() {
-    window.addEventListener('popstate', this.checkHistory);
+    window.addEventListener('popstate', this.popHistoryState);
   },
   destroyed() {
-    eventHub.$off('fileNameClicked', this.fileClicked);
-    eventHub.$off('goToPreviousDirectoryClicked', this.goToPreviousDirectoryClicked);
-    window.removeEventListener('popstate', this.checkHistory);
+    window.removeEventListener('popstate', this.popHistoryState);
   },
   mounted() {
-    eventHub.$on('fileNameClicked', this.fileClicked);
-    eventHub.$on('goToPreviousDirectoryClicked', this.goToPreviousDirectoryClicked);
-  },
-  data() {
-    return Store;
+    this.getTreeData();
   },
   computed: {
-    flattendFiles() {
-      const mapFiles = arr => (!arr.files.length ? [] : _.map(arr.files, a => [a, mapFiles(a)]));
-
-      return _.chain(this.files)
-        .map(arr => [arr, mapFiles(arr)])
-        .flatten()
-        .value();
-    },
+    ...mapState([
+      'loading',
+      'isRoot',
+    ]),
+    ...mapState({
+      projectName(state) {
+        return state.project.name;
+      },
+    }),
+    ...mapGetters([
+      'treeList',
+      'isCollapsed',
+    ]),
   },
   methods: {
-    checkHistory() {
-      let selectedFile = this.files.find(file => location.pathname.indexOf(file.url) > -1);
-      if (!selectedFile) {
-        // Maybe it is not in the current tree but in the opened tabs
-        selectedFile = Helper.getFileFromPath(location.pathname);
-      }
-
-      let lineNumber = null;
-      if (location.hash.indexOf('#L') > -1) lineNumber = Number(location.hash.substr(2));
-
-      if (selectedFile) {
-        if (selectedFile.url !== this.activeFile.url) {
-          this.fileClicked(selectedFile, lineNumber);
-        } else {
-          Store.setActiveLine(lineNumber);
-        }
-      } else {
-        // Not opened at all lets open new tab
-        this.fileClicked({
-          url: location.href,
-        }, lineNumber);
-      }
-    },
-
-    fileClicked(clickedFile, lineNumber) {
-      const file = clickedFile;
-
-      if (file.loading) return;
-
-      if (file.type === 'tree' && file.opened) {
-        Helper.setDirectoryToClosed(file);
-        Store.setActiveLine(lineNumber);
-      } else if (file.type === 'submodule') {
-        file.loading = true;
-
-        gl.utils.visitUrl(file.url);
-      } else {
-        const openFile = Helper.getFileFromPath(file.url);
-
-        if (openFile) {
-          Store.setActiveFiles(openFile);
-          Store.setActiveLine(lineNumber);
-        } else {
-          file.loading = true;
-          Service.url = file.url;
-          Helper.getContent(file)
-            .then(() => {
-              file.loading = false;
-              Helper.scrollTabsRight();
-              Store.setActiveLine(lineNumber);
-            })
-            .catch(Helper.loadingError);
-        }
-      }
-    },
-
-    goToPreviousDirectoryClicked(prevURL) {
-      Service.url = prevURL;
-      Helper.getContent(null, true)
-        .then(() => Helper.scrollTabsRight())
-        .catch(Helper.loadingError);
-    },
+    ...mapActions([
+      'getTreeData',
+      'popHistoryState',
+    ]),
   },
 };
 </script>
 
 <template>
-<div id="sidebar" :class="{'sidebar-mini' : isMini}">
+<div id="sidebar" :class="{'sidebar-mini' : isCollapsed}">
   <table class="table">
     <thead>
       <tr>
         <th
-          v-if="isMini"
+          v-if="isCollapsed"
           class="repo-file-options title"
         >
           <strong class="clgray">
@@ -136,17 +71,16 @@ export default {
     </thead>
     <tbody>
       <repo-previous-directory
-        v-if="!isRoot && !loading.tree"
-        :prev-url="prevURL"
+        v-if="!isRoot && treeList.length"
       />
       <repo-loading-file
-        v-if="!flattendFiles.length && loading.tree"
+        v-if="!treeList.length && loading"
         v-for="n in 5"
         :key="n"
       />
       <repo-file
-        v-for="file in flattendFiles"
-        :key="file.id"
+        v-for="(file, index) in treeList"
+        :key="index"
         :file="file"
       />
     </tbody>
diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue
index 098715915b0..da0714c368c 100644
--- a/app/assets/javascripts/repo/components/repo_tab.vue
+++ b/app/assets/javascripts/repo/components/repo_tab.vue
@@ -1,7 +1,7 @@
 <script>
-import Store from '../stores/repo_store';
+import { mapActions } from 'vuex';
 
-const RepoTab = {
+export default {
   props: {
     tab: {
       type: Object,
@@ -11,44 +11,38 @@ const RepoTab = {
 
   computed: {
     closeLabel() {
-      if (this.tab.changed) {
+      if (this.tab.changed || this.tab.tempFile) {
         return `${this.tab.name} changed`;
       }
       return `Close ${this.tab.name}`;
     },
     changedClass() {
       const tabChangedObj = {
-        'fa-times close-icon': !this.tab.changed,
-        'fa-circle unsaved-icon': this.tab.changed,
+        'fa-times close-icon': !this.tab.changed && !this.tab.tempFile,
+        'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile,
       };
       return tabChangedObj;
     },
   },
 
   methods: {
-    tabClicked(file) {
-      Store.setActiveFiles(file);
-    },
-    closeTab(file) {
-      if (file.changed) return;
-
-      Store.removeFromOpenedFiles(file);
-    },
+    ...mapActions([
+      'setFileActive',
+      'closeFile',
+    ]),
   },
 };
-
-export default RepoTab;
 </script>
 
 <template>
   <li
     :class="{ active : tab.active }"
-    @click="tabClicked(tab)"
+    @click="setFileActive(tab)"
   >
     <button
       type="button"
       class="close-btn"
-      @click.stop.prevent="closeTab(tab)"
+      @click.stop.prevent="closeFile({ file: tab })"
       :aria-label="closeLabel">
       <i
         class="fa"
@@ -61,7 +55,7 @@ export default RepoTab;
       href="#"
       class="repo-tab"
       :title="tab.url"
-      @click.prevent="tabClicked(tab)">
+      @click.prevent.stop="setFileActive(tab)">
       {{tab.name}}
     </a>
   </li>
diff --git a/app/assets/javascripts/repo/components/repo_tabs.vue b/app/assets/javascripts/repo/components/repo_tabs.vue
index b57cd0960de..59beae53e8d 100644
--- a/app/assets/javascripts/repo/components/repo_tabs.vue
+++ b/app/assets/javascripts/repo/components/repo_tabs.vue
@@ -1,15 +1,15 @@
 <script>
-  import Store from '../stores/repo_store';
+  import { mapState } from 'vuex';
   import RepoTab from './repo_tab.vue';
-  import RepoMixin from '../mixins/repo_mixin';
 
   export default {
-    mixins: [RepoMixin],
     components: {
       'repo-tab': RepoTab,
     },
-    data() {
-      return Store;
+    computed: {
+      ...mapState([
+        'openFiles',
+      ]),
     },
   };
 </script>
@@ -20,7 +20,7 @@
     class="list-unstyled"
   >
     <repo-tab
-      v-for="tab in openedFiles"
+      v-for="tab in openFiles"
       :key="tab.id"
       :tab="tab"
     />
diff --git a/app/assets/javascripts/repo/event_hub.js b/app/assets/javascripts/repo/event_hub.js
deleted file mode 100644
index 0948c2e5352..00000000000
--- a/app/assets/javascripts/repo/event_hub.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Vue from 'vue';
-
-export default new Vue();
diff --git a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js b/app/assets/javascripts/repo/helpers/monaco_loader_helper.js
deleted file mode 100644
index f8729bbf585..00000000000
--- a/app/assets/javascripts/repo/helpers/monaco_loader_helper.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* global monaco */
-import RepoEditor from '../components/repo_editor.vue';
-import Store from '../stores/repo_store';
-import Helper from '../helpers/repo_helper';
-import monacoLoader from '../monaco_loader';
-
-function repoEditorLoader() {
-  Store.monacoLoading = true;
-  return new Promise((resolve, reject) => {
-    monacoLoader(['vs/editor/editor.main'], () => {
-      Helper.monaco = monaco;
-      Store.monacoLoading = false;
-      resolve(RepoEditor);
-    }, () => {
-      Store.monacoLoading = false;
-      reject();
-    });
-  });
-}
-
-const MonacoLoaderHelper = {
-  repoEditorLoader,
-};
-
-export default MonacoLoaderHelper;
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
deleted file mode 100644
index f7b7f93e4b8..00000000000
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ /dev/null
@@ -1,228 +0,0 @@
-import { convertPermissionToBoolean } from '../../lib/utils/common_utils';
-import Service from '../services/repo_service';
-import Store from '../stores/repo_store';
-import Flash from '../../flash';
-
-const RepoHelper = {
-  monacoInstance: null,
-
-  getDefaultActiveFile() {
-    return {
-      active: true,
-      binary: false,
-      extension: '',
-      html: '',
-      mime_type: '',
-      name: '',
-      plain: '',
-      size: 0,
-      url: '',
-      raw: false,
-      newContent: '',
-      changed: false,
-      loading: false,
-    };
-  },
-
-  key: '',
-
-  Time: window.performance
-  && window.performance.now
-  ? window.performance
-  : Date,
-
-  getFileExtension(fileName) {
-    return fileName.split('.').pop();
-  },
-
-  getLanguageIDForFile(file, langs) {
-    const ext = RepoHelper.getFileExtension(file.name);
-    const foundLang = RepoHelper.findLanguage(ext, langs);
-
-    return foundLang ? foundLang.id : 'plaintext';
-  },
-
-  setMonacoModelFromLanguage() {
-    RepoHelper.monacoInstance.setModel(null);
-    const languages = RepoHelper.monaco.languages.getLanguages();
-    const languageID = RepoHelper.getLanguageIDForFile(Store.activeFile, languages);
-    const newModel = RepoHelper.monaco.editor.createModel(Store.blobRaw, languageID);
-    RepoHelper.monacoInstance.setModel(newModel);
-  },
-
-  findLanguage(ext, langs) {
-    return langs.find(lang => lang.extensions && lang.extensions.indexOf(`.${ext}`) > -1);
-  },
-
-  setDirectoryOpen(tree, title) {
-    if (!tree) return;
-
-    Object.assign(tree, {
-      opened: true,
-    });
-
-    RepoHelper.updateHistoryEntry(tree.url, title);
-  },
-
-  setDirectoryToClosed(entry) {
-    Object.assign(entry, {
-      opened: false,
-      files: [],
-    });
-  },
-
-  isRenderable() {
-    const okExts = ['md', 'svg'];
-    return okExts.indexOf(Store.activeFile.extension) > -1;
-  },
-
-  setBinaryDataAsBase64(file) {
-    Service.getBase64Content(file.raw_path)
-    .then((response) => {
-      Store.blobRaw = response;
-      file.base64 = response; // eslint-disable-line no-param-reassign
-    })
-    .catch(RepoHelper.loadingError);
-  },
-
-  getContent(treeOrFile, emptyFiles = false) {
-    let file = treeOrFile;
-
-    if (!Store.files.length) {
-      Store.loading.tree = true;
-    }
-
-    return Service.getContent()
-    .then((response) => {
-      const data = response.data;
-      if (response.headers && response.headers['page-title']) data.pageTitle = decodeURI(response.headers['page-title']);
-      if (response.headers && response.headers['is-root'] && !Store.isInitialRoot) {
-        Store.isRoot = convertPermissionToBoolean(response.headers['is-root']);
-        Store.isInitialRoot = Store.isRoot;
-      }
-
-      if (file && file.type === 'blob') {
-        if (!file) file = data;
-        Store.binary = data.binary;
-
-        if (data.binary) {
-          // file might be undefined
-          RepoHelper.setBinaryDataAsBase64(data);
-          Store.setViewToPreview();
-        } else if (!Store.isPreviewView() && !data.render_error) {
-          Service.getRaw(data.raw_path)
-          .then((rawResponse) => {
-            Store.blobRaw = rawResponse.data;
-            data.plain = rawResponse.data;
-            RepoHelper.setFile(data, file);
-          }).catch(RepoHelper.loadingError);
-        }
-
-        if (Store.isPreviewView()) {
-          RepoHelper.setFile(data, file);
-        }
-      } else {
-        Store.loading.tree = false;
-        RepoHelper.setDirectoryOpen(file, data.pageTitle || data.name);
-
-        if (emptyFiles) {
-          Store.files = [];
-        }
-
-        this.addToDirectory(file, data);
-
-        Store.prevURL = Service.blobURLtoParentTree(Service.url);
-      }
-    }).catch(RepoHelper.loadingError);
-  },
-
-  addToDirectory(file, data) {
-    const tree = file || Store;
-    const files = tree.files.concat(this.dataToListOfFiles(data, file ? file.level + 1 : 0));
-
-    tree.files = files;
-  },
-
-  setFile(data, file) {
-    const newFile = data;
-    newFile.url = file.url || Service.url; // Grab the URL from service, happens on page refresh.
-
-    if (newFile.render_error === 'too_large' || newFile.render_error === 'collapsed') {
-      newFile.tooLarge = true;
-    }
-    newFile.newContent = '';
-
-    Store.addToOpenedFiles(newFile);
-    Store.setActiveFiles(newFile);
-  },
-
-  serializeRepoEntity(type, entity, level = 0) {
-    const { id, url, name, icon, last_commit, tree_url } = entity;
-
-    return {
-      id,
-      type,
-      name,
-      url,
-      tree_url,
-      level,
-      icon: `fa-${icon}`,
-      files: [],
-      loading: false,
-      opened: false,
-      // eslint-disable-next-line camelcase
-      lastCommit: last_commit ? {
-        url: `${Store.projectUrl}/commit/${last_commit.id}`,
-        message: last_commit.message,
-        updatedAt: last_commit.committed_date,
-      } : {},
-    };
-  },
-
-  scrollTabsRight() {
-    const tabs = document.getElementById('tabs');
-    if (!tabs) return;
-    tabs.scrollLeft = tabs.scrollWidth;
-  },
-
-  dataToListOfFiles(data, level) {
-    const { blobs, trees, submodules } = data;
-    return [
-      ...trees.map(tree => RepoHelper.serializeRepoEntity('tree', tree, level)),
-      ...submodules.map(submodule => RepoHelper.serializeRepoEntity('submodule', submodule, level)),
-      ...blobs.map(blob => RepoHelper.serializeRepoEntity('blob', blob, level)),
-    ];
-  },
-
-  genKey() {
-    return RepoHelper.Time.now().toFixed(3);
-  },
-
-  updateHistoryEntry(url, title) {
-    const history = window.history;
-
-    RepoHelper.key = RepoHelper.genKey();
-
-    if (document.location.pathname !== url) {
-      history.pushState({ key: RepoHelper.key }, '', url);
-    }
-
-    if (title) {
-      document.title = title;
-    }
-  },
-
-  findOpenedFileFromActive() {
-    return Store.openedFiles.find(openedFile => Store.activeFile.url === openedFile.url);
-  },
-
-  getFileFromPath(path) {
-    return Store.openedFiles.find(file => file.url === path);
-  },
-
-  loadingError() {
-    Flash('Unable to load this content at this time.');
-  },
-};
-
-export default RepoHelper;
diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
index 85e960df497..b6801af7fcb 100644
--- a/app/assets/javascripts/repo/index.js
+++ b/app/assets/javascripts/repo/index.js
@@ -1,53 +1,50 @@
-import $ from 'jquery';
 import Vue from 'vue';
+import { mapActions } from 'vuex';
 import { convertPermissionToBoolean } from '../lib/utils/common_utils';
-import Service from './services/repo_service';
-import Store from './stores/repo_store';
 import Repo from './components/repo.vue';
 import RepoEditButton from './components/repo_edit_button.vue';
 import newBranchForm from './components/new_branch_form.vue';
+import newDropdown from './components/new_dropdown/index.vue';
+import store from './stores';
 import Translate from '../vue_shared/translate';
 
-function initDropdowns() {
-  $('.js-tree-ref-target-holder').hide();
-}
-
-function addEventsForNonVueEls() {
-  window.onbeforeunload = function confirmUnload(e) {
-    const hasChanged = Store.openedFiles
-      .some(file => file.changed);
-    if (!hasChanged) return undefined;
-    const event = e || window.event;
-    if (event) event.returnValue = 'Are you sure you want to lose unsaved changes?';
-    // For Safari
-    return 'Are you sure you want to lose unsaved changes?';
-  };
-}
-
-function setInitialStore(data) {
-  Store.service = Service;
-  Store.service.url = data.url;
-  Store.service.refsUrl = data.refsUrl;
-  Store.projectId = data.projectId;
-  Store.projectName = data.projectName;
-  Store.projectUrl = data.projectUrl;
-  Store.canCommit = data.canCommit;
-  Store.onTopOfBranch = data.onTopOfBranch;
-  Store.newMrTemplateUrl = decodeURIComponent(data.newMrTemplateUrl);
-  Store.customBranchURL = decodeURIComponent(data.blobUrl);
-  Store.isRoot = convertPermissionToBoolean(data.root);
-  Store.isInitialRoot = convertPermissionToBoolean(data.root);
-  Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref');
-  Store.checkIsCommitable();
-  Store.setBranchHash();
-}
-
 function initRepo(el) {
+  if (!el) return null;
+
   return new Vue({
     el,
+    store,
     components: {
       repo: Repo,
     },
+    methods: {
+      ...mapActions([
+        'setInitialData',
+      ]),
+    },
+    created() {
+      const data = el.dataset;
+
+      this.setInitialData({
+        project: {
+          id: data.projectId,
+          name: data.projectName,
+          url: data.projectUrl,
+        },
+        endpoints: {
+          rootEndpoint: data.url,
+          newMergeRequestUrl: data.newMergeRequestUrl,
+          rootUrl: data.rootUrl,
+        },
+        canCommit: convertPermissionToBoolean(data.canCommit),
+        onTopOfBranch: convertPermissionToBoolean(data.onTopOfBranch),
+        currentRef: data.ref,
+        path: data.currentPath,
+        currentBranch: data.currentBranch,
+        isRoot: convertPermissionToBoolean(data.root),
+        isInitialRoot: convertPermissionToBoolean(data.root),
+      });
+    },
     render(createElement) {
       return createElement('repo');
     },
@@ -57,9 +54,26 @@ function initRepo(el) {
 function initRepoEditButton(el) {
   return new Vue({
     el,
+    store,
     components: {
       repoEditButton: RepoEditButton,
     },
+    render(createElement) {
+      return createElement('repo-edit-button');
+    },
+  });
+}
+
+function initNewDropdown(el) {
+  return new Vue({
+    el,
+    store,
+    components: {
+      newDropdown,
+    },
+    render(createElement) {
+      return createElement('new-dropdown');
+    },
   });
 }
 
@@ -73,30 +87,20 @@ function initNewBranchForm() {
     components: {
       newBranchForm,
     },
+    store,
     render(createElement) {
-      return createElement('new-branch-form', {
-        props: {
-          currentBranch: Store.currentBranch,
-        },
-      });
+      return createElement('new-branch-form');
     },
   });
 }
 
-function initRepoBundle() {
-  const repo = document.getElementById('repo');
-  const editButton = document.querySelector('.editable-mode');
-  setInitialStore(repo.dataset);
-  addEventsForNonVueEls();
-  initDropdowns();
-
-  Vue.use(Translate);
-
-  initRepo(repo);
-  initRepoEditButton(editButton);
-  initNewBranchForm();
-}
+const repo = document.getElementById('repo');
+const editButton = document.querySelector('.editable-mode');
+const newDropdownHolder = document.querySelector('.js-new-dropdown');
 
-$(initRepoBundle);
+Vue.use(Translate);
 
-export default initRepoBundle;
+initRepo(repo);
+initRepoEditButton(editButton);
+initNewBranchForm();
+initNewDropdown(newDropdownHolder);
diff --git a/app/assets/javascripts/repo/mixins/repo_mixin.js b/app/assets/javascripts/repo/mixins/repo_mixin.js
deleted file mode 100644
index c8e8238a0d3..00000000000
--- a/app/assets/javascripts/repo/mixins/repo_mixin.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Store from '../stores/repo_store';
-
-const RepoMixin = {
-  computed: {
-    isMini() {
-      return !!Store.openedFiles.length;
-    },
-
-    changedFiles() {
-      const changedFileList = this.openedFiles
-      .filter(file => file.changed);
-      return changedFileList;
-    },
-  },
-};
-
-export default RepoMixin;
diff --git a/app/assets/javascripts/repo/services/index.js b/app/assets/javascripts/repo/services/index.js
new file mode 100644
index 00000000000..dc222ccac01
--- /dev/null
+++ b/app/assets/javascripts/repo/services/index.js
@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import Api from '../../api';
+
+Vue.use(VueResource);
+
+export default {
+  getTreeData(endpoint) {
+    return Vue.http.get(endpoint, { params: { format: 'json' } });
+  },
+  getFileData(endpoint) {
+    return Vue.http.get(endpoint, { params: { format: 'json' } });
+  },
+  getRawFileData(file) {
+    if (file.tempFile) {
+      return Promise.resolve(file.content);
+    }
+
+    return Vue.http.get(file.rawPath, { params: { format: 'json' } })
+      .then(res => res.text());
+  },
+  getBranchData(projectId, currentBranch) {
+    return Api.branchSingle(projectId, currentBranch);
+  },
+  createBranch(projectId, payload) {
+    const url = Api.buildUrl(Api.createBranchPath).replace(':id', projectId);
+
+    return Vue.http.post(url, payload);
+  },
+  commit(projectId, payload) {
+    return Api.commitMultiple(projectId, payload);
+  },
+};
diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js
deleted file mode 100644
index 786b5637493..00000000000
--- a/app/assets/javascripts/repo/services/repo_service.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import axios from 'axios';
-import csrf from '../../lib/utils/csrf';
-import Store from '../stores/repo_store';
-import Api from '../../api';
-import Helper from '../helpers/repo_helper';
-
-axios.defaults.headers.common[csrf.headerKey] = csrf.token;
-
-const RepoService = {
-  url: '',
-  options: {
-    params: {
-      format: 'json',
-    },
-  },
-  createBranchPath: '/api/:version/projects/:id/repository/branches',
-  richExtensionRegExp: /md/,
-
-  getRaw(url) {
-    return axios.get(url, {
-      // Stop Axios from parsing a JSON file into a JS object
-      transformResponse: [res => res],
-    });
-  },
-
-  buildParams(url = this.url) {
-    // shallow clone object without reference
-    const params = Object.assign({}, this.options.params);
-
-    if (this.urlIsRichBlob(url)) params.viewer = 'rich';
-
-    return params;
-  },
-
-  urlIsRichBlob(url = this.url) {
-    const extension = Helper.getFileExtension(url);
-
-    return this.richExtensionRegExp.test(extension);
-  },
-
-  getContent(url = this.url) {
-    const params = this.buildParams(url);
-
-    return axios.get(url, {
-      params,
-    });
-  },
-
-  getBase64Content(url = this.url) {
-    const request = axios.get(url, {
-      responseType: 'arraybuffer',
-    });
-
-    return request.then(response => this.bufferToBase64(response.data));
-  },
-
-  bufferToBase64(data) {
-    return new Buffer(data, 'binary').toString('base64');
-  },
-
-  blobURLtoParentTree(url) {
-    const urlArray = url.split('/');
-    urlArray.pop();
-    const blobIndex = urlArray.lastIndexOf('blob');
-
-    if (blobIndex > -1) urlArray[blobIndex] = 'tree';
-
-    return urlArray.join('/');
-  },
-
-  getBranch() {
-    return Api.branchSingle(Store.projectId, Store.currentBranch);
-  },
-
-  commitFiles(payload) {
-    return Api.commitMultiple(Store.projectId, payload)
-      .then(this.commitFlash);
-  },
-
-  createBranch(payload) {
-    const url = Api.buildUrl(this.createBranchPath)
-      .replace(':id', Store.projectId);
-    return axios.post(url, payload);
-  },
-
-  commitFlash(data) {
-    if (data.short_id && data.stats) {
-      window.Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
-    } else {
-      window.Flash(data.message);
-    }
-  },
-};
-
-export default RepoService;
diff --git a/app/assets/javascripts/repo/stores/actions.js b/app/assets/javascripts/repo/stores/actions.js
new file mode 100644
index 00000000000..ca2f2a5ce7a
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/actions.js
@@ -0,0 +1,129 @@
+import Vue from 'vue';
+import flash from '../../flash';
+import service from '../services';
+import * as types from './mutation_types';
+
+export const redirectToUrl = url => gl.utils.visitUrl(url);
+
+export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DATA, data);
+
+export const closeDiscardPopup = ({ commit }) => commit(types.TOGGLE_DISCARD_POPUP, false);
+
+export const discardAllChanges = ({ commit, getters, dispatch }) => {
+  const changedFiles = getters.changedFiles;
+
+  changedFiles.forEach((file) => {
+    commit(types.DISCARD_FILE_CHANGES, file);
+
+    if (file.tempFile) {
+      dispatch('closeFile', { file, force: true });
+    }
+  });
+};
+
+export const closeAllFiles = ({ state, dispatch }) => {
+  state.openFiles.forEach(file => dispatch('closeFile', { file }));
+};
+
+export const toggleEditMode = ({ state, commit, getters, dispatch }, force = false) => {
+  const changedFiles = getters.changedFiles;
+
+  if (changedFiles.length && !force) {
+    commit(types.TOGGLE_DISCARD_POPUP, true);
+  } else {
+    commit(types.TOGGLE_EDIT_MODE);
+    commit(types.TOGGLE_DISCARD_POPUP, false);
+    dispatch('toggleBlobView');
+
+    if (!state.editMode) {
+      dispatch('discardAllChanges');
+    }
+  }
+};
+
+export const toggleBlobView = ({ commit, state }) => {
+  if (state.editMode) {
+    commit(types.SET_EDIT_MODE);
+  } else {
+    commit(types.SET_PREVIEW_MODE);
+  }
+};
+
+export const checkCommitStatus = ({ state }) => service.getBranchData(
+  state.project.id,
+  state.currentBranch,
+)
+  .then((data) => {
+    const { id } = data.commit;
+
+    if (state.currentRef !== id) {
+      return true;
+    }
+
+    return false;
+  })
+  .catch(() => flash('Error checking branch data. Please try again.'));
+
+export const commitChanges = ({ commit, state, dispatch }, { payload, newMr }) =>
+  service.commit(state.project.id, payload)
+  .then((data) => {
+    const { branch } = payload;
+    if (!data.short_id) {
+      flash(data.message);
+      return;
+    }
+
+    flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
+
+    if (newMr) {
+      redirectToUrl(`${state.endpoints.newMergeRequestUrl}${branch}`);
+    } else {
+      commit(types.SET_COMMIT_REF, data.id);
+      dispatch('discardAllChanges');
+      dispatch('closeAllFiles');
+      dispatch('toggleEditMode');
+
+      window.scrollTo(0, 0);
+    }
+  })
+  .catch(() => flash('Error committing changes. Please try again.'));
+
+export const createTempEntry = ({ state, dispatch }, { name, type, content = '', base64 = false }) => {
+  if (type === 'tree') {
+    dispatch('createTempTree', name);
+  } else if (type === 'blob') {
+    dispatch('createTempFile', {
+      tree: state,
+      name,
+      base64,
+      content,
+    });
+  }
+};
+
+export const popHistoryState = ({ state, dispatch, getters }) => {
+  const treeList = getters.treeList;
+  const tree = treeList.find(file => file.url === state.previousUrl);
+
+  if (!tree) return;
+
+  if (tree.type === 'tree') {
+    dispatch('toggleTreeOpen', { endpoint: tree.url, tree });
+  }
+};
+
+export const scrollToTab = () => {
+  Vue.nextTick(() => {
+    const tabs = document.getElementById('tabs');
+
+    if (tabs) {
+      const tabEl = tabs.querySelector('.active .repo-tab');
+
+      tabEl.focus();
+    }
+  });
+};
+
+export * from './actions/tree';
+export * from './actions/file';
+export * from './actions/branch';
diff --git a/app/assets/javascripts/repo/stores/actions/branch.js b/app/assets/javascripts/repo/stores/actions/branch.js
new file mode 100644
index 00000000000..b81a70dfd1e
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/actions/branch.js
@@ -0,0 +1,20 @@
+import service from '../../services';
+import * as types from '../mutation_types';
+import { pushState } from '../utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export const createNewBranch = ({ rootState, commit }, branch) => service.createBranch(
+  rootState.project.id,
+  {
+    branch,
+    ref: rootState.currentBranch,
+  },
+).then(res => res.json())
+.then((data) => {
+  const branchName = data.name;
+  const url = location.href.replace(rootState.currentBranch, branchName);
+
+  pushState(url);
+
+  commit(types.SET_CURRENT_BRANCH, branchName);
+});
diff --git a/app/assets/javascripts/repo/stores/actions/file.js b/app/assets/javascripts/repo/stores/actions/file.js
new file mode 100644
index 00000000000..afbe0b78a82
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/actions/file.js
@@ -0,0 +1,108 @@
+import { normalizeHeaders } from '../../../lib/utils/common_utils';
+import flash from '../../../flash';
+import service from '../../services';
+import * as types from '../mutation_types';
+import {
+  findEntry,
+  pushState,
+  setPageTitle,
+  createTemp,
+  findIndexOfFile,
+} from '../utils';
+
+export const closeFile = ({ commit, state, dispatch }, { file, force = false }) => {
+  if ((file.changed || file.tempFile) && !force) return;
+
+  const indexOfClosedFile = findIndexOfFile(state.openFiles, file);
+  const fileWasActive = file.active;
+
+  commit(types.TOGGLE_FILE_OPEN, file);
+  commit(types.SET_FILE_ACTIVE, { file, active: false });
+
+  if (state.openFiles.length > 0 && fileWasActive) {
+    const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
+    const nextFileToOpen = state.openFiles[nextIndexToOpen];
+
+    dispatch('setFileActive', nextFileToOpen);
+  } else if (!state.openFiles.length) {
+    pushState(file.parentTreeUrl);
+  }
+};
+
+export const setFileActive = ({ commit, state, getters, dispatch }, file) => {
+  const currentActiveFile = getters.activeFile;
+
+  if (file.active) return;
+
+  if (currentActiveFile) {
+    commit(types.SET_FILE_ACTIVE, { file: currentActiveFile, active: false });
+  }
+
+  commit(types.SET_FILE_ACTIVE, { file, active: true });
+  dispatch('scrollToTab');
+
+  // reset hash for line highlighting
+  location.hash = '';
+};
+
+export const getFileData = ({ state, commit, dispatch }, file) => {
+  commit(types.TOGGLE_LOADING, file);
+
+  service.getFileData(file.url)
+    .then((res) => {
+      const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']);
+
+      setPageTitle(pageTitle);
+
+      return res.json();
+    })
+    .then((data) => {
+      commit(types.SET_FILE_DATA, { data, file });
+      commit(types.TOGGLE_FILE_OPEN, file);
+      dispatch('setFileActive', file);
+      commit(types.TOGGLE_LOADING, file);
+
+      pushState(file.url);
+    })
+    .catch(() => {
+      commit(types.TOGGLE_LOADING, file);
+      flash('Error loading file data. Please try again.');
+    });
+};
+
+export const getRawFileData = ({ commit, dispatch }, file) => service.getRawFileData(file)
+  .then((raw) => {
+    commit(types.SET_FILE_RAW_DATA, { file, raw });
+  })
+  .catch(() => flash('Error loading file content. Please try again.'));
+
+export const changeFileContent = ({ commit }, { file, content }) => {
+  commit(types.UPDATE_FILE_CONTENT, { file, content });
+};
+
+export const createTempFile = ({ state, commit, dispatch }, { tree, name, content = '', base64 = '' }) => {
+  const file = createTemp({
+    name: name.replace(`${state.path}/`, ''),
+    path: tree.path,
+    type: 'blob',
+    level: tree.level !== undefined ? tree.level + 1 : 0,
+    changed: true,
+    content,
+    base64,
+  });
+
+  if (findEntry(tree, 'blob', file.name)) return flash(`The name "${file.name}" is already taken in this directory.`);
+
+  commit(types.CREATE_TMP_FILE, {
+    parent: tree,
+    file,
+  });
+  commit(types.TOGGLE_FILE_OPEN, file);
+  dispatch('setFileActive', file);
+
+  if (!state.editMode && !file.base64) {
+    dispatch('toggleEditMode', true);
+  }
+
+  return Promise.resolve(file);
+};
diff --git a/app/assets/javascripts/repo/stores/actions/tree.js b/app/assets/javascripts/repo/stores/actions/tree.js
new file mode 100644
index 00000000000..129743c66c2
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/actions/tree.js
@@ -0,0 +1,110 @@
+import { normalizeHeaders } from '../../../lib/utils/common_utils';
+import flash from '../../../flash';
+import service from '../../services';
+import * as types from '../mutation_types';
+import {
+  pushState,
+  setPageTitle,
+  findEntry,
+  createTemp,
+} from '../utils';
+
+export const getTreeData = (
+  { commit, state },
+  { endpoint = state.endpoints.rootEndpoint, tree = state } = {},
+) => {
+  commit(types.TOGGLE_LOADING, tree);
+
+  service.getTreeData(endpoint)
+    .then((res) => {
+      const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']);
+
+      setPageTitle(pageTitle);
+
+      return res.json();
+    })
+    .then((data) => {
+      if (!state.isInitialRoot) {
+        commit(types.SET_ROOT, data.path === '/');
+      }
+
+      commit(types.SET_DIRECTORY_DATA, { data, tree });
+      commit(types.SET_PARENT_TREE_URL, data.parent_tree_url);
+      commit(types.TOGGLE_LOADING, tree);
+
+      pushState(endpoint);
+    })
+    .catch(() => {
+      flash('Error loading tree data. Please try again.');
+      commit(types.TOGGLE_LOADING, tree);
+    });
+};
+
+export const toggleTreeOpen = ({ commit, dispatch }, { endpoint, tree }) => {
+  if (tree.opened) {
+    // send empty data to clear the tree
+    const data = { trees: [], blobs: [], submodules: [] };
+
+    pushState(tree.parentTreeUrl);
+
+    commit(types.SET_PREVIOUS_URL, tree.parentTreeUrl);
+    commit(types.SET_DIRECTORY_DATA, { data, tree });
+  } else {
+    commit(types.SET_PREVIOUS_URL, endpoint);
+    dispatch('getTreeData', { endpoint, tree });
+  }
+
+  commit(types.TOGGLE_TREE_OPEN, tree);
+};
+
+export const clickedTreeRow = ({ commit, dispatch }, row) => {
+  if (row.type === 'tree') {
+    dispatch('toggleTreeOpen', {
+      endpoint: row.url,
+      tree: row,
+    });
+  } else if (row.type === 'submodule') {
+    commit(types.TOGGLE_LOADING, row);
+
+    gl.utils.visitUrl(row.url);
+  } else if (row.type === 'blob' && row.opened) {
+    dispatch('setFileActive', row);
+  } else {
+    dispatch('getFileData', row);
+  }
+};
+
+export const createTempTree = ({ state, commit, dispatch }, name) => {
+  let tree = state;
+  const dirNames = name.replace(new RegExp(`^${state.path}/`), '').split('/');
+
+  dirNames.forEach((dirName) => {
+    const foundEntry = findEntry(tree, 'tree', dirName);
+
+    if (!foundEntry) {
+      const tmpEntry = createTemp({
+        name: dirName,
+        path: tree.path,
+        type: 'tree',
+        level: tree.level !== undefined ? tree.level + 1 : 0,
+      });
+
+      commit(types.CREATE_TMP_TREE, {
+        parent: tree,
+        tmpEntry,
+      });
+      commit(types.TOGGLE_TREE_OPEN, tmpEntry);
+
+      tree = tmpEntry;
+    } else {
+      tree = foundEntry;
+    }
+  });
+
+  if (tree.tempFile) {
+    dispatch('createTempFile', {
+      tree,
+      name: '.gitkeep',
+    });
+  }
+};
diff --git a/app/assets/javascripts/repo/stores/getters.js b/app/assets/javascripts/repo/stores/getters.js
new file mode 100644
index 00000000000..1ed05ac6e35
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/getters.js
@@ -0,0 +1,36 @@
+import _ from 'underscore';
+
+/*
+  Takes the multi-dimensional tree and returns a flattened array.
+  This allows for the table to recursively render the table rows but keeps the data
+  structure nested to make it easier to add new files/directories.
+*/
+export const treeList = (state) => {
+  const mapTree = arr => (!arr.tree.length ? [] : _.map(arr.tree, a => [a, mapTree(a)]));
+
+  return _.chain(state.tree)
+    .map(arr => [arr, mapTree(arr)])
+    .flatten()
+    .value();
+};
+
+export const changedFiles = state => state.openFiles.filter(file => file.changed);
+
+export const activeFile = state => state.openFiles.find(file => file.active);
+
+export const activeFileExtension = (state) => {
+  const file = activeFile(state);
+  return file ? `.${file.path.split('.').pop()}` : '';
+};
+
+export const isCollapsed = state => !!state.openFiles.length;
+
+export const canEditFile = (state) => {
+  const currentActiveFile = activeFile(state);
+  const openedFiles = state.openFiles;
+
+  return state.canCommit &&
+    state.onTopOfBranch &&
+    openedFiles.length &&
+    (currentActiveFile && !currentActiveFile.renderError && !currentActiveFile.binary);
+};
diff --git a/app/assets/javascripts/repo/stores/index.js b/app/assets/javascripts/repo/stores/index.js
new file mode 100644
index 00000000000..6ac9bfd8189
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import state from './state';
+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: state(),
+  actions,
+  mutations,
+  getters,
+});
diff --git a/app/assets/javascripts/repo/stores/mutation_types.js b/app/assets/javascripts/repo/stores/mutation_types.js
new file mode 100644
index 00000000000..4722a7dd0df
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/mutation_types.js
@@ -0,0 +1,28 @@
+export const SET_INITIAL_DATA = 'SET_INITIAL_DATA';
+export const TOGGLE_LOADING = 'TOGGLE_LOADING';
+export const SET_COMMIT_REF = 'SET_COMMIT_REF';
+export const SET_PARENT_TREE_URL = 'SET_PARENT_TREE_URL';
+export const SET_ROOT = 'SET_ROOT';
+export const SET_PREVIOUS_URL = 'SET_PREVIOUS_URL';
+
+// Tree mutation types
+export const SET_DIRECTORY_DATA = 'SET_DIRECTORY_DATA';
+export const TOGGLE_TREE_OPEN = 'TOGGLE_TREE_OPEN';
+export const CREATE_TMP_TREE = 'CREATE_TMP_TREE';
+
+// File mutation types
+export const SET_FILE_DATA = 'SET_FILE_DATA';
+export const TOGGLE_FILE_OPEN = 'TOGGLE_FILE_OPEN';
+export const SET_FILE_ACTIVE = 'SET_FILE_ACTIVE';
+export const SET_FILE_RAW_DATA = 'SET_FILE_RAW_DATA';
+export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
+export const DISCARD_FILE_CHANGES = 'DISCARD_FILE_CHANGES';
+export const CREATE_TMP_FILE = 'CREATE_TMP_FILE';
+
+// Viewer mutation types
+export const SET_PREVIEW_MODE = 'SET_PREVIEW_MODE';
+export const SET_EDIT_MODE = 'SET_EDIT_MODE';
+export const TOGGLE_EDIT_MODE = 'TOGGLE_EDIT_MODE';
+export const TOGGLE_DISCARD_POPUP = 'TOGGLE_DISCARD_POPUP';
+
+export const SET_CURRENT_BRANCH = 'SET_CURRENT_BRANCH';
diff --git a/app/assets/javascripts/repo/stores/mutations.js b/app/assets/javascripts/repo/stores/mutations.js
new file mode 100644
index 00000000000..2f9b038322b
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/mutations.js
@@ -0,0 +1,54 @@
+import * as types from './mutation_types';
+import fileMutations from './mutations/file';
+import treeMutations from './mutations/tree';
+import branchMutations from './mutations/branch';
+
+export default {
+  [types.SET_INITIAL_DATA](state, data) {
+    Object.assign(state, data);
+  },
+  [types.SET_PREVIEW_MODE](state) {
+    Object.assign(state, {
+      currentBlobView: 'repo-preview',
+    });
+  },
+  [types.SET_EDIT_MODE](state) {
+    Object.assign(state, {
+      currentBlobView: 'repo-editor',
+    });
+  },
+  [types.TOGGLE_LOADING](state, entry) {
+    Object.assign(entry, {
+      loading: !entry.loading,
+    });
+  },
+  [types.TOGGLE_EDIT_MODE](state) {
+    Object.assign(state, {
+      editMode: !state.editMode,
+    });
+  },
+  [types.TOGGLE_DISCARD_POPUP](state, discardPopupOpen) {
+    Object.assign(state, {
+      discardPopupOpen,
+    });
+  },
+  [types.SET_COMMIT_REF](state, ref) {
+    Object.assign(state, {
+      currentRef: ref,
+    });
+  },
+  [types.SET_ROOT](state, isRoot) {
+    Object.assign(state, {
+      isRoot,
+      isInitialRoot: isRoot,
+    });
+  },
+  [types.SET_PREVIOUS_URL](state, previousUrl) {
+    Object.assign(state, {
+      previousUrl,
+    });
+  },
+  ...fileMutations,
+  ...treeMutations,
+  ...branchMutations,
+};
diff --git a/app/assets/javascripts/repo/stores/mutations/branch.js b/app/assets/javascripts/repo/stores/mutations/branch.js
new file mode 100644
index 00000000000..d8229e8a620
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/mutations/branch.js
@@ -0,0 +1,9 @@
+import * as types from '../mutation_types';
+
+export default {
+  [types.SET_CURRENT_BRANCH](state, currentBranch) {
+    Object.assign(state, {
+      currentBranch,
+    });
+  },
+};
diff --git a/app/assets/javascripts/repo/stores/mutations/file.js b/app/assets/javascripts/repo/stores/mutations/file.js
new file mode 100644
index 00000000000..f9ba80b9dc2
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/mutations/file.js
@@ -0,0 +1,54 @@
+import * as types from '../mutation_types';
+import { findIndexOfFile } from '../utils';
+
+export default {
+  [types.SET_FILE_ACTIVE](state, { file, active }) {
+    Object.assign(file, {
+      active,
+    });
+  },
+  [types.TOGGLE_FILE_OPEN](state, file) {
+    Object.assign(file, {
+      opened: !file.opened,
+    });
+
+    if (file.opened) {
+      state.openFiles.push(file);
+    } else {
+      state.openFiles.splice(findIndexOfFile(state.openFiles, file), 1);
+    }
+  },
+  [types.SET_FILE_DATA](state, { data, file }) {
+    Object.assign(file, {
+      blamePath: data.blame_path,
+      commitsPath: data.commits_path,
+      permalink: data.permalink,
+      rawPath: data.raw_path,
+      binary: data.binary,
+      html: data.html,
+      renderError: data.render_error,
+    });
+  },
+  [types.SET_FILE_RAW_DATA](state, { file, raw }) {
+    Object.assign(file, {
+      raw,
+    });
+  },
+  [types.UPDATE_FILE_CONTENT](state, { file, content }) {
+    const changed = content !== file.raw;
+
+    Object.assign(file, {
+      content,
+      changed,
+    });
+  },
+  [types.DISCARD_FILE_CHANGES](state, file) {
+    Object.assign(file, {
+      content: '',
+      changed: false,
+    });
+  },
+  [types.CREATE_TMP_FILE](state, { file, parent }) {
+    parent.tree.push(file);
+  },
+};
diff --git a/app/assets/javascripts/repo/stores/mutations/tree.js b/app/assets/javascripts/repo/stores/mutations/tree.js
new file mode 100644
index 00000000000..52be2673107
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/mutations/tree.js
@@ -0,0 +1,45 @@
+import * as types from '../mutation_types';
+import * as utils from '../utils';
+
+export default {
+  [types.TOGGLE_TREE_OPEN](state, tree) {
+    Object.assign(tree, {
+      opened: !tree.opened,
+    });
+  },
+  [types.SET_DIRECTORY_DATA](state, { data, tree }) {
+    const level = tree.level !== undefined ? tree.level + 1 : 0;
+    const parentTreeUrl = data.parent_tree_url ? `${data.parent_tree_url}${data.path}` : state.endpoints.rootUrl;
+
+    Object.assign(tree, {
+      tree: [
+        ...data.trees.map(t => utils.decorateData({
+          ...t,
+          type: 'tree',
+          parentTreeUrl,
+          level,
+        }, state.project.url)),
+        ...data.submodules.map(m => utils.decorateData({
+          ...m,
+          type: 'submodule',
+          parentTreeUrl,
+          level,
+        }, state.project.url)),
+        ...data.blobs.map(b => utils.decorateData({
+          ...b,
+          type: 'blob',
+          parentTreeUrl,
+          level,
+        }, state.project.url)),
+      ],
+    });
+  },
+  [types.SET_PARENT_TREE_URL](state, url) {
+    Object.assign(state, {
+      parentTreeUrl: url,
+    });
+  },
+  [types.CREATE_TMP_TREE](state, { parent, tmpEntry }) {
+    parent.tree.push(tmpEntry);
+  },
+};
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
deleted file mode 100644
index 39e1b4e5849..00000000000
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import Helper from '../helpers/repo_helper';
-import Service from '../services/repo_service';
-
-const RepoStore = {
-  monacoLoading: false,
-  service: '',
-  canCommit: false,
-  onTopOfBranch: false,
-  editMode: false,
-  isRoot: null,
-  isInitialRoot: null,
-  prevURL: '',
-  projectId: '',
-  projectName: '',
-  projectUrl: '',
-  branchUrl: '',
-  blobRaw: '',
-  currentBlobView: 'repo-preview',
-  openedFiles: [],
-  submitCommitsLoading: false,
-  dialog: {
-    open: false,
-    title: '',
-    status: false,
-  },
-  showNewBranchDialog: false,
-  activeFile: Helper.getDefaultActiveFile(),
-  activeFileIndex: 0,
-  activeLine: -1,
-  activeFileLabel: 'Raw',
-  files: [],
-  isCommitable: false,
-  binary: false,
-  currentBranch: '',
-  startNewMR: false,
-  currentHash: '',
-  currentShortHash: '',
-  customBranchURL: '',
-  newMrTemplateUrl: '',
-  branchChanged: false,
-  commitMessage: '',
-  loading: {
-    tree: false,
-    blob: false,
-  },
-
-  setBranchHash() {
-    return Service.getBranch()
-      .then((data) => {
-        if (RepoStore.currentHash !== '' && data.commit.id !== RepoStore.currentHash) {
-          RepoStore.branchChanged = true;
-        }
-        RepoStore.currentHash = data.commit.id;
-        RepoStore.currentShortHash = data.commit.short_id;
-      });
-  },
-
-  // mutations
-  checkIsCommitable() {
-    RepoStore.isCommitable = RepoStore.onTopOfBranch && RepoStore.canCommit;
-  },
-
-  toggleRawPreview() {
-    RepoStore.activeFile.raw = !RepoStore.activeFile.raw;
-    RepoStore.activeFileLabel = RepoStore.activeFile.raw ? 'Display rendered file' : 'Display source';
-  },
-
-  setActiveFiles(file) {
-    if (RepoStore.isActiveFile(file)) return;
-    RepoStore.openedFiles = RepoStore.openedFiles
-      .map((openedFile, i) => RepoStore.setFileActivity(file, openedFile, i));
-
-    RepoStore.setActiveToRaw();
-
-    if (file.binary) {
-      RepoStore.blobRaw = file.base64;
-    } else if (file.newContent || file.plain) {
-      RepoStore.blobRaw = file.newContent || file.plain;
-    } else {
-      Service.getRaw(file.raw_path)
-        .then((rawResponse) => {
-          RepoStore.blobRaw = rawResponse.data;
-          Helper.findOpenedFileFromActive().plain = rawResponse.data;
-        }).catch(Helper.loadingError);
-    }
-
-    if (!file.loading) Helper.updateHistoryEntry(file.url, file.pageTitle || file.name);
-    RepoStore.binary = file.binary;
-    RepoStore.setActiveLine(-1);
-  },
-
-  setFileActivity(file, openedFile, i) {
-    const activeFile = openedFile;
-    activeFile.active = file.url === activeFile.url;
-
-    if (activeFile.active) RepoStore.setActiveFile(activeFile, i);
-
-    return activeFile;
-  },
-
-  setActiveFile(activeFile, i) {
-    RepoStore.activeFile = Object.assign({}, RepoStore.activeFile, activeFile);
-    RepoStore.activeFileIndex = i;
-  },
-
-  setActiveLine(activeLine) {
-    if (!isNaN(activeLine)) RepoStore.activeLine = activeLine;
-  },
-
-  setActiveToRaw() {
-    RepoStore.activeFile.raw = false;
-    // can't get vue to listen to raw for some reason so RepoStore for now.
-    RepoStore.activeFileLabel = 'Display source';
-  },
-
-  removeFromOpenedFiles(file) {
-    if (file.type === 'tree') return;
-    let foundIndex;
-    RepoStore.openedFiles = RepoStore.openedFiles.filter((openedFile, i) => {
-      if (openedFile.path === file.path) foundIndex = i;
-      return openedFile.path !== file.path;
-    });
-
-    // now activate the right tab based on what you closed.
-    if (RepoStore.openedFiles.length === 0) {
-      RepoStore.activeFile = {};
-      return;
-    }
-
-    if (RepoStore.openedFiles.length === 1 || foundIndex === 0) {
-      RepoStore.setActiveFiles(RepoStore.openedFiles[0]);
-      return;
-    }
-
-    if (foundIndex && foundIndex > 0) {
-      RepoStore.setActiveFiles(RepoStore.openedFiles[foundIndex - 1]);
-    }
-  },
-
-  addToOpenedFiles(file) {
-    const openFile = file;
-
-    const openedFilesAlreadyExists = RepoStore.openedFiles
-      .some(openedFile => openedFile.path === openFile.path);
-
-    if (openedFilesAlreadyExists) return;
-
-    openFile.changed = false;
-    openFile.active = true;
-    RepoStore.openedFiles.push(openFile);
-  },
-
-  setActiveFileContents(contents) {
-    if (!RepoStore.editMode) return;
-    const currentFile = RepoStore.openedFiles[RepoStore.activeFileIndex];
-    RepoStore.activeFile.newContent = contents;
-    RepoStore.activeFile.changed = RepoStore.activeFile.plain !== RepoStore.activeFile.newContent;
-    currentFile.changed = RepoStore.activeFile.changed;
-    currentFile.newContent = contents;
-  },
-
-  toggleBlobView() {
-    RepoStore.currentBlobView = RepoStore.isPreviewView() ? 'repo-editor' : 'repo-preview';
-  },
-
-  setViewToPreview() {
-    RepoStore.currentBlobView = 'repo-preview';
-  },
-
-  // getters
-
-  isActiveFile(file) {
-    return file && file.url === RepoStore.activeFile.url;
-  },
-
-  isPreviewView() {
-    return RepoStore.currentBlobView === 'repo-preview';
-  },
-};
-
-export default RepoStore;
diff --git a/app/assets/javascripts/repo/stores/state.js b/app/assets/javascripts/repo/stores/state.js
new file mode 100644
index 00000000000..aab74754f02
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/state.js
@@ -0,0 +1,23 @@
+export default () => ({
+  canCommit: false,
+  currentBranch: '',
+  currentBlobView: 'repo-preview',
+  currentRef: '',
+  discardPopupOpen: false,
+  editMode: false,
+  endpoints: {},
+  isRoot: false,
+  isInitialRoot: false,
+  loading: false,
+  onTopOfBranch: false,
+  openFiles: [],
+  path: '',
+  project: {
+    id: 0,
+    name: '',
+    url: '',
+  },
+  parentTreeUrl: '',
+  previousUrl: '',
+  tree: [],
+});
diff --git a/app/assets/javascripts/repo/stores/utils.js b/app/assets/javascripts/repo/stores/utils.js
new file mode 100644
index 00000000000..797c2b1e5b9
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/utils.js
@@ -0,0 +1,108 @@
+export const dataStructure = () => ({
+  id: '',
+  type: '',
+  name: '',
+  url: '',
+  path: '',
+  level: 0,
+  tempFile: false,
+  icon: '',
+  tree: [],
+  loading: false,
+  opened: false,
+  active: false,
+  changed: false,
+  lastCommit: {},
+  tree_url: '',
+  blamePath: '',
+  commitsPath: '',
+  permalink: '',
+  rawPath: '',
+  binary: false,
+  html: '',
+  raw: '',
+  content: '',
+  parentTreeUrl: '',
+  renderError: false,
+  base64: false,
+});
+
+export const decorateData = (entity, projectUrl = '') => {
+  const {
+    id,
+    type,
+    url,
+    name,
+    icon,
+    last_commit,
+    tree_url,
+    path,
+    renderError,
+    content = '',
+    tempFile = false,
+    active = false,
+    opened = false,
+    changed = false,
+    parentTreeUrl = '',
+    level = 0,
+    base64 = false,
+  } = entity;
+
+  return {
+    ...dataStructure(),
+    id,
+    type,
+    name,
+    url,
+    tree_url,
+    path,
+    level,
+    tempFile,
+    icon: `fa-${icon}`,
+    opened,
+    active,
+    parentTreeUrl,
+    changed,
+    renderError,
+    content,
+    base64,
+    // eslint-disable-next-line camelcase
+    lastCommit: last_commit ? {
+      url: `${projectUrl}/commit/${last_commit.id}`,
+      message: last_commit.message,
+      updatedAt: last_commit.committed_date,
+    } : {},
+  };
+};
+
+export const findEntry = (state, type, name) => state.tree.find(
+  f => f.type === type && f.name === name,
+);
+export const findIndexOfFile = (state, file) => state.findIndex(f => f.path === file.path);
+
+export const setPageTitle = (title) => {
+  document.title = title;
+};
+
+export const pushState = (url) => {
+  history.pushState({ url }, '', url);
+};
+
+export const createTemp = ({ name, path, type, level, changed, content, base64 }) => {
+  const treePath = path ? `${path}/${name}` : name;
+
+  return decorateData({
+    id: new Date().getTime().toString(),
+    name,
+    type,
+    tempFile: true,
+    path: treePath,
+    icon: type === 'tree' ? 'folder' : 'file-text-o',
+    changed,
+    content,
+    parentTreeUrl: '',
+    level,
+    base64,
+    renderError: base64,
+  });
+};
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
new file mode 100644
index 00000000000..b8510a6ce3a
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -0,0 +1,125 @@
+<script>
+import { __, n__, sprintf } from '../../../locale';
+import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
+import userAvatarImage from '../../../vue_shared/components/user_avatar/user_avatar_image.vue';
+
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    participants: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    numberOfLessParticipants: {
+      type: Number,
+      required: false,
+      default: 7,
+    },
+  },
+  data() {
+    return {
+      isShowingMoreParticipants: false,
+    };
+  },
+  components: {
+    loadingIcon,
+    userAvatarImage,
+  },
+  computed: {
+    lessParticipants() {
+      return this.participants.slice(0, this.numberOfLessParticipants);
+    },
+    visibleParticipants() {
+      return this.isShowingMoreParticipants ? this.participants : this.lessParticipants;
+    },
+    hasMoreParticipants() {
+      return this.participants.length > this.numberOfLessParticipants;
+    },
+    toggleLabel() {
+      let label = '';
+      if (this.isShowingMoreParticipants) {
+        label = __('- show less');
+      } else {
+        label = sprintf(__('+ %{moreCount} more'), {
+          moreCount: this.participants.length - this.numberOfLessParticipants,
+        });
+      }
+
+      return label;
+    },
+    participantLabel() {
+      return sprintf(
+        n__('%{count} participant', '%{count} participants', this.participants.length),
+        { count: this.loading ? '' : this.participantCount },
+      );
+    },
+    participantCount() {
+      return this.participants.length;
+    },
+  },
+  methods: {
+    toggleMoreParticipants() {
+      this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="sidebar-collapsed-icon">
+      <i
+        class="fa fa-users"
+        aria-hidden="true">
+      </i>
+      <loading-icon
+        v-if="loading"
+        class="js-participants-collapsed-loading-icon" />
+      <span
+        v-else
+        class="js-participants-collapsed-count">
+        {{ participantCount }}
+      </span>
+    </div>
+    <div class="title hide-collapsed">
+      <loading-icon
+        v-if="loading"
+        :inline="true"
+        class="js-participants-expanded-loading-icon" />
+      {{ participantLabel }}
+    </div>
+    <div class="participants-list hide-collapsed">
+      <div
+        v-for="participant in visibleParticipants"
+        :key="participant.id"
+        class="participants-author js-participants-author">
+        <a
+          class="author_link"
+          :href="participant.web_url">
+          <user-avatar-image
+            :lazy="true"
+            :img-src="participant.avatar_url"
+            css-classes="avatar-inline"
+            :size="24"
+            :tooltip-text="participant.name"
+            tooltip-placement="bottom" />
+        </a>
+      </div>
+    </div>
+    <div
+      v-if="hasMoreParticipants"
+      class="participants-more hide-collapsed">
+      <button
+        type="button"
+        class="btn-transparent btn-blank js-toggle-participants-button"
+        @click="toggleMoreParticipants">
+        {{ toggleLabel }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue b/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue
new file mode 100644
index 00000000000..c1296b28db7
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue
@@ -0,0 +1,26 @@
+<script>
+import Store from '../../stores/sidebar_store';
+import Mediator from '../../sidebar_mediator';
+import participants from './participants.vue';
+
+export default {
+  data() {
+    return {
+      mediator: new Mediator(),
+      store: new Store(),
+    };
+  },
+  components: {
+    participants,
+  },
+};
+</script>
+
+<template>
+  <div class="block participants">
+    <participants
+      :loading="store.isFetching.participants"
+      :participants="store.participants"
+      :number-of-less-participants="7" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
new file mode 100644
index 00000000000..4ad3d469f25
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
@@ -0,0 +1,45 @@
+<script>
+import Store from '../../stores/sidebar_store';
+import Mediator from '../../sidebar_mediator';
+import eventHub from '../../event_hub';
+import Flash from '../../../flash';
+import subscriptions from './subscriptions.vue';
+
+export default {
+  data() {
+    return {
+      mediator: new Mediator(),
+      store: new Store(),
+    };
+  },
+
+  components: {
+    subscriptions,
+  },
+
+  methods: {
+    onToggleSubscription() {
+      this.mediator.toggleSubscription()
+        .catch(() => {
+          Flash('Error occurred when toggling the notification subscription');
+        });
+    },
+  },
+
+  created() {
+    eventHub.$on('toggleSubscription', this.onToggleSubscription);
+  },
+
+  beforeDestroy() {
+    eventHub.$off('toggleSubscription', this.onToggleSubscription);
+  },
+};
+</script>
+
+<template>
+  <div class="block subscriptions">
+    <subscriptions
+      :loading="store.isFetching.subscriptions"
+      :subscribed="store.subscribed" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
new file mode 100644
index 00000000000..a3a8213d63a
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -0,0 +1,60 @@
+<script>
+import { __ } from '../../../locale';
+import eventHub from '../../event_hub';
+import loadingButton from '../../../vue_shared/components/loading_button.vue';
+
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    subscribed: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  components: {
+    loadingButton,
+  },
+  computed: {
+    buttonLabel() {
+      let label;
+      if (this.subscribed === false) {
+        label = __('Subscribe');
+      } else if (this.subscribed === true) {
+        label = __('Unsubscribe');
+      }
+
+      return label;
+    },
+  },
+  methods: {
+    toggleSubscription() {
+      eventHub.$emit('toggleSubscription');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="sidebar-collapsed-icon">
+      <i
+        class="fa fa-rss"
+        aria-hidden="true">
+      </i>
+    </div>
+    <span class="issuable-header-text hide-collapsed pull-left">
+      {{ __('Notifications') }}
+    </span>
+    <loading-button
+      ref="loadingButton"
+      class="btn btn-default pull-right hide-collapsed js-issuable-subscribe-button"
+      :loading="loading"
+      :label="buttonLabel"
+      @click="toggleSubscription"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/services/sidebar_service.js b/app/assets/javascripts/sidebar/services/sidebar_service.js
index 604648407a4..37c97225bfd 100644
--- a/app/assets/javascripts/sidebar/services/sidebar_service.js
+++ b/app/assets/javascripts/sidebar/services/sidebar_service.js
@@ -7,6 +7,7 @@ export default class SidebarService {
   constructor(endpointMap) {
     if (!SidebarService.singleton) {
       this.endpoint = endpointMap.endpoint;
+      this.toggleSubscriptionEndpoint = endpointMap.toggleSubscriptionEndpoint;
       this.moveIssueEndpoint = endpointMap.moveIssueEndpoint;
       this.projectsAutocompleteEndpoint = endpointMap.projectsAutocompleteEndpoint;
 
@@ -36,6 +37,10 @@ export default class SidebarService {
     });
   }
 
+  toggleSubscription() {
+    return Vue.http.post(this.toggleSubscriptionEndpoint);
+  }
+
   moveIssue(moveToProjectId) {
     return Vue.http.post(this.moveIssueEndpoint, {
       move_to_project_id: moveToProjectId,
diff --git a/app/assets/javascripts/sidebar/sidebar_bundle.js b/app/assets/javascripts/sidebar/sidebar_bundle.js
index 09b9d75c02d..2650bb725d4 100644
--- a/app/assets/javascripts/sidebar/sidebar_bundle.js
+++ b/app/assets/javascripts/sidebar/sidebar_bundle.js
@@ -4,6 +4,8 @@ import SidebarAssignees from './components/assignees/sidebar_assignees';
 import ConfidentialIssueSidebar from './components/confidential/confidential_issue_sidebar.vue';
 import SidebarMoveIssue from './lib/sidebar_move_issue';
 import LockIssueSidebar from './components/lock/lock_issue_sidebar.vue';
+import sidebarParticipants from './components/participants/sidebar_participants.vue';
+import sidebarSubscriptions from './components/subscriptions/sidebar_subscriptions.vue';
 import Translate from '../vue_shared/translate';
 
 import Mediator from './sidebar_mediator';
@@ -49,6 +51,36 @@ function mountLockComponent(mediator) {
   }).$mount(el);
 }
 
+function mountParticipantsComponent() {
+  const el = document.querySelector('.js-sidebar-participants-entry-point');
+
+  if (!el) return;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    components: {
+      sidebarParticipants,
+    },
+    render: createElement => createElement('sidebar-participants', {}),
+  });
+}
+
+function mountSubscriptionsComponent() {
+  const el = document.querySelector('.js-sidebar-subscriptions-entry-point');
+
+  if (!el) return;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    components: {
+      sidebarSubscriptions,
+    },
+    render: createElement => createElement('sidebar-subscriptions', {}),
+  });
+}
+
 function domContentLoaded() {
   const sidebarOptions = JSON.parse(document.querySelector('.js-sidebar-options').innerHTML);
   const mediator = new Mediator(sidebarOptions);
@@ -63,6 +95,8 @@ function domContentLoaded() {
 
   mountConfidentialComponent(mediator);
   mountLockComponent(mediator);
+  mountParticipantsComponent();
+  mountSubscriptionsComponent();
 
   new SidebarMoveIssue(
     mediator,
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index ede3a0de144..2bda5a47791 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -8,6 +8,7 @@ export default class SidebarMediator {
       this.store = new Store(options);
       this.service = new Service({
         endpoint: options.endpoint,
+        toggleSubscriptionEndpoint: options.toggleSubscriptionEndpoint,
         moveIssueEndpoint: options.moveIssueEndpoint,
         projectsAutocompleteEndpoint: options.projectsAutocompleteEndpoint,
       });
@@ -39,10 +40,25 @@ export default class SidebarMediator {
       .then((data) => {
         this.store.setAssigneeData(data);
         this.store.setTimeTrackingData(data);
+        this.store.setParticipantsData(data);
+        this.store.setSubscriptionsData(data);
       })
       .catch(() => new Flash('Error occurred when fetching sidebar data'));
   }
 
+  toggleSubscription() {
+    this.store.setFetchingState('subscriptions', true);
+    return this.service.toggleSubscription()
+      .then(() => {
+        this.store.setSubscribedState(!this.store.subscribed);
+        this.store.setFetchingState('subscriptions', false);
+      })
+      .catch((err) => {
+        this.store.setFetchingState('subscriptions', false);
+        throw err;
+      });
+  }
+
   fetchAutocompleteProjects(searchTerm) {
     return this.service.getProjectsAutocomplete(searchTerm)
       .then(response => response.json())
diff --git a/app/assets/javascripts/sidebar/stores/sidebar_store.js b/app/assets/javascripts/sidebar/stores/sidebar_store.js
index d5d04103f3f..3150221b685 100644
--- a/app/assets/javascripts/sidebar/stores/sidebar_store.js
+++ b/app/assets/javascripts/sidebar/stores/sidebar_store.js
@@ -12,10 +12,14 @@ export default class SidebarStore {
       this.assignees = [];
       this.isFetching = {
         assignees: true,
+        participants: true,
+        subscriptions: true,
       };
       this.autocompleteProjects = [];
       this.moveToProjectId = 0;
       this.isLockDialogOpen = false;
+      this.participants = [];
+      this.subscribed = null;
 
       SidebarStore.singleton = this;
     }
@@ -37,6 +41,20 @@ export default class SidebarStore {
     this.humanTotalTimeSpent = data.human_total_time_spent;
   }
 
+  setParticipantsData(data) {
+    this.isFetching.participants = false;
+    this.participants = data.participants || [];
+  }
+
+  setSubscriptionsData(data) {
+    this.isFetching.subscriptions = false;
+    this.subscribed = data.subscribed || false;
+  }
+
+  setFetchingState(key, value) {
+    this.isFetching[key] = value;
+  }
+
   addAssignee(assignee) {
     if (!this.findAssignee(assignee)) {
       this.assignees.push(assignee);
@@ -61,6 +79,10 @@ export default class SidebarStore {
     this.autocompleteProjects = projects;
   }
 
+  setSubscribedState(subscribed) {
+    this.subscribed = subscribed;
+  }
+
   setMoveToProjectId(moveToProjectId) {
     this.moveToProjectId = moveToProjectId;
   }
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index b8a96b23012..be37dd87de9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -286,6 +286,7 @@ export default {
                 <input
                   id="remove-source-branch-input"
                   v-model="removeSourceBranch"
+                  class="js-remove-source-branch-checkbox"
                   :disabled="isRemoveSourceBranchButtonDisabled"
                   type="checkbox"/> Remove source branch
               </label>
@@ -311,8 +312,8 @@ export default {
               </button>
             </template>
             <template v-else>
-              <span class="bold">
-                The pipeline for this merge request has not succeeded yet
+              <span class="bold js-resolve-mr-widget-items-message">
+                You can only merge once the items above are resolved
               </span>
             </template>
           </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
index 79c3d335679..99f5c305df5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
+++ b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
@@ -11,7 +11,7 @@ export default class MRWidgetService {
     this.removeWIPResource = Vue.resource(endpoints.removeWIPPath);
     this.removeSourceBranchResource = Vue.resource(endpoints.sourceBranchPath);
     this.deploymentsResource = Vue.resource(endpoints.ciEnvironmentsStatusPath);
-    this.pollResource = Vue.resource(`${endpoints.statusPath}?basic=true`);
+    this.pollResource = Vue.resource(`${endpoints.statusPath}?serializer=basic`);
     this.mergeActionsContentResource = Vue.resource(endpoints.mergeActionsContentPath);
   }
 
diff --git a/app/assets/javascripts/notes/components/issue_placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
index 6921d91372f..e467ca56704 100644
--- a/app/assets/javascripts/notes/components/issue_placeholder_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
@@ -1,9 +1,26 @@
 <script>
+  /**
+   * Common component to render a placeholder note and user information.
+   *
+   * This component needs to be used with a vuex store.
+   * That vuex store needs to have a `getUserData` getter that contains
+   * {
+   *   path: String,
+   *   avatar_url: String,
+   *   name: String,
+   *   username: String,
+   * }
+   *
+   * @example
+   * <placeholder-note
+   *   :note="{body: 'This is a note'}"
+   *   />
+   */
   import { mapGetters } from 'vuex';
-  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+  import userAvatarLink from '../user_avatar/user_avatar_link.vue';
 
   export default {
-    name: 'issuePlaceholderNote',
+    name: 'placeholderNote',
     props: {
       note: {
         type: Object,
diff --git a/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
index 80a8ef56a83..d805fea8006 100644
--- a/app/assets/javascripts/notes/components/issue_placeholder_system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
@@ -1,4 +1,12 @@
 <script>
+  /**
+   * Common component to render a placeholder system note.
+   *
+   * @example
+   * <placeholder-system-note
+   *  :note="{ body: 'Commands are being applied'}"
+   *  />
+   */
   export default {
     name: 'placeholderSystemNote',
     props: {
diff --git a/app/assets/javascripts/notes/components/issue_system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 0cfb6522e77..98f8f32557d 100644
--- a/app/assets/javascripts/notes/components/issue_system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -1,6 +1,24 @@
 <script>
+  /**
+   * Common component to render a system note, icon and user information.
+   *
+   * This component needs to be used with a vuex store.
+   * That vuex store needs to have a `targetNoteHash` getter
+   *
+   * @example
+   * <system-note
+   *   :note="{
+   *     id: String,
+   *     author: Object,
+   *     createdAt: String,
+   *     note_html: String,
+   *     system_note_icon_name: String
+   *    }"
+   *   />
+   */
   import { mapGetters } from 'vuex';
-  import issueNoteHeader from './issue_note_header.vue';
+  import issueNoteHeader from '../../../notes/components/issue_note_header.vue';
+  import { spriteIcon } from '../../../lib/utils/common_utils';
 
   export default {
     name: 'systemNote',
@@ -24,7 +42,7 @@
         return this.targetNoteHash === this.noteAnchorId;
       },
       iconHtml() {
-        return gl.utils.spriteIcon(this.note.system_note_icon_name);
+        return spriteIcon(this.note.system_note_icon_name);
       },
     },
   };
@@ -46,7 +64,8 @@
             :author="note.author"
             :created-at="note.created_at"
             :note-id="note.id"
-            :action-text-html="note.note_html" />
+            :action-text-html="note.note_html"
+            />
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/popup_dialog.vue b/app/assets/javascripts/vue_shared/components/popup_dialog.vue
index 7d8c5936b7d..9e8c10bdc1a 100644
--- a/app/assets/javascripts/vue_shared/components/popup_dialog.vue
+++ b/app/assets/javascripts/vue_shared/components/popup_dialog.vue
@@ -9,7 +9,7 @@ export default {
     },
     text: {
       type: String,
-      required: true,
+      required: false,
     },
     kind: {
       type: String,
@@ -82,14 +82,15 @@ export default {
           type="button"
           class="btn"
           :class="btnCancelKindClass"
-          @click="emitSubmit(false)">
-            {{closeButtonLabel}}
+          @click="close">
+          {{ closeButtonLabel }}
         </button>
-        <button type="button"
+        <button
+          type="button"
           class="btn"
           :class="btnKindClass"
           @click="emitSubmit(true)">
-            {{primaryButtonLabel}}
+          {{ primaryButtonLabel }}
         </button>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
index 95898d54cf7..dc32e783258 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
@@ -12,12 +12,14 @@
     :img-alt="tooltipText"
     :img-size="20"
     :tooltip-text="tooltipText"
-    tooltip-placement="top"
+    :tooltip-placement="top"
+    :username="username"
   />
 
 */
 
 import userAvatarImage from './user_avatar_image.vue';
+import tooltip from '../../directives/tooltip';
 
 export default {
   name: 'UserAvatarLink',
@@ -60,6 +62,22 @@ export default {
       required: false,
       default: 'top',
     },
+    username: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    shouldShowUsername() {
+      return this.username.length > 0;
+    },
+    avatarTooltipText() {
+      return this.shouldShowUsername ? '' : this.tooltipText;
+    },
+  },
+  directives: {
+    tooltip,
   },
 };
 </script>
@@ -73,8 +91,13 @@ export default {
       :img-alt="imgAlt"
       :css-classes="imgCssClasses"
       :size="imgSize"
-      :tooltip-text="tooltipText"
+      :tooltip-text="avatarTooltipText"
+      :tooltip-placement="tooltipPlacement"
+    /><span
+      v-if="shouldShowUsername"
+      v-tooltip
+      :title="tooltipText"
       :tooltip-placement="tooltipPlacement"
-    />
+    >{{username}}</span>
   </a>
 </template>
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index a0bb9e61436..7b1ef003bb2 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -37,7 +37,7 @@
 @import "framework/secondary-navigation-elements";
 @import "framework/selects";
 @import "framework/sidebar";
-@import "framework/new-sidebar";
+@import "framework/contextual-sidebar";
 @import "framework/tables";
 @import "framework/notes";
 @import "framework/tabs";
diff --git a/app/assets/stylesheets/framework/new-sidebar.scss b/app/assets/stylesheets/framework/contextual-sidebar.scss
index 7a309f2c8a1..fa5d3833f3e 100644
--- a/app/assets/stylesheets/framework/new-sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual-sidebar.scss
@@ -1,24 +1,10 @@
-@import "framework/variables";
-@import 'framework/tw_bootstrap_variables';
-@import "bootstrap/variables";
-
-$active-background: rgba(0, 0, 0, .04);
-$active-hover-background: $active-background;
-$active-hover-color: $gl-text-color;
-$inactive-badge-background: rgba(0, 0, 0, .08);
-$hover-background: rgba(0, 0, 0, .06);
-$hover-color: $gl-text-color;
-$inactive-color: $gl-text-color-secondary;
-$new-sidebar-width: 220px;
-$new-sidebar-collapsed-width: 50px;
-
-.page-with-new-sidebar {
+.page-with-contextual-sidebar {
   @media (min-width: $screen-md-min) {
-    padding-left: $new-sidebar-collapsed-width;
+    padding-left: $contextual-sidebar-collapsed-width;
   }
 
   @media (min-width: $screen-lg-min) {
-    padding-left: $new-sidebar-width;
+    padding-left: $contextual-sidebar-width;
   }
 
   // Override position: absolute
@@ -34,7 +20,7 @@ $new-sidebar-collapsed-width: 50px;
 
 .page-with-icon-sidebar {
   @media (min-width: $screen-sm-min) {
-    padding-left: $new-sidebar-collapsed-width;
+    padding-left: $contextual-sidebar-collapsed-width;
   }
 }
 
@@ -52,12 +38,12 @@ $new-sidebar-collapsed-width: 50px;
 
   &:hover,
   a:hover {
-    background-color: $hover-background;
-    color: $hover-color;
+    background-color: $link-hover-background;
+    color: $gl-text-color;
 
     .settings-avatar {
       svg {
-        fill: $hover-color;
+        fill: $gl-text-color;
       }
     }
   }
@@ -85,7 +71,7 @@ $new-sidebar-collapsed-width: 50px;
 .nav-sidebar {
   position: fixed;
   z-index: 400;
-  width: $new-sidebar-width;
+  width: $contextual-sidebar-width;
   transition: left $sidebar-transition-duration;
   top: $header-height;
   bottom: 0;
@@ -103,7 +89,7 @@ $new-sidebar-collapsed-width: 50px;
 
   &.sidebar-icons-only {
     width: auto;
-    min-width: $new-sidebar-collapsed-width;
+    min-width: $contextual-sidebar-collapsed-width;
 
     .nav-sidebar-inner-scroll {
       overflow-x: hidden;
@@ -149,11 +135,11 @@ $new-sidebar-collapsed-width: 50px;
       display: flex;
       align-items: center;
       padding: 12px 16px;
-      color: $inactive-color;
+      color: $gl-text-color-secondary;
     }
 
     svg {
-      fill: $inactive-color;
+      fill: $gl-text-color-secondary;
     }
   }
 
@@ -168,7 +154,7 @@ $new-sidebar-collapsed-width: 50px;
   }
 
   @media (max-width: $screen-xs-max) {
-    left: (-$new-sidebar-width);
+    left: (-$contextual-sidebar-width);
   }
 
   .nav-icon-container {
@@ -210,8 +196,8 @@ $new-sidebar-collapsed-width: 50px;
 
       &:hover,
       &:focus {
-        background: $active-hover-background;
-        color: $active-hover-color;
+        background: $link-active-background;
+        color: $gl-text-color;
       }
     }
 
@@ -220,7 +206,7 @@ $new-sidebar-collapsed-width: 50px;
         &,
         &:hover,
         &:focus {
-          background: $active-background;
+          background: $link-active-background;
         }
       }
     }
@@ -308,11 +294,11 @@ $new-sidebar-collapsed-width: 50px;
 
     .badge {
       background-color: $inactive-badge-background;
-      color: $inactive-color;
+      color: $gl-text-color-secondary;
     }
 
     &.active {
-      background: $active-background;
+      background: $link-active-background;
 
       > a {
         margin-left: 4px;
@@ -330,7 +316,7 @@ $new-sidebar-collapsed-width: 50px;
 
     &.active > a:hover,
     &.is-over > a {
-      background-color: $hover-background;
+      background-color: $link-hover-background;
     }
   }
 }
@@ -340,7 +326,7 @@ $new-sidebar-collapsed-width: 50px;
 
 .toggle-sidebar-button,
 .close-nav-button {
-  width: $new-sidebar-width - 2px;
+  width: $contextual-sidebar-width - 2px;
   position: fixed;
   bottom: 0;
   padding: 16px;
@@ -407,7 +393,7 @@ $new-sidebar-collapsed-width: 50px;
   }
 
   .toggle-sidebar-button {
-    width: $new-sidebar-collapsed-width - 2px;
+    width: $contextual-sidebar-collapsed-width - 2px;
     padding: 16px;
 
     .collapse-text,
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index a9d804e735d..1aa53b8f8cf 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -776,12 +776,15 @@
       a,
       button,
       .menu-item {
+        margin-bottom: 0;
         border-radius: 0;
         box-shadow: none;
         padding: 8px 16px;
         text-align: left;
         white-space: normal;
         width: 100%;
+        font-weight: $gl-font-weight-normal;
+        line-height: normal;
 
         &.dropdown-menu-user-link {
           white-space: nowrap;
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index b2847c348eb..0d80a85d521 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -65,7 +65,7 @@
     display: flex;
     flex: 1;
     -webkit-flex: 1;
-    padding-left: 30px;
+    padding-left: 12px;
     position: relative;
     margin-bottom: 0;
   }
@@ -221,10 +221,6 @@
     box-shadow: 0 0 4px $search-input-focus-shadow-color;
   }
 
-  &.focus .fa-filter {
-    color: $common-gray-dark;
-  }
-
   gl-emoji {
     display: inline-block;
     font-family: inherit;
@@ -251,13 +247,6 @@
     }
   }
 
-  .fa-filter {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    color: $gray-darkest;
-  }
-
   .fa-times {
     right: 10px;
     color: $gray-darkest;
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index 52b87de7a3d..dc591c06c88 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -216,12 +216,9 @@ body {
             color: $theme-gray-900;
           }
 
-          &.active > a {
+          &.active > a,
+          &.active > a:hover {
             color: $white-light;
-
-            &:hover {
-              color: $white-light;
-            }
           }
         }
       }
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index d79444fad79..62ba74ff582 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -239,10 +239,8 @@
             fill: currentColor;
           }
 
-          &.header-user-dropdown-toggle {
-            .header-user-avatar {
-              border-color: $white-light;
-            }
+          &.header-user-dropdown-toggle .header-user-avatar {
+            border-color: $white-light;
           }
         }
       }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index d5ca23ff870..8ab48e4844f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -9,6 +9,8 @@ $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
 $default-transition-duration: .15s;
 $right-sidebar-transition-duration: .3s;
+$contextual-sidebar-width: 220px;
+$contextual-sidebar-collapsed-width: 50px;
 
 /*
  * Color schema
@@ -359,6 +361,13 @@ $filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09);
 $dropdown-hover-color: $blue-400;
 
 /*
+* Contextual Sidebar
+*/
+$link-active-background: rgba(0, 0, 0, .04);
+$link-hover-background: rgba(0, 0, 0, .06);
+$inactive-badge-background: rgba(0, 0, 0, .08);
+
+/*
 * Buttons
 */
 $btn-active-gray: #ececec;
@@ -404,7 +413,6 @@ $note-targe3-inside: #ffffd3;
 $note-line2-border: #ddd;
 $note-icon-gutter-width: 55px;
 
-
 /*
 * Zen
 */
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index ca61f7a30c3..91296b354a7 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -414,7 +414,7 @@
   margin: 5px;
 }
 
-.page-with-new-sidebar.page-with-sidebar .issue-boards-sidebar {
+.page-with-contextual-sidebar.page-with-sidebar .issue-boards-sidebar {
   .issuable-sidebar-header {
     position: relative;
   }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 48532503263..88600a0e6d3 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -542,7 +542,9 @@
 }
 
 .participants-list {
-  margin: -5px;
+  display: flex;
+  flex-wrap: wrap;
+  margin: -7px;
 }
 
 
@@ -553,7 +555,7 @@
 
 .participants-author {
   display: inline-block;
-  padding: 5px;
+  padding: 7px;
 
   &:nth-of-type(7n) {
     padding-right: 0;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 04b132415eb..f0cad30f4f3 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -249,13 +249,12 @@
       width: 100%;
       padding-right: 5px;
     }
-
   }
 
   .discussion-actions {
     display: table;
 
-    .new-issue-for-discussion path {
+    .btn-default path {
       fill: $gray-darkest;
     }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index ebad429c2ba..312917bd13a 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -269,7 +269,7 @@ ul.notes {
           display: none;
         }
 
-        &.system-note-commit-list {
+        &.system-note-commit-list:not(.hide-shade) {
           max-height: 70px;
           overflow: hidden;
           display: block;
@@ -291,16 +291,6 @@ ul.notes {
             bottom: 0;
             background: linear-gradient(rgba($white-light, 0.1) -100px, $white-light 100%);
           }
-
-          &.hide-shade {
-            max-height: 100%;
-            overflow: auto;
-
-            &::after {
-              display: none;
-              background: transparent;
-            }
-          }
         }
       }
     }
@@ -466,6 +456,10 @@ ul.notes {
   float: right;
   margin-left: 10px;
   color: $gray-darkest;
+
+  .btn-group > .discussion-next-btn {
+    margin-left: -1px;
+  }
 }
 
 .note-actions {
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 97ca01f0f54..1bb4e3cc345 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -1,12 +1,3 @@
-.monaco-loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: $black-transparent;
-}
-
 .modal.popup-dialog {
   display: block;
   background-color: $black-transparent;
@@ -54,6 +45,7 @@
   }
 
   .tree-content-holder {
+    display: -webkit-flex;
     display: flex;
     min-height: 300px;
   }
@@ -63,7 +55,9 @@
   }
 
   .panel-right {
+    display: -webkit-flex;
     display: flex;
+    -webkit-flex-direction: column;
     flex-direction: column;
     width: 80%;
     height: 100%;
@@ -81,10 +75,6 @@
           text-decoration: underline;
         }
       }
-
-      .cursor {
-        display: none !important;
-      }
     }
 
     .blob-no-preview {
@@ -94,21 +84,12 @@
       }
     }
 
-    &.edit-mode {
-      .blob-viewer-container {
-        overflow: hidden;
-      }
-
-      .monaco-editor.vs {
-        .cursor {
-          background: $black;
-          border-color: $black;
-          display: block !important;
-        }
-      }
+    &.blob-editor-container {
+      overflow: hidden;
     }
 
     .blob-viewer-container {
+      -webkit-flex: 1;
       flex: 1;
       overflow: auto;
 
@@ -138,6 +119,7 @@
     }
 
     #tabs {
+      position: relative;
       flex-shrink: 0;
       display: flex;
       width: 100%;
@@ -166,6 +148,10 @@
           vertical-align: middle;
           text-decoration: none;
           margin-right: 12px;
+
+          &:focus {
+            outline: none;
+          }
         }
 
         .close-btn {
@@ -201,7 +187,7 @@
       }
     }
 
-    #repo-file-buttons {
+    .repo-file-buttons {
       background-color: $white-light;
       padding: 5px 10px;
       border-top: 1px solid $white-normal;
@@ -312,23 +298,3 @@
     width: 100%;
   }
 }
-
-@keyframes swipeRightAppear {
-  0% {
-    transform: scaleX(0.00);
-  }
-
-  100% {
-    transform: scaleX(1.00);
-  }
-}
-
-@keyframes swipeRightDissapear {
-  0% {
-    transform: scaleX(1.00);
-  }
-
-  100% {
-    transform: scaleX(0.00);
-  }
-}
diff --git a/app/controllers/confirmations_controller.rb b/app/controllers/confirmations_controller.rb
index 80ab681ed87..bc0948cd3fb 100644
--- a/app/controllers/confirmations_controller.rb
+++ b/app/controllers/confirmations_controller.rb
@@ -10,7 +10,7 @@ class ConfirmationsController < Devise::ConfirmationsController
     users_almost_there_path
   end
 
-  def after_confirmation_path_for(_resource_name, resource)
+  def after_confirmation_path_for(resource_name, resource)
     # incoming resource can either be a :user or an :email
     if signed_in?(:user)
       after_sign_in(resource)
diff --git a/app/controllers/help_controller.rb b/app/controllers/help_controller.rb
index 572915a4930..38f379dbf4f 100644
--- a/app/controllers/help_controller.rb
+++ b/app/controllers/help_controller.rb
@@ -57,6 +57,10 @@ class HelpController < ApplicationController
   def shortcuts
   end
 
+  def instance_configuration
+    @instance_configuration = InstanceConfiguration.new
+  end
+
   def ui
     @user = User.new(id: 0, name: 'John Doe', username: '@johndoe')
   end
diff --git a/app/controllers/projects/blob_controller.rb b/app/controllers/projects/blob_controller.rb
index 183a6f88a6a..770381472c5 100644
--- a/app/controllers/projects/blob_controller.rb
+++ b/app/controllers/projects/blob_controller.rb
@@ -205,6 +205,7 @@ class Projects::BlobController < Projects::ApplicationController
     tree_path = path_segments.join('/')
 
     render json: json.merge(
+      id: @blob.id,
       path: blob.path,
       name: blob.name,
       extension: blob.extension,
diff --git a/app/controllers/projects/branches_controller.rb b/app/controllers/projects/branches_controller.rb
index 7f03ce07dec..f28df83d5a5 100644
--- a/app/controllers/projects/branches_controller.rb
+++ b/app/controllers/projects/branches_controller.rb
@@ -15,6 +15,8 @@ class Projects::BranchesController < Projects::ApplicationController
     respond_to do |format|
       format.html do
         @refs_pipelines = @project.pipelines.latest_successful_for_refs(@branches.map(&:name))
+        @merged_branch_names =
+          repository.merged_branch_names(@branches.map(&:name))
         # n+1: https://gitlab.com/gitlab-org/gitlab-ce/issues/37429
         Gitlab::GitalyClient.allow_n_plus_1_calls do
           @max_commits = @branches.reduce(0) do |memo, branch|
diff --git a/app/controllers/projects/group_links_controller.rb b/app/controllers/projects/group_links_controller.rb
index f59200d3b1f..dbc1c8bcc28 100644
--- a/app/controllers/projects/group_links_controller.rb
+++ b/app/controllers/projects/group_links_controller.rb
@@ -12,12 +12,7 @@ class Projects::GroupLinksController < Projects::ApplicationController
 
     if group
       return render_404 unless can?(current_user, :read_group, group)
-
-      project.project_group_links.create(
-        group: group,
-        group_access: params[:link_group_access],
-        expires_at: params[:expires_at]
-      )
+      Projects::GroupLinks::CreateService.new(project, current_user, group_link_create_params).execute(group)
     else
       flash[:alert] = 'Please select a group.'
     end
@@ -32,7 +27,9 @@ class Projects::GroupLinksController < Projects::ApplicationController
   end
 
   def destroy
-    project.project_group_links.find(params[:id]).destroy
+    group_link = project.project_group_links.find(params[:id])
+
+    ::Projects::GroupLinks::DestroyService.new(project, current_user).execute(group_link)
 
     respond_to do |format|
       format.html do
@@ -47,4 +44,8 @@ class Projects::GroupLinksController < Projects::ApplicationController
   def group_link_params
     params.require(:group_link).permit(:group_access, :expires_at)
   end
+
+  def group_link_create_params
+    params.permit(:link_group_access, :expires_at)
+  end
 end
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index b7a108a0ebd..6a5e4538717 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -16,7 +16,7 @@ class Projects::IssuesController < Projects::ApplicationController
   before_action :authorize_create_issue!, only: [:new, :create]
 
   # Allow modify issue
-  before_action :authorize_update_issue!, only: [:update, :move]
+  before_action :authorize_update_issue!, only: [:edit, :update, :move]
 
   # Allow create a new branch and empty WIP merge request from current issue
   before_action :authorize_create_merge_request!, only: [:create_merge_request]
@@ -63,6 +63,10 @@ class Projects::IssuesController < Projects::ApplicationController
     respond_with(@issue)
   end
 
+  def edit
+    respond_with(@issue)
+  end
+
   def show
     @noteable = @issue
     @note     = @project.notes.new(noteable: @issue)
@@ -70,7 +74,7 @@ class Projects::IssuesController < Projects::ApplicationController
     respond_to do |format|
       format.html
       format.json do
-        render json: serializer.represent(@issue)
+        render json: serializer.represent(@issue, serializer: params[:serializer])
       end
     end
   end
@@ -122,6 +126,10 @@ class Projects::IssuesController < Projects::ApplicationController
     @issue = Issues::UpdateService.new(project, current_user, update_params).execute(issue)
 
     respond_to do |format|
+      format.html do
+        recaptcha_check_with_fallback { render :edit }
+      end
+
       format.json do
         render_issue_json
       end
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index c5204080333..2b0294c8387 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -83,7 +83,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
       format.json do
         Gitlab::PollingInterval.set_header(response, interval: 10_000)
 
-        render json: serializer.represent(@merge_request, basic: params[:basic])
+        render json: serializer.represent(@merge_request, serializer: params[:serializer])
       end
 
       format.patch  do
diff --git a/app/controllers/projects/milestones_controller.rb b/app/controllers/projects/milestones_controller.rb
index c94384d2a1a..980bbf699b6 100644
--- a/app/controllers/projects/milestones_controller.rb
+++ b/app/controllers/projects/milestones_controller.rb
@@ -2,13 +2,13 @@ class Projects::MilestonesController < Projects::ApplicationController
   include MilestoneActions
 
   before_action :check_issuables_available!
-  before_action :milestone, only: [:edit, :update, :destroy, :show, :merge_requests, :participants, :labels]
+  before_action :milestone, only: [:edit, :update, :destroy, :show, :merge_requests, :participants, :labels, :promote]
 
   # Allow read any milestone
   before_action :authorize_read_milestone!
 
   # Allow admin milestone
-  before_action :authorize_admin_milestone!, except: [:index, :show, :merge_requests, :participants, :labels]
+  before_action :authorize_admin_milestone!, except: [:index, :show, :merge_requests, :participants, :labels, :promote]
 
   respond_to :html
 
@@ -69,6 +69,14 @@ class Projects::MilestonesController < Projects::ApplicationController
     end
   end
 
+  def promote
+    promoted_milestone = Milestones::PromoteService.new(project, current_user).execute(milestone)
+    flash[:notice] = "Milestone has been promoted to group milestone."
+    redirect_to group_milestone_path(project.group, promoted_milestone.iid)
+  rescue Milestones::PromoteService::PromoteMilestoneError => error
+    redirect_to milestone, alert: error.message
+  end
+
   def destroy
     return access_denied! unless can?(current_user, :admin_milestone, @project)
 
diff --git a/app/controllers/projects/tree_controller.rb b/app/controllers/projects/tree_controller.rb
index 756f7e5df8c..f3719059f88 100644
--- a/app/controllers/projects/tree_controller.rb
+++ b/app/controllers/projects/tree_controller.rb
@@ -36,7 +36,6 @@ class Projects::TreeController < Projects::ApplicationController
 
       format.json do
         page_title @path.presence || _("Files"), @ref, @project.name_with_namespace
-        response.header['is-root'] = @path.empty?
 
         # n+1: https://gitlab.com/gitlab-org/gitlab-ce/issues/38261
         Gitlab::GitalyClient.allow_n_plus_1_calls do
diff --git a/app/finders/branches_finder.rb b/app/finders/branches_finder.rb
index 533076585c0..852eac3647d 100644
--- a/app/finders/branches_finder.rb
+++ b/app/finders/branches_finder.rb
@@ -23,7 +23,7 @@ class BranchesFinder
 
   def filter_by_name(branches)
     if search
-      branches.select { |branch| branch.name.include?(search) }
+      branches.select { |branch| branch.name.upcase.include?(search.upcase) }
     else
       branches
     end
diff --git a/app/helpers/application_settings_helper.rb b/app/helpers/application_settings_helper.rb
index 467daf0d99a..2b6ecad81c6 100644
--- a/app/helpers/application_settings_helper.rb
+++ b/app/helpers/application_settings_helper.rb
@@ -120,6 +120,15 @@ module ApplicationSettingsHelper
     message.html_safe
   end
 
+  def circuitbreaker_access_retries_help_text
+    _('The number of attempts GitLab will make to access a storage.')
+  end
+
+  def circuitbreaker_backoff_threshold_help_text
+    _("The number of failures after which GitLab will start temporarily "\
+      "disabling access to a storage shard on a host")
+  end
+
   def circuitbreaker_failure_wait_time_help_text
     _("When access to a storage fails. GitLab will prevent access to the "\
       "storage for the time specified here. This allows the filesystem to "\
@@ -144,6 +153,8 @@ module ApplicationSettingsHelper
       :akismet_api_key,
       :akismet_enabled,
       :auto_devops_enabled,
+      :circuitbreaker_access_retries,
+      :circuitbreaker_backoff_threshold,
       :circuitbreaker_failure_count_threshold,
       :circuitbreaker_failure_reset_time,
       :circuitbreaker_failure_wait_time,
diff --git a/app/helpers/instance_configuration_helper.rb b/app/helpers/instance_configuration_helper.rb
new file mode 100644
index 00000000000..cee319f20bc
--- /dev/null
+++ b/app/helpers/instance_configuration_helper.rb
@@ -0,0 +1,18 @@
+module InstanceConfigurationHelper
+  def instance_configuration_cell_html(value, &block)
+    return '-' unless value.to_s.presence
+
+    block_given? ? yield(value) : value
+  end
+
+  def instance_configuration_host(host)
+    @instance_configuration_host ||= instance_configuration_cell_html(host).capitalize
+  end
+
+  # Value must be in bytes
+  def instance_configuration_human_size_cell(value)
+    instance_configuration_cell_html(value) do |v|
+      number_to_human_size(v, strip_insignificant_zeros: true, significant: false)
+    end
+  end
+end
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index baa2d6e375e..d0069cd48cf 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -33,15 +33,17 @@ module IssuablesHelper
   end
 
   def serialize_issuable(issuable)
-    case issuable
-    when Issue
-      IssueSerializer.new(current_user: current_user, project: issuable.project).represent(issuable).to_json
-    when MergeRequest
-      MergeRequestSerializer
-        .new(current_user: current_user, project: issuable.project)
-        .represent(issuable)
-        .to_json
-    end
+    serializer_klass = case issuable
+                       when Issue
+                         IssueSerializer
+                       when MergeRequest
+                         MergeRequestSerializer
+                       end
+
+    serializer_klass
+      .new(current_user: current_user, project: issuable.project)
+      .represent(issuable)
+      .to_json
   end
 
   def template_dropdown_tag(issuable, &block)
@@ -357,7 +359,8 @@ module IssuablesHelper
 
   def issuable_sidebar_options(issuable, can_edit_issuable)
     {
-      endpoint: "#{issuable_json_path(issuable)}?basic=true",
+      endpoint: "#{issuable_json_path(issuable)}?serializer=sidebar",
+      toggleSubscriptionEndpoint: toggle_subscription_path(issuable),
       moveIssueEndpoint: move_namespace_project_issue_path(namespace_id: issuable.project.namespace.to_param, project_id: issuable.project, id: issuable),
       projectsAutocompleteEndpoint: autocomplete_projects_path(project_id: @project.id),
       editable: can_edit_issuable,
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index a23a43c9f43..8ada746b244 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -1,7 +1,7 @@
 module NavHelper
   def page_with_sidebar_class
     class_name = page_gutter_class
-    class_name << 'page-with-new-sidebar' if defined?(@left_sidebar) && @left_sidebar
+    class_name << 'page-with-contextual-sidebar' if defined?(@left_sidebar) && @left_sidebar
     class_name << 'page-with-icon-sidebar' if collapsed_sidebar? && @left_sidebar
 
     class_name
@@ -19,11 +19,7 @@ module NavHelper
       end
     elsif current_path?('jobs#show')
       %w[page-gutter build-sidebar right-sidebar-expanded]
-    elsif current_path?('wikis#show') ||
-        current_path?('wikis#edit') ||
-        current_path?('wikis#update') ||
-        current_path?('wikis#history') ||
-        current_path?('wikis#git_access')
+    elsif current_controller?('wikis') && current_action?('show', 'create', 'edit', 'update', 'history', 'git_access')
       %w[page-gutter wiki-sidebar right-sidebar-expanded]
     else
       []
diff --git a/app/helpers/storage_health_helper.rb b/app/helpers/storage_health_helper.rb
index 544c9efb845..4d2180f7eee 100644
--- a/app/helpers/storage_health_helper.rb
+++ b/app/helpers/storage_health_helper.rb
@@ -16,17 +16,16 @@ module StorageHealthHelper
   def message_for_circuit_breaker(circuit_breaker)
     maximum_failures = circuit_breaker.failure_count_threshold
     current_failures = circuit_breaker.failure_count
-    permanently_broken = circuit_breaker.circuit_broken? && current_failures >= maximum_failures
 
     translation_params = { number_of_failures: current_failures,
                            maximum_failures: maximum_failures,
                            number_of_seconds: circuit_breaker.failure_wait_time }
 
-    if permanently_broken
+    if circuit_breaker.circuit_broken?
       s_("%{number_of_failures} of %{maximum_failures} failures. GitLab will not "\
          "retry automatically. Reset storage information when the problem is "\
          "resolved.") % translation_params
-    elsif circuit_breaker.circuit_broken?
+    elsif circuit_breaker.backing_off?
       _("%{number_of_failures} of %{maximum_failures} failures. GitLab will "\
         "block access for %{number_of_seconds} seconds.") % translation_params
     else
diff --git a/app/models/application_setting.rb b/app/models/application_setting.rb
index 90cdcef991f..5b859fd3e1e 100644
--- a/app/models/application_setting.rb
+++ b/app/models/application_setting.rb
@@ -153,20 +153,32 @@ class ApplicationSetting < ActiveRecord::Base
             presence: true,
             numericality: { greater_than_or_equal_to: 0 }
 
-  validates :circuitbreaker_failure_count_threshold,
+  validates :circuitbreaker_backoff_threshold,
+            :circuitbreaker_failure_count_threshold,
             :circuitbreaker_failure_wait_time,
             :circuitbreaker_failure_reset_time,
             :circuitbreaker_storage_timeout,
             presence: true,
             numericality: { only_integer: true, greater_than_or_equal_to: 0 }
 
-  validates :gitaly_timeout_default,
+  validates :circuitbreaker_access_retries,
             presence: true,
-            numericality: { only_integer: true, greater_than: 0 }
+            numericality: { only_integer: true, greater_than_or_equal_to: 1 }
+
+  validates_each :circuitbreaker_backoff_threshold do |record, attr, value|
+    if value.to_i >= record.circuitbreaker_failure_count_threshold
+      record.errors.add(attr, _("The circuitbreaker backoff threshold should be "\
+                                "lower than the failure count threshold"))
+    end
+  end
+
+  validates :gitaly_timeout_default,
+    presence: true,
+    numericality: { only_integer: true, greater_than: 0 }
 
   validates :gitaly_timeout_fast,
-            presence: true,
-            numericality: { only_integer: true, greater_than: 0, less_than_or_equal_to: :gitaly_timeout_default }
+    presence: true,
+    numericality: { only_integer: true, greater_than: 0, less_than_or_equal_to: :gitaly_timeout_default }
 
   SUPPORTED_KEY_TYPES.each do |type|
     validates :"#{type}_key_restriction", presence: true, key_restriction: { type: type }
@@ -418,7 +430,7 @@ class ApplicationSetting < ActiveRecord::Base
   #   the enabling/disabling is `performance_bar_allowed_group_id`
   # - If `enable` is false, we set `performance_bar_allowed_group_id` to `nil`
   def performance_bar_enabled=(enable)
-    return if enable
+    return if Gitlab::Utils.to_boolean(enable)
 
     self.performance_bar_allowed_group_id = nil
   end
diff --git a/app/models/ci/pipeline.rb b/app/models/ci/pipeline.rb
index cf3ce3c9e54..ca65e81f27a 100644
--- a/app/models/ci/pipeline.rb
+++ b/app/models/ci/pipeline.rb
@@ -249,9 +249,7 @@ module Ci
     end
 
     def commit
-      @commit ||= project.commit(sha)
-    rescue
-      nil
+      @commit ||= project.commit_by(oid: sha)
     end
 
     def branch?
diff --git a/app/models/concerns/subscribable.rb b/app/models/concerns/subscribable.rb
index 274b38a7708..f478c8ede18 100644
--- a/app/models/concerns/subscribable.rb
+++ b/app/models/concerns/subscribable.rb
@@ -13,6 +13,8 @@ module Subscribable
   end
 
   def subscribed?(user, project = nil)
+    return false unless user
+
     if subscription = subscriptions.find_by(user: user, project: project)
       subscription.subscribed
     else
diff --git a/app/models/email.rb b/app/models/email.rb
index 384f38f2db7..2da8b050149 100644
--- a/app/models/email.rb
+++ b/app/models/email.rb
@@ -14,6 +14,8 @@ class Email < ActiveRecord::Base
   devise :confirmable
   self.reconfirmable = false  # currently email can't be changed, no need to reconfirm
 
+  delegate :username, to: :user
+
   def email=(value)
     write_attribute(:email, value.downcase.strip)
   end
diff --git a/app/models/environment.rb b/app/models/environment.rb
index b6868ccbe8f..e613d21add6 100644
--- a/app/models/environment.rb
+++ b/app/models/environment.rb
@@ -110,7 +110,7 @@ class Environment < ActiveRecord::Base
   end
 
   def ref_path
-    "refs/#{Repository::REF_ENVIRONMENTS}/#{Shellwords.shellescape(name)}"
+    "refs/#{Repository::REF_ENVIRONMENTS}/#{generate_slug}"
   end
 
   def formatted_external_url
diff --git a/app/models/identity.rb b/app/models/identity.rb
index 920a25932b4..ac8094b610e 100644
--- a/app/models/identity.rb
+++ b/app/models/identity.rb
@@ -7,7 +7,10 @@ class Identity < ActiveRecord::Base
   validates :extern_uid, allow_blank: true, uniqueness: { scope: :provider }
   validates :user_id, uniqueness: { scope: :provider }
 
-  scope :with_extern_uid, ->(provider, extern_uid) { where(extern_uid: extern_uid, provider: provider) }
+  scope :with_extern_uid, ->(provider, extern_uid) do
+    extern_uid = Gitlab::LDAP::Person.normalize_dn(extern_uid) if provider.starts_with?('ldap')
+    where(extern_uid: extern_uid, provider: provider)
+  end
 
   def ldap?
     provider.starts_with?('ldap')
diff --git a/app/models/instance_configuration.rb b/app/models/instance_configuration.rb
new file mode 100644
index 00000000000..b30b707e5fe
--- /dev/null
+++ b/app/models/instance_configuration.rb
@@ -0,0 +1,71 @@
+require 'resolv'
+
+class InstanceConfiguration
+  SSH_ALGORITHMS = %w(DSA ECDSA ED25519 RSA).freeze
+  SSH_ALGORITHMS_PATH = '/etc/ssh/'.freeze
+  CACHE_KEY = 'instance_configuration'.freeze
+  EXPIRATION_TIME = 24.hours
+
+  def settings
+    @configuration ||= Rails.cache.fetch(CACHE_KEY, expires_in: EXPIRATION_TIME) do
+      { ssh_algorithms_hashes: ssh_algorithms_hashes,
+        host: host,
+        gitlab_pages: gitlab_pages,
+        gitlab_ci: gitlab_ci }.deep_symbolize_keys
+    end
+  end
+
+  private
+
+  def ssh_algorithms_hashes
+    SSH_ALGORITHMS.map { |algo| ssh_algorithm_hashes(algo) }.compact
+  end
+
+  def host
+    Settings.gitlab.host
+  end
+
+  def gitlab_pages
+    Settings.pages.to_h.merge(ip_address: resolv_dns(Settings.pages.host))
+  end
+
+  def resolv_dns(dns)
+    Resolv.getaddress(dns)
+  rescue Resolv::ResolvError
+  end
+
+  def gitlab_ci
+    Settings.gitlab_ci
+            .to_h
+            .merge(artifacts_max_size: { value: Settings.artifacts.max_size&.megabytes,
+                                         default: 100.megabytes })
+  end
+
+  def ssh_algorithm_file(algorithm)
+    File.join(SSH_ALGORITHMS_PATH, "ssh_host_#{algorithm.downcase}_key.pub")
+  end
+
+  def ssh_algorithm_hashes(algorithm)
+    content = ssh_algorithm_file_content(algorithm)
+    return unless content.present?
+
+    { name: algorithm,
+      md5: ssh_algorithm_md5(content),
+      sha256: ssh_algorithm_sha256(content) }
+  end
+
+  def ssh_algorithm_file_content(algorithm)
+    file = ssh_algorithm_file(algorithm)
+    return unless File.exist?(file)
+
+    File.read(file)
+  end
+
+  def ssh_algorithm_md5(ssh_file_content)
+    OpenSSL::Digest::MD5.hexdigest(ssh_file_content).scan(/../).join(':')
+  end
+
+  def ssh_algorithm_sha256(ssh_file_content)
+    OpenSSL::Digest::SHA256.hexdigest(ssh_file_content)
+  end
+end
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index c3fae16d109..d45b9c805a4 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -396,6 +396,10 @@ class MergeRequest < ActiveRecord::Base
   end
 
   def merge_ongoing?
+    # While the MergeRequest is locked, it should present itself as 'merge ongoing'.
+    # The unlocking process is handled by StuckMergeJobsWorker scheduled in Cron.
+    return true if locked?
+
     !!merge_jid && !merged? && Gitlab::SidekiqStatus.running?(merge_jid)
   end
 
@@ -874,7 +878,7 @@ class MergeRequest < ActiveRecord::Base
   #
   def all_commit_shas
     if persisted?
-      column_shas = MergeRequestDiffCommit.where(merge_request_diff: merge_request_diffs).pluck('DISTINCT(sha)')
+      column_shas = MergeRequestDiffCommit.where(merge_request_diff: merge_request_diffs).limit(10_000).pluck('sha')
       serialised_shas = merge_request_diffs.where.not(st_commits: nil).flat_map(&:commit_shas)
 
       (column_shas + serialised_shas).uniq
diff --git a/app/models/merge_request_diff_commit.rb b/app/models/merge_request_diff_commit.rb
index 670b26d4ca3..b75387e236e 100644
--- a/app/models/merge_request_diff_commit.rb
+++ b/app/models/merge_request_diff_commit.rb
@@ -17,7 +17,9 @@ class MergeRequestDiffCommit < ActiveRecord::Base
       commit_hash.merge(
         merge_request_diff_id: merge_request_diff_id,
         relative_order: index,
-        sha: sha_attribute.type_cast_for_database(sha)
+        sha: sha_attribute.type_cast_for_database(sha),
+        authored_date: Gitlab::Database.sanitize_timestamp(commit_hash[:authored_date]),
+        committed_date: Gitlab::Database.sanitize_timestamp(commit_hash[:committed_date])
       )
     end
 
diff --git a/app/models/pages_domain.rb b/app/models/pages_domain.rb
index 5d798247863..2e824cda525 100644
--- a/app/models/pages_domain.rb
+++ b/app/models/pages_domain.rb
@@ -16,9 +16,9 @@ class PagesDomain < ActiveRecord::Base
     key: Gitlab::Application.secrets.db_key_base,
     algorithm: 'aes-256-cbc'
 
-  after_create :update
-  after_save :update
-  after_destroy :update
+  after_create :update_daemon
+  after_save :update_daemon
+  after_destroy :update_daemon
 
   def to_param
     domain
@@ -80,7 +80,7 @@ class PagesDomain < ActiveRecord::Base
 
   private
 
-  def update
+  def update_daemon
     ::Projects::UpdatePagesConfigurationService.new(project).execute
   end
 
diff --git a/app/models/project.rb b/app/models/project.rb
index 4689b588906..413866b994a 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -26,7 +26,15 @@ class Project < ActiveRecord::Base
 
   NUMBER_OF_PERMITTED_BOARDS = 1
   UNKNOWN_IMPORT_URL = 'http://unknown.git'.freeze
-  LATEST_STORAGE_VERSION = 1
+  # Hashed Storage versions handle rolling out new storage to project and dependents models:
+  # nil: legacy
+  # 1: repository
+  # 2: attachments
+  LATEST_STORAGE_VERSION = 2
+  HASHED_STORAGE_FEATURES = {
+    repository: 1,
+    attachments: 2
+  }.freeze
 
   cache_markdown_field :description, pipeline: :description
 
@@ -120,6 +128,7 @@ class Project < ActiveRecord::Base
   has_one :mock_deployment_service
   has_one :mock_monitoring_service
   has_one :microsoft_teams_service
+  has_one :packagist_service
 
   # TODO: replace these relations with the fork network versions
   has_one  :forked_project_link,  foreign_key: "forked_to_project_id"
@@ -540,6 +549,10 @@ class Project < ActiveRecord::Base
     repository.commit(ref)
   end
 
+  def commit_by(oid:)
+    repository.commit_by(oid: oid)
+  end
+
   # ref can't be HEAD, can only be branch/tag name or SHA
   def latest_successful_builds_for(ref = default_branch)
     latest_pipeline = pipelines.latest_successful_for(ref)
@@ -553,7 +566,7 @@ class Project < ActiveRecord::Base
 
   def merge_base_commit(first_commit_id, second_commit_id)
     sha = repository.merge_base(first_commit_id, second_commit_id)
-    repository.commit(sha) if sha
+    commit_by(oid: sha) if sha
   end
 
   def saved?
@@ -1079,6 +1092,7 @@ class Project < ActiveRecord::Base
 
   def hook_attrs(backward: true)
     attrs = {
+      id: id,
       name: name,
       description: description,
       web_url: web_url,
@@ -1390,6 +1404,19 @@ class Project < ActiveRecord::Base
     end
   end
 
+  def after_rename_repo
+    path_before_change = previous_changes['path'].first
+
+    # We need to check if project had been rolled out to move resource to hashed storage or not and decide
+    # if we need execute any take action or no-op.
+
+    unless hashed_storage?(:attachments)
+      Gitlab::UploadsTransfer.new.rename_project(path_before_change, self.path, namespace.full_path)
+    end
+
+    Gitlab::PagesTransfer.new.rename_project(path_before_change, self.path, namespace.full_path)
+  end
+
   def rename_repo_notify!
     send_move_instructions(full_path_was)
     expires_full_path_cache
@@ -1400,13 +1427,6 @@ class Project < ActiveRecord::Base
     reload_repository!
   end
 
-  def after_rename_repo
-    path_before_change = previous_changes['path'].first
-
-    Gitlab::UploadsTransfer.new.rename_project(path_before_change, self.path, namespace.full_path)
-    Gitlab::PagesTransfer.new.rename_project(path_before_change, self.path, namespace.full_path)
-  end
-
   def running_or_pending_build_count(force: false)
     Rails.cache.fetch(['projects', id, 'running_or_pending_build_count'], force: force) do
       builds.running_or_pending.count(:all)
@@ -1596,8 +1616,13 @@ class Project < ActiveRecord::Base
     [nil, 0].include?(self.storage_version)
   end
 
-  def hashed_storage?
-    self.storage_version && self.storage_version >= 1
+  # Check if Hashed Storage is enabled for the project with at least informed feature rolled out
+  #
+  # @param [Symbol] feature that needs to be rolled out for the project (:repository, :attachments)
+  def hashed_storage?(feature)
+    raise ArgumentError, "Invalid feature" unless HASHED_STORAGE_FEATURES.include?(feature)
+
+    self.storage_version && self.storage_version >= HASHED_STORAGE_FEATURES[feature]
   end
 
   def renamed?
@@ -1633,7 +1658,7 @@ class Project < ActiveRecord::Base
   end
 
   def migrate_to_hashed_storage!
-    return if hashed_storage?
+    return if hashed_storage?(:repository)
 
     update!(repository_read_only: true)
 
@@ -1658,7 +1683,7 @@ class Project < ActiveRecord::Base
 
   def storage
     @storage ||=
-      if hashed_storage?
+      if hashed_storage?(:repository)
         Storage::HashedProject.new(self)
       else
         Storage::LegacyProject.new(self)
diff --git a/app/models/project_services/jira_service.rb b/app/models/project_services/jira_service.rb
index 9ee3a533c1e..b487378edd2 100644
--- a/app/models/project_services/jira_service.rb
+++ b/app/models/project_services/jira_service.rb
@@ -3,6 +3,8 @@ class JiraService < IssueTrackerService
 
   validates :url, url: true, presence: true, if: :activated?
   validates :api_url, url: true, allow_blank: true
+  validates :username, presence: true, if: :activated?
+  validates :password, presence: true, if: :activated?
 
   prop_accessor :username, :password, :url, :api_url, :jira_issue_transition_id, :title, :description
 
diff --git a/app/models/project_services/kubernetes_service.rb b/app/models/project_services/kubernetes_service.rb
index 8ba07173c74..5c0b3338a62 100644
--- a/app/models/project_services/kubernetes_service.rb
+++ b/app/models/project_services/kubernetes_service.rb
@@ -153,7 +153,10 @@ class KubernetesService < DeploymentService
   end
 
   def default_namespace
-    "#{project.path}-#{project.id}" if project.present?
+    return unless project
+
+    slug = "#{project.path}-#{project.id}".downcase
+    slug.gsub(/[^-a-z0-9]/, '-').gsub(/^-+/, '')
   end
 
   def build_kubeclient!(api_path: 'api', api_version: 'v1')
diff --git a/app/models/project_services/packagist_service.rb b/app/models/project_services/packagist_service.rb
new file mode 100644
index 00000000000..f68a0c1a3c3
--- /dev/null
+++ b/app/models/project_services/packagist_service.rb
@@ -0,0 +1,65 @@
+class PackagistService < Service
+  include HTTParty
+
+  prop_accessor :username, :token, :server
+
+  validates :username, presence: true, if: :activated?
+  validates :token, presence: true, if: :activated?
+
+  default_value_for :push_events, true
+  default_value_for :tag_push_events, true
+
+  after_save :compose_service_hook, if: :activated?
+
+  def title
+    'Packagist'
+  end
+
+  def description
+    'Update your project on Packagist, the main Composer repository'
+  end
+
+  def self.to_param
+    'packagist'
+  end
+
+  def fields
+    [
+      { type: 'text', name: 'username', placeholder: '', required: true },
+      { type: 'text', name: 'token', placeholder: '', required: true },
+      { type: 'text', name: 'server', placeholder: 'https://packagist.org', required: false }
+    ]
+  end
+
+  def self.supported_events
+    %w(push merge_request tag_push)
+  end
+
+  def execute(data)
+    return unless supported_events.include?(data[:object_kind])
+
+    service_hook.execute(data)
+  end
+
+  def test(data)
+    begin
+      result = execute(data)
+      return { success: false, result: result[:message] } if result[:http_status] != 202
+    rescue StandardError => error
+      return { success: false, result: error }
+    end
+
+    { success: true, result: result[:message] }
+  end
+
+  def compose_service_hook
+    hook = service_hook || build_service_hook
+    hook.url = hook_url
+    hook.save
+  end
+
+  def hook_url
+    base_url = server.present? ? server : 'https://packagist.org'
+    "#{base_url}/api/update-package?username=#{username}&apiToken=#{token}"
+  end
+end
diff --git a/app/models/repository.rb b/app/models/repository.rb
index 4324ea46aac..44a1e9ce529 100644
--- a/app/models/repository.rb
+++ b/app/models/repository.rb
@@ -76,6 +76,7 @@ class Repository
     @full_path = full_path
     @disk_path = disk_path || full_path
     @project = project
+    @commit_cache = {}
   end
 
   def ==(other)
@@ -103,18 +104,17 @@ class Repository
 
   def commit(ref = 'HEAD')
     return nil unless exists?
+    return ref if ref.is_a?(::Commit)
 
-    commit =
-      if ref.is_a?(Gitlab::Git::Commit)
-        ref
-      else
-        Gitlab::Git::Commit.find(raw_repository, ref)
-      end
+    find_commit(ref)
+  end
 
-    commit = ::Commit.new(commit, @project) if commit
-    commit
-  rescue Rugged::OdbError, Rugged::TreeError
-    nil
+  # Finding a commit by the passed SHA
+  # Also takes care of caching, based on the SHA
+  def commit_by(oid:)
+    return @commit_cache[oid] if @commit_cache.key?(oid)
+
+    @commit_cache[oid] = find_commit(oid)
   end
 
   def commits(ref, path: nil, limit: nil, offset: nil, skip_merges: false, after: nil, before: nil)
@@ -231,7 +231,7 @@ class Repository
   # branches or tags, but we want to keep some of these commits around, for
   # example if they have comments or CI builds.
   def keep_around(sha)
-    return unless sha && commit(sha)
+    return unless sha && commit_by(oid: sha)
 
     return if kept_around?(sha)
 
@@ -862,22 +862,12 @@ class Repository
   end
 
   def ff_merge(user, source, target_branch, merge_request: nil)
-    our_commit = rugged.branches[target_branch].target
-    their_commit =
-      if source.is_a?(Gitlab::Git::Commit)
-        source.raw_commit
-      else
-        rugged.lookup(source)
-      end
-
-    raise 'Invalid merge target' if our_commit.nil?
-    raise 'Invalid merge source' if their_commit.nil?
+    their_commit_id = commit(source)&.id
+    raise 'Invalid merge source' if their_commit_id.nil?
 
-    with_branch(user, target_branch) do |start_commit|
-      merge_request&.update(in_progress_merge_commit_sha: their_commit.oid)
+    merge_request&.update(in_progress_merge_commit_sha: their_commit_id)
 
-      their_commit.oid
-    end
+    with_cache_hooks { raw.ff_merge(user, their_commit_id, target_branch) }
   end
 
   def revert(
@@ -912,18 +902,27 @@ class Repository
     end
   end
 
-  def merged_to_root_ref?(branch_name)
-    branch_commit = commit(branch_name)
-    root_ref_commit = commit(root_ref)
+  def merged_to_root_ref?(branch_or_name, pre_loaded_merged_branches = nil)
+    branch = Gitlab::Git::Branch.find(self, branch_or_name)
 
-    if branch_commit
-      same_head = branch_commit.id == root_ref_commit.id
-      !same_head && ancestor?(branch_commit.id, root_ref_commit.id)
+    if branch
+      root_ref_sha = commit(root_ref).sha
+      same_head = branch.target == root_ref_sha
+      merged =
+        if pre_loaded_merged_branches
+          pre_loaded_merged_branches.include?(branch.name)
+        else
+          ancestor?(branch.target, root_ref_sha)
+        end
+
+      !same_head && merged
     else
       nil
     end
   end
 
+  delegate :merged_branch_names, to: :raw_repository
+
   def merge_base(first_commit_id, second_commit_id)
     first_commit_id = commit(first_commit_id).try(:id) || first_commit_id
     second_commit_id = commit(second_commit_id).try(:id) || second_commit_id
@@ -1031,6 +1030,10 @@ class Repository
     if instance_variable_defined?(ivar)
       instance_variable_get(ivar)
     else
+      # If the repository doesn't exist and a fallback was specified we return
+      # that value inmediately. This saves us Rugged/gRPC invocations.
+      return fallback unless fallback.nil? || exists?
+
       begin
         value =
           if memoize_only
@@ -1040,8 +1043,9 @@ class Repository
           end
         instance_variable_set(ivar, value)
       rescue Rugged::ReferenceError, Gitlab::Git::Repository::NoRepository
-        # if e.g. HEAD or the entire repository doesn't exist we want to
-        # gracefully handle this and not cache anything.
+        # Even if the above `#exists?` check passes these errors might still
+        # occur (for example because of a non-existing HEAD). We want to
+        # gracefully handle this and not cache anything
         fallback
       end
     end
@@ -1069,6 +1073,18 @@ class Repository
 
   private
 
+  # TODO Generice finder, later split this on finders by Ref or Oid
+  # gitlab-org/gitlab-ce#39239
+  def find_commit(oid_or_ref)
+    commit = if oid_or_ref.is_a?(Gitlab::Git::Commit)
+               oid_or_ref
+             else
+               Gitlab::Git::Commit.find(raw_repository, oid_or_ref)
+             end
+
+    ::Commit.new(commit, @project) if commit
+  end
+
   def blob_data_at(sha, path)
     blob = blob_at(sha, path)
     return unless blob
@@ -1107,12 +1123,12 @@ class Repository
 
   def last_commit_for_path_by_gitaly(sha, path)
     c = raw_repository.gitaly_commit_client.last_commit_for_path(sha, path)
-    commit(c)
+    commit_by(oid: c)
   end
 
   def last_commit_for_path_by_rugged(sha, path)
     sha = last_commit_id_for_path_by_shelling_out(sha, path)
-    commit(sha)
+    commit_by(oid: sha)
   end
 
   def last_commit_id_for_path_by_shelling_out(sha, path)
diff --git a/app/models/service.rb b/app/models/service.rb
index 6b64079215f..fdd2605e3e3 100644
--- a/app/models/service.rb
+++ b/app/models/service.rb
@@ -238,6 +238,7 @@ class Service < ActiveRecord::Base
       kubernetes
       mattermost_slash_commands
       mattermost
+      packagist
       pipelines_email
       pivotaltracker
       prometheus
diff --git a/app/serializers/issuable_sidebar_entity.rb b/app/serializers/issuable_sidebar_entity.rb
new file mode 100644
index 00000000000..ff23d8bf0c7
--- /dev/null
+++ b/app/serializers/issuable_sidebar_entity.rb
@@ -0,0 +1,16 @@
+class IssuableSidebarEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :participants, using: ::API::Entities::UserBasic do |issuable|
+    issuable.participants(request.current_user)
+  end
+
+  expose :subscribed do |issuable|
+    issuable.subscribed?(request.current_user, issuable.project)
+  end
+
+  expose :time_estimate
+  expose :total_time_spent
+  expose :human_time_estimate
+  expose :human_total_time_spent
+end
diff --git a/app/serializers/issue_serializer.rb b/app/serializers/issue_serializer.rb
index 4fff54a9126..2555595379b 100644
--- a/app/serializers/issue_serializer.rb
+++ b/app/serializers/issue_serializer.rb
@@ -1,3 +1,16 @@
 class IssueSerializer < BaseSerializer
-  entity IssueEntity
+  # This overrided method takes care of which entity should be used
+  # to serialize the `issue` based on `basic` key in `opts` param.
+  # Hence, `entity` doesn't need to be declared on the class scope.
+  def represent(merge_request, opts = {})
+    entity =
+      case opts[:serializer]
+      when 'sidebar'
+        IssueSidebarEntity
+      else
+        IssueEntity
+      end
+
+    super(merge_request, opts, entity)
+  end
 end
diff --git a/app/serializers/issue_sidebar_entity.rb b/app/serializers/issue_sidebar_entity.rb
new file mode 100644
index 00000000000..6c823dbfe95
--- /dev/null
+++ b/app/serializers/issue_sidebar_entity.rb
@@ -0,0 +1,3 @@
+class IssueSidebarEntity < IssuableSidebarEntity
+  expose :assignees, using: API::Entities::UserBasic
+end
diff --git a/app/serializers/merge_request_basic_entity.rb b/app/serializers/merge_request_basic_entity.rb
index 8461f158bb5..d54a6516aed 100644
--- a/app/serializers/merge_request_basic_entity.rb
+++ b/app/serializers/merge_request_basic_entity.rb
@@ -1,11 +1,7 @@
-class MergeRequestBasicEntity < Grape::Entity
+class MergeRequestBasicEntity < IssuableSidebarEntity
   expose :assignee_id
   expose :merge_status
   expose :merge_error
   expose :state
   expose :source_branch_exists?, as: :source_branch_exists
-  expose :time_estimate
-  expose :total_time_spent
-  expose :human_time_estimate
-  expose :human_total_time_spent
 end
diff --git a/app/serializers/merge_request_serializer.rb b/app/serializers/merge_request_serializer.rb
index f67034ce47a..e9d98d8baca 100644
--- a/app/serializers/merge_request_serializer.rb
+++ b/app/serializers/merge_request_serializer.rb
@@ -3,7 +3,14 @@ class MergeRequestSerializer < BaseSerializer
   # to serialize the `merge_request` based on `basic` key in `opts` param.
   # Hence, `entity` doesn't need to be declared on the class scope.
   def represent(merge_request, opts = {})
-    entity = opts[:basic] ? MergeRequestBasicEntity : MergeRequestEntity
+    entity =
+      case opts[:serializer]
+      when 'basic', 'sidebar'
+        MergeRequestBasicEntity
+      else
+        MergeRequestEntity
+      end
+
     super(merge_request, opts, entity)
   end
 end
diff --git a/app/services/issues/reopen_service.rb b/app/services/issues/reopen_service.rb
index 35de4337b15..62b4b4b6a1e 100644
--- a/app/services/issues/reopen_service.rb
+++ b/app/services/issues/reopen_service.rb
@@ -9,6 +9,7 @@ module Issues
         notification_service.reopen_issue(issue, current_user)
         execute_hooks(issue, 'reopen')
         invalidate_cache_counts(issue, users: issue.assignees)
+        issue.update_project_counter_caches
       end
 
       issue
diff --git a/app/services/merge_requests/merge_service.rb b/app/services/merge_requests/merge_service.rb
index 8c5821aa870..156e7b2f078 100644
--- a/app/services/merge_requests/merge_service.rb
+++ b/app/services/merge_requests/merge_service.rb
@@ -82,16 +82,9 @@ module MergeRequests
         @merge_request.can_remove_source_branch?(branch_deletion_user)
     end
 
-    # Logs merge error message and cleans `MergeRequest#merge_jid`.
-    #
     def handle_merge_error(log_message:, save_message_on_model: false)
       Rails.logger.error("MergeService ERROR: #{merge_request_info} - #{log_message}")
-
-      if save_message_on_model
-        @merge_request.update(merge_error: log_message, merge_jid: nil)
-      else
-        clean_merge_jid
-      end
+      @merge_request.update(merge_error: log_message) if save_message_on_model
     end
 
     def merge_request_info
diff --git a/app/services/merge_requests/reopen_service.rb b/app/services/merge_requests/reopen_service.rb
index b9c65be36ec..c599a90f9fe 100644
--- a/app/services/merge_requests/reopen_service.rb
+++ b/app/services/merge_requests/reopen_service.rb
@@ -11,6 +11,7 @@ module MergeRequests
         merge_request.reload_diff(current_user)
         merge_request.mark_as_unchecked
         invalidate_cache_counts(merge_request, users: merge_request.assignees)
+        merge_request.update_project_counter_caches
       end
 
       merge_request
diff --git a/app/services/milestones/promote_service.rb b/app/services/milestones/promote_service.rb
new file mode 100644
index 00000000000..bd9cfd4e0ea
--- /dev/null
+++ b/app/services/milestones/promote_service.rb
@@ -0,0 +1,80 @@
+module Milestones
+  class PromoteService < Milestones::BaseService
+    PromoteMilestoneError = Class.new(StandardError)
+
+    def execute(milestone)
+      check_project_milestone!(milestone)
+
+      Milestone.transaction do
+        # Destroy all milestones with same title across projects
+        destroy_old_milestones(milestone)
+
+        group_milestone = clone_project_milestone(milestone)
+
+        move_children_to_group_milestone(group_milestone)
+
+        # Just to be safe
+        unless group_milestone.valid?
+          raise_error(group_milestone.errors.full_messages.to_sentence)
+        end
+
+        group_milestone
+      end
+    end
+
+    private
+
+    def milestone_ids_for_merge(group_milestone)
+      # Pluck need to be used here instead of select so the array of ids
+      # is persistent after old milestones gets deleted.
+      @milestone_ids_for_merge ||= begin
+        search_params = { title: group_milestone.title, project_ids: group_project_ids, state: 'all' }
+        milestones = MilestonesFinder.new(search_params).execute
+        milestones.pluck(:id)
+      end
+    end
+
+    def move_children_to_group_milestone(group_milestone)
+      milestone_ids_for_merge(group_milestone).in_groups_of(100) do |milestone_ids|
+        update_children(group_milestone, milestone_ids)
+      end
+    end
+
+    def check_project_milestone!(milestone)
+      raise_error('Only project milestones can be promoted.') unless milestone.project_milestone?
+    end
+
+    def clone_project_milestone(milestone)
+      params = milestone.slice(:title, :description, :start_date, :due_date, :state_event)
+
+      create_service = CreateService.new(group, current_user, params)
+
+      create_service.execute
+    end
+
+    def update_children(group_milestone, milestone_ids)
+      issues = Issue.where(project_id: group_project_ids, milestone_id: milestone_ids)
+      merge_requests = MergeRequest.where(source_project_id: group_project_ids, milestone_id: milestone_ids)
+
+      [issues, merge_requests].each do |issuable_collection|
+        issuable_collection.update_all(milestone_id: group_milestone.id)
+      end
+    end
+
+    def group
+      @group ||= parent.group || raise_error('Project does not belong to a group.')
+    end
+
+    def destroy_old_milestones(group_milestone)
+      Milestone.where(id: milestone_ids_for_merge(group_milestone)).destroy_all
+    end
+
+    def group_project_ids
+      @group_project_ids ||= group.projects.map(&:id)
+    end
+
+    def raise_error(message)
+      raise PromoteMilestoneError, "Promotion failed - #{message}"
+    end
+  end
+end
diff --git a/app/services/projects/group_links/create_service.rb b/app/services/projects/group_links/create_service.rb
new file mode 100644
index 00000000000..35624577024
--- /dev/null
+++ b/app/services/projects/group_links/create_service.rb
@@ -0,0 +1,15 @@
+module Projects
+  module GroupLinks
+    class CreateService < BaseService
+      def execute(group)
+        return false unless group
+
+        project.project_group_links.create(
+          group: group,
+          group_access: params[:link_group_access],
+          expires_at: params[:expires_at]
+        )
+      end
+    end
+  end
+end
diff --git a/app/services/projects/group_links/destroy_service.rb b/app/services/projects/group_links/destroy_service.rb
new file mode 100644
index 00000000000..fbf31214c28
--- /dev/null
+++ b/app/services/projects/group_links/destroy_service.rb
@@ -0,0 +1,10 @@
+module Projects
+  module GroupLinks
+    class DestroyService < BaseService
+      def execute(group_link)
+        return false unless group_link
+        group_link.destroy
+      end
+    end
+  end
+end
diff --git a/app/services/projects/hashed_storage_migration_service.rb b/app/services/projects/hashed_storage_migration_service.rb
index 41259de3a16..f5945f3b87f 100644
--- a/app/services/projects/hashed_storage_migration_service.rb
+++ b/app/services/projects/hashed_storage_migration_service.rb
@@ -10,7 +10,7 @@ module Projects
     end
 
     def execute
-      return if project.hashed_storage?
+      return if project.hashed_storage?(:repository)
 
       @old_disk_path = project.disk_path
       has_wiki = project.wiki.repository_exists?
diff --git a/app/services/system_hooks_service.rb b/app/services/system_hooks_service.rb
index a1c2f8d0180..5d275967821 100644
--- a/app/services/system_hooks_service.rb
+++ b/app/services/system_hooks_service.rb
@@ -83,7 +83,7 @@ class SystemHooksService
       project_id: model.id,
       owner_name: owner.name,
       owner_email: owner.respond_to?(:email) ? owner.email : "",
-      project_visibility: Project.visibility_levels.key(model.visibility_level_value).downcase
+      project_visibility: model.visibility.downcase
     }
   end
 
diff --git a/app/uploaders/file_uploader.rb b/app/uploaders/file_uploader.rb
index 7027ac4b5db..d4ba3a028be 100644
--- a/app/uploaders/file_uploader.rb
+++ b/app/uploaders/file_uploader.rb
@@ -30,7 +30,7 @@ class FileUploader < GitlabUploader
   #
   # Returns a String without a trailing slash
   def self.dynamic_path_segment(model)
-    File.join(CarrierWave.root, base_dir, model.full_path)
+    File.join(CarrierWave.root, base_dir, model.disk_path)
   end
 
   attr_accessor :model
diff --git a/app/views/admin/application_settings/_form.html.haml b/app/views/admin/application_settings/_form.html.haml
index f8f029c7763..98499a896fe 100644
--- a/app/views/admin/application_settings/_form.html.haml
+++ b/app/views/admin/application_settings/_form.html.haml
@@ -533,11 +533,23 @@
   %fieldset
     %legend Git Storage Circuitbreaker settings
     .form-group
-      = f.label :circuitbreaker_failure_count_threshold, _('Maximum git storage failures'), class: 'control-label col-sm-2'
+      = f.label :circuitbreaker_access_retries, _('Number of access attempts'), class: 'control-label col-sm-2'
       .col-sm-10
-        = f.number_field :circuitbreaker_failure_count_threshold, class: 'form-control'
+        = f.number_field :circuitbreaker_access_retries, class: 'form-control'
         .help-block
-          = circuitbreaker_failure_count_help_text
+          = circuitbreaker_access_retries_help_text
+    .form-group
+      = f.label :circuitbreaker_storage_timeout, _('Seconds to wait for a storage access attempt'), class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :circuitbreaker_storage_timeout, class: 'form-control'
+        .help-block
+          = circuitbreaker_storage_timeout_help_text
+    .form-group
+      = f.label :circuitbreaker_backoff_threshold, _('Number of failures before backing off'), class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :circuitbreaker_backoff_threshold, class: 'form-control'
+        .help-block
+          = circuitbreaker_backoff_threshold_help_text
     .form-group
       = f.label :circuitbreaker_failure_wait_time, _('Seconds to wait after a storage failure'), class: 'control-label col-sm-2'
       .col-sm-10
@@ -545,17 +557,17 @@
         .help-block
           = circuitbreaker_failure_wait_time_help_text
     .form-group
-      = f.label :circuitbreaker_failure_reset_time, _('Seconds before reseting failure information'), class: 'control-label col-sm-2'
+      = f.label :circuitbreaker_failure_count_threshold, _('Maximum git storage failures'), class: 'control-label col-sm-2'
       .col-sm-10
-        = f.number_field :circuitbreaker_failure_reset_time, class: 'form-control'
+        = f.number_field :circuitbreaker_failure_count_threshold, class: 'form-control'
         .help-block
-          = circuitbreaker_failure_reset_time_help_text
+          = circuitbreaker_failure_count_help_text
     .form-group
-      = f.label :circuitbreaker_storage_timeout, _('Seconds to wait for a storage access attempt'), class: 'control-label col-sm-2'
+      = f.label :circuitbreaker_failure_reset_time, _('Seconds before reseting failure information'), class: 'control-label col-sm-2'
       .col-sm-10
-        = f.number_field :circuitbreaker_storage_timeout, class: 'form-control'
+        = f.number_field :circuitbreaker_failure_reset_time, class: 'form-control'
         .help-block
-          = circuitbreaker_storage_timeout_help_text
+          = circuitbreaker_failure_reset_time_help_text
 
   %fieldset
     %legend Repository Checks
diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index fd2ba9ac1ca..9038c4fbebd 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -6,13 +6,13 @@
   .fade-right= icon('angle-right')
   %ul.nav-links.scrolling-tabs
     = nav_link(page: [dashboard_projects_path, root_path]) do
-      = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do
+      = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
         Your projects
     = nav_link(page: starred_dashboard_projects_path) do
-      = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do
+      = link_to starred_dashboard_projects_path, data: {placement: 'right'} do
         Starred projects
     = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
-      = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do
+      = link_to explore_root_path, data: {placement: 'right'} do
         Explore projects
 
   .nav-controls
diff --git a/app/views/groups/milestones/_form.html.haml b/app/views/groups/milestones/_form.html.haml
index cc879e5a308..a1be0d3220a 100644
--- a/app/views/groups/milestones/_form.html.haml
+++ b/app/views/groups/milestones/_form.html.haml
@@ -11,7 +11,7 @@
         = f.label :description, "Description", class: "control-label"
         .col-sm-10
           = render layout: 'projects/md_preview', locals: { url: group_preview_markdown_path } do
-            = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...'
+            = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...', supports_autocomplete: false
             .clearfix
             .error-alert
 
diff --git a/app/views/help/index.html.haml b/app/views/help/index.html.haml
index c25eae63eec..d0c2e0b1d69 100644
--- a/app/views/help/index.html.haml
+++ b/app/views/help/index.html.haml
@@ -11,6 +11,7 @@
       %span= Gitlab::VERSION
       %small= link_to Gitlab::REVISION, Gitlab::COM_URL + namespace_project_commits_path('gitlab-org', 'gitlab-ce', Gitlab::REVISION)
       = version_status_badge
+
   %p.slead
     GitLab is open source software to collaborate on code.
     %br
@@ -23,6 +24,7 @@
     Used by more than 100,000 organizations, GitLab is the most popular solution to manage git repositories on-premises.
     %br
     Read more about GitLab at #{link_to promo_host, promo_url, target: '_blank', rel: 'noopener noreferrer'}.
+    %p= link_to 'Check the current instance configuration ', help_instance_configuration_url
   %hr
 
 .row.prepend-top-default
diff --git a/app/views/help/instance_configuration.html.haml b/app/views/help/instance_configuration.html.haml
new file mode 100644
index 00000000000..f09e3825a4b
--- /dev/null
+++ b/app/views/help/instance_configuration.html.haml
@@ -0,0 +1,17 @@
+- page_title 'Instance Configuration'
+.wiki.documentation
+  %h1 Instance Configuration
+
+  %p
+    In this page you will find information about the settings that are used in your current instance.
+
+  = render 'help/instance_configuration/ssh_info'
+  = render 'help/instance_configuration/gitlab_pages'
+  = render 'help/instance_configuration/gitlab_ci'
+  %p
+    %strong Table of contents
+
+    %ul
+      = content_for :table_content
+
+  = content_for :settings_content
diff --git a/app/views/help/instance_configuration/_gitlab_ci.html.haml b/app/views/help/instance_configuration/_gitlab_ci.html.haml
new file mode 100644
index 00000000000..7fa8bd086d4
--- /dev/null
+++ b/app/views/help/instance_configuration/_gitlab_ci.html.haml
@@ -0,0 +1,24 @@
+- content_for :table_content do
+  %li= link_to 'GitLab CI', '#gitlab-ci'
+
+- content_for :settings_content do
+  %h2#gitlab-ci
+    GitLab CI
+
+  %p
+    Below are the current settings regarding
+    = succeed('.') { link_to('GitLab CI', 'https://about.gitlab.com/gitlab-ci', target: '_blank') }
+
+  .table-responsive
+    %table
+      %thead
+        %tr
+          %th Setting
+          %th= instance_configuration_host(@instance_configuration.settings[:host])
+          %th Default
+      %tbody
+        %tr
+          - artifacts_size = @instance_configuration.settings[:gitlab_ci][:artifacts_max_size]
+          %td Artifacts maximum size
+          %td= instance_configuration_human_size_cell(artifacts_size[:value])
+          %td= instance_configuration_human_size_cell(artifacts_size[:default])
diff --git a/app/views/help/instance_configuration/_gitlab_pages.html.haml b/app/views/help/instance_configuration/_gitlab_pages.html.haml
new file mode 100644
index 00000000000..bdd77730dcc
--- /dev/null
+++ b/app/views/help/instance_configuration/_gitlab_pages.html.haml
@@ -0,0 +1,35 @@
+- gitlab_pages = @instance_configuration.settings[:gitlab_pages]
+- content_for :table_content do
+  %li= link_to 'GitLab Pages', '#gitlab-pages'
+
+- content_for :settings_content do
+  %h2#gitlab-pages
+    GitLab Pages
+
+  %p
+    Below are the settings for
+    = succeed('.') { link_to('Gitlab Pages', gitlab_pages[:url], target: '_blank') }
+  .table-responsive
+    %table
+      %thead
+        %tr
+          %th Setting
+          %th= instance_configuration_host(@instance_configuration.settings[:host])
+      %tbody
+        %tr
+          %td Domain Name
+          %td
+            %code= instance_configuration_cell_html(gitlab_pages[:host])
+        %tr
+          %td IP Address
+          %td
+            %code= instance_configuration_cell_html(gitlab_pages[:ip_address])
+        %tr
+          %td Port
+          %td
+            %code= instance_configuration_cell_html(gitlab_pages[:port])
+  %br
+
+  %p
+    The maximum size of your Pages site is regulated by the artifacts maximum
+    size which is part of #{succeed('.') { link_to('GitLab CI', '#gitlab-ci') }}
diff --git a/app/views/help/instance_configuration/_ssh_info.html.haml b/app/views/help/instance_configuration/_ssh_info.html.haml
new file mode 100644
index 00000000000..987cc61b3f6
--- /dev/null
+++ b/app/views/help/instance_configuration/_ssh_info.html.haml
@@ -0,0 +1,27 @@
+- ssh_info = @instance_configuration.settings[:ssh_algorithms_hashes]
+- if ssh_info.any?
+  - content_for :table_content do
+    %li= link_to 'SSH host keys fingerprints', '#ssh-host-keys-fingerprints'
+
+  - content_for :settings_content do
+    %h2#ssh-host-keys-fingerprints
+      SSH host keys fingerprints
+
+    %p
+      Below are the fingerprints for the current instance SSH host keys.
+
+    .table-responsive
+      %table
+        %thead
+          %tr
+            %th Algorithm
+            %th MD5
+            %th SHA256
+        %tbody
+          - ssh_info.each do |algorithm|
+            %tr
+              %td= algorithm[:name]
+              %td
+                %code= instance_configuration_cell_html(algorithm[:md5])
+              %td
+                %code= instance_configuration_cell_html(algorithm[:sha256])
diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index f82207559a3..66146e61263 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -274,7 +274,7 @@
               Members
           %ul.sidebar-sub-level-items.is-fly-out-only
             = nav_link(path: %w[members#show], html_options: { class: "fly-out-top-item" } ) do
-              = link_to project_settings_members_path(@project) do
+              = link_to project_project_members_path(@project) do
                 %strong.fly-out-top-item-name
                   #{ _('Members') }
 
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 49101d1efa4..6e02ae6c9cc 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -1,3 +1,4 @@
+- merged = local_assigns.fetch(:merged, false)
 - commit = @repository.commit(branch.dereferenced_target)
 - bar_graph_width_factor = @max_commits > 0 ? 100.0/@max_commits : 0
 - diverging_commit_counts = @repository.diverging_commit_counts(branch)
@@ -12,7 +13,7 @@
     &nbsp;
     - if branch.name == @repository.root_ref
       %span.label.label-primary default
-    - elsif @repository.merged_to_root_ref? branch.name
+    - elsif merged
       %span.label.label-info.has-tooltip{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
         = s_('Branches|merged')
 
@@ -47,7 +48,7 @@
                 target: "#modal-delete-branch",
                 delete_path: project_branch_path(@project, branch.name),
                 branch_name: branch.name,
-                is_merged: ("true" if @repository.merged_to_root_ref?(branch.name)) } }
+                is_merged: ("true" if merged) } }
               = icon("trash-o")
           - else
             %button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip disabled",
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 7d9645d79e6..aade310236e 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -38,7 +38,7 @@
   - if @branches.any?
     %ul.content-list.all-branches
       - @branches.each do |branch|
-        = render "projects/branches/branch", branch: branch
+        = render "projects/branches/branch", branch: branch, merged: @repository.merged_to_root_ref?(branch, @merged_branch_names)
     = paginate @branches, theme: 'gitlab'
   - else
     .nothing-here-block
diff --git a/app/views/projects/clusters/show.html.haml b/app/views/projects/clusters/show.html.haml
index ff76abc3553..b127e06030e 100644
--- a/app/views/projects/clusters/show.html.haml
+++ b/app/views/projects/clusters/show.html.haml
@@ -47,7 +47,7 @@
 
         - if can?(current_user, :update_cluster, @cluster)
           .form-group
-            = field.submit s_('ClusterIntegration|Save'), class: 'btn btn-success'
+            = field.submit _('Save'), class: 'btn btn-success'
 
   %section.settings#js-cluster-details
     .settings-header
@@ -68,7 +68,7 @@
 
   %section.settings#js-cluster-advanced-settings
     .settings-header
-      %h4= s_('ClusterIntegration|Advanced settings')
+      %h4= _('Advanced settings')
       %button.btn.js-settings-toggle
         = expanded ? 'Collapse' : 'Expand'
       %p= s_('ClusterIntegration|Manage Cluster integration on your GitLab project')
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 09bcd187e59..ff17372fdd9 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -77,5 +77,6 @@
         #{ n_(s_('Pipeline|with stage'), s_('Pipeline|with stages'), last_pipeline.stages_count) }
         .mr-widget-pipeline-graph
           = render 'shared/mini_pipeline_graph', pipeline: last_pipeline, klass: 'js-commit-pipeline-graph'
-      in
-      = time_interval_in_words last_pipeline.duration
+      - if last_pipeline.duration
+        in
+        = time_interval_in_words last_pipeline.duration
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index c9956183e12..af564b93dc3 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -72,6 +72,7 @@
           %pre.light-well
             :preserve
               cd existing_repo
+              git remote rename origin old-origin
               git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')}
               git push -u origin --all
               git push -u origin --tags
diff --git a/app/views/projects/issues/edit.html.haml b/app/views/projects/issues/edit.html.haml
new file mode 100644
index 00000000000..1b7d878c38c
--- /dev/null
+++ b/app/views/projects/issues/edit.html.haml
@@ -0,0 +1,7 @@
+- page_title "Edit", "#{@issue.title} (#{@issue.to_reference})", "Issues"
+
+%h3.page-title
+  Edit Issue ##{@issue.iid}
+%hr
+
+= render "form"
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index a5153df1159..9fc297ab7f6 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -23,14 +23,18 @@
         = milestone_date_range(@milestone)
     .milestone-buttons
       - if can?(current_user, :admin_milestone, @project)
+        = link_to edit_project_milestone_path(@project, @milestone), class: "btn btn-grouped btn-nr" do
+          Edit
+
+        - if @project.group
+          = link_to promote_project_milestone_path(@milestone.project, @milestone), title: "Promote to Group Milestone", class: 'btn btn-grouped', data: { confirm: "Promoting this milestone will make it available for all projects inside the group. Existing project milestones with the same name will be merged. Are you sure?", toggle: "tooltip" }, method: :post do
+            Promote
+
         - if @milestone.active?
           = link_to 'Close milestone', project_milestone_path(@project, @milestone, milestone: {state_event: :close }), method: :put, class: "btn btn-close btn-nr btn-grouped"
         - else
           = link_to 'Reopen milestone', project_milestone_path(@project, @milestone, milestone: {state_event: :activate }), method: :put, class: "btn btn-reopen btn-nr btn-grouped"
 
-        = link_to edit_project_milestone_path(@project, @milestone), class: "btn btn-grouped btn-nr" do
-          Edit
-
         = link_to project_milestone_path(@project, @milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-grouped btn-danger" do
           Delete
 
@@ -40,6 +44,7 @@
   .detail-page-description.milestone-detail
     %h2.title
       = markdown_field(@milestone, :title)
+
     %div
       - if @milestone.description.present?
         .description
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 47f3f2b459a..c02f7ee37ed 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -2,12 +2,14 @@
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'tree', path: @path, show_create: true
 
-  - unless show_new_repo?
+  - if show_new_repo? && can_push_branch?(@project, @ref)
+    .js-new-dropdown
+  - else
     = render 'projects/tree/old_tree_header'
 
 .tree-controls
   - if show_new_repo?
-    = render 'shared/repo/editable_mode'
+    .editable-mode
   - else
     = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
 
diff --git a/app/views/shared/issuable/_participants.html.haml b/app/views/shared/issuable/_participants.html.haml
deleted file mode 100644
index 3f553c9fede..00000000000
--- a/app/views/shared/issuable/_participants.html.haml
+++ /dev/null
@@ -1,18 +0,0 @@
-- participants_row = 7
-- participants_size = participants.size
-- participants_extra = participants_size - participants_row
-.block.participants
-  .sidebar-collapsed-icon
-    = icon('users')
-    %span
-      = participants.count
-  .title.hide-collapsed
-    = pluralize participants.count, "participant"
-  .hide-collapsed.participants-list
-    - participants.each do |participant|
-      .participants-author.js-participants-author
-        = link_to_member(@project, participant, name: false, size: 24, lazy_load: true)
-  - if participants_extra > 0
-    .hide-collapsed.participants-more
-      %button.btn-transparent.btn-blank.js-participants-more{ type: 'button', data: { original_text: "+ #{participants_size - 7} more", less_text: "- show less" } }
-        + #{participants_extra} more
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 161b1c9fd72..fabb17c7340 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -25,7 +25,6 @@
               %ul.tokens-container.list-unstyled
                 %li.input-token
                   %input.form-control.filtered-search{ search_filter_input_options(type) }
-              = icon('filter')
             #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
               %ul{ data: { dropdown: true } }
                 %li.filter-dropdown-item{ data: { action: 'submit' } }
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 7b7411b1e23..e0009a35b9f 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -123,17 +123,10 @@
         %script#js-lock-issue-data{ type: "application/json" }= { is_locked: issuable.discussion_locked?, is_editable: can_edit_issuable }.to_json.html_safe
         #js-lock-entry-point
 
-      = render "shared/issuable/participants", participants: issuable.participants(current_user)
+      .js-sidebar-participants-entry-point
+
       - if current_user
-        - subscribed = issuable.subscribed?(current_user, @project)
-        .block.light.subscription{ data: { url: toggle_subscription_path(issuable) } }
-          .sidebar-collapsed-icon
-            = icon('rss', 'aria-hidden': 'true')
-          %span.issuable-header-text.hide-collapsed.pull-left
-            Notifications
-          - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
-          %button.btn.btn-default.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
-            %span= subscribed ? 'Unsubscribe' : 'Subscribe'
+        .js-sidebar-subscriptions-entry-point
 
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference
diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml
index 305e2542281..7ba8f9d4313 100644
--- a/app/views/shared/milestones/_milestone.html.haml
+++ b/app/views/shared/milestones/_milestone.html.haml
@@ -49,6 +49,13 @@
           = link_to edit_project_milestone_path(milestone.project, milestone), class: "btn btn-xs btn-grouped" do
             Edit
           \
+
+          - if @project.group
+            = link_to promote_project_milestone_path(milestone.project, milestone), title: "Promote to Group Milestone", class: 'btn btn-xs btn-grouped', data: { confirm: "Promoting this milestone will make it available for all projects inside the group. Existing project milestones with the same name will be merged. Are you sure?", toggle: "tooltip" }, method: :post do
+              Promote
+
           = link_to 'Close Milestone', project_milestone_path(@project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-xs btn-close btn-grouped"
+
           = link_to project_milestone_path(milestone.project, milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-xs btn-remove btn-grouped" do
             Delete
+
diff --git a/app/views/shared/repo/_editable_mode.html.haml b/app/views/shared/repo/_editable_mode.html.haml
deleted file mode 100644
index 73fdb8b523f..00000000000
--- a/app/views/shared/repo/_editable_mode.html.haml
+++ /dev/null
@@ -1,2 +0,0 @@
-.editable-mode
-  %repo-edit-button
diff --git a/app/views/shared/repo/_repo.html.haml b/app/views/shared/repo/_repo.html.haml
index 7185f5bcc5b..5867ea58378 100644
--- a/app/views/shared/repo/_repo.html.haml
+++ b/app/views/shared/repo/_repo.html.haml
@@ -1,10 +1,12 @@
 #repo{ data: { root: @path.empty?.to_s,
+               root_url: project_tree_path(project),
                url: content_url,
+               current_branch: @ref,
+               ref: @commit.id,
                project_name: project.name,
-               refs_url: refs_project_path(project, format: :json),
                project_url: project_path(project),
                project_id: project.id,
-               blob_url: namespace_project_blob_path(project.namespace, project, '{{branch}}'),
-               new_mr_template_url: namespace_project_new_merge_request_path(project.namespace, project, merge_request: { source_branch: '{{source_branch}}' }),
+               new_merge_request_url: namespace_project_new_merge_request_path(project.namespace, project, merge_request: { source_branch: '' }),
                can_commit: (!!can_push_branch?(project, @ref)).to_s,
-               on_top_of_branch: (!!on_top_of_branch?(project, @ref)).to_s } }
+               on_top_of_branch: (!!on_top_of_branch?(project, @ref)).to_s,
+               current_path: @path } }
diff --git a/app/workers/stuck_merge_jobs_worker.rb b/app/workers/stuck_merge_jobs_worker.rb
index 7843179d77c..a396c0f27b2 100644
--- a/app/workers/stuck_merge_jobs_worker.rb
+++ b/app/workers/stuck_merge_jobs_worker.rb
@@ -23,7 +23,7 @@ class StuckMergeJobsWorker
     merge_requests = MergeRequest.where(id: completed_ids)
 
     merge_requests.where.not(merge_commit_sha: nil).update_all(state: :merged)
-    merge_requests.where(merge_commit_sha: nil).update_all(state: :opened)
+    merge_requests.where(merge_commit_sha: nil).update_all(state: :opened, merge_jid: nil)
 
     Rails.logger.info("Updated state of locked merge jobs. JIDs: #{completed_jids.join(', ')}")
   end
diff --git a/app/workers/update_merge_requests_worker.rb b/app/workers/update_merge_requests_worker.rb
index 89ae17cef37..150788ca611 100644
--- a/app/workers/update_merge_requests_worker.rb
+++ b/app/workers/update_merge_requests_worker.rb
@@ -2,6 +2,10 @@ class UpdateMergeRequestsWorker
   include Sidekiq::Worker
   include DedicatedSidekiqQueue
 
+  def metrics_tags
+    @metrics_tags || {}
+  end
+
   def perform(project_id, user_id, oldrev, newrev, ref)
     project = Project.find_by(id: project_id)
     return unless project
@@ -9,6 +13,11 @@ class UpdateMergeRequestsWorker
     user = User.find_by(id: user_id)
     return unless user
 
+    @metrics_tags = {
+      project_id: project_id,
+      user_id: user_id
+    }
+
     MergeRequests::RefreshService.new(project, user).execute(oldrev, newrev, ref)
   end
 end