Merge branch 'master' into 27932-merge-request-pipelines-displays-json

* master: (32 commits)
  Fix contribution activity alignment
  Adds a null check to build notifications
  Add a spec for our custom GemFetcher cop
  add CHANGELOG.md entry for !9078
  approve new dependencies
  update karma deps to work with webpack 2
  upgrade to webpack 2.2.x
  add CHANGELOG.md entry for !9072
  approve MIT license for wordwrap submodule
  fix failing karma test
  upgrade babel to v6
  exclude node_modules from imports-loader wrapper
  Allow copying a created branch name to the clipboard.
  Uses shared vue resource interceptor
  Refactored diff notes Vue app
  Fix expand_collapse_diffs specs
  Update the rspec_profiling gem to 0.0.5
  Fix menu link in CONTRIBUTING
  adds max-width only for new filter dropdown
  adds changelog
  ...

39 files changed, 141 insertions, 97 deletions

diff --git a/app/assets/javascripts/diff.js.es6 b/app/assets/javascripts/diff.js.es6
index c39e30fb7e0..ccccd0a36ff 100644
--- a/app/assets/javascripts/diff.js.es6
+++ b/app/assets/javascripts/diff.js.es6
@@ -76,7 +76,7 @@ require('./lib/utils/url_utility');
       const diffFile = diffTitle.closest('.diff-file');
       const nothingHereBlock = $('.nothing-here-block:visible', diffFile);
       if (nothingHereBlock.length) {
-        const clickTarget = $('.file-title, .click-to-expand', diffFile);
+        const clickTarget = $('.js-file-title, .click-to-expand', diffFile);
         diffFile.data('singleFileDiff').toggleDiff(clickTarget, () => {
           this.highlighSelectedLine();
           if (cb) cb();
diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
index 2514459e65e..d948dff58ec 100644
--- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
@@ -1,6 +1,6 @@
 /* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, quotes, no-lonely-if, max-len */
-/* global Vue */
 /* global CommentsStore */
+const Vue = require('vue');
 
 (() => {
   const CommentAndResolveBtn = Vue.extend({
@@ -9,13 +9,11 @@
     },
     data() {
       return {
-        textareaIsEmpty: true
+        textareaIsEmpty: true,
+        discussion: {},
       };
     },
     computed: {
-      discussion: function () {
-        return CommentsStore.state[this.discussionId];
-      },
       showButton: function () {
         if (this.discussion) {
           return this.discussion.isResolvable();
@@ -42,6 +40,9 @@
         }
       }
     },
+    created() {
+      this.discussion = CommentsStore.state[this.discussionId];
+    },
     mounted: function () {
       const $textarea = $(`#new-discussion-note-form-${this.discussionId} .note-textarea`);
       this.textareaIsEmpty = $textarea.val() === '';
diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6 b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
index c3898873eaa..57cb0d0ae6e 100644
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
@@ -1,7 +1,7 @@
 /* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, guard-for-in, no-restricted-syntax, one-var, space-before-function-paren, no-lonely-if, no-continue, brace-style, max-len, quotes */
-/* global Vue */
 /* global DiscussionMixins */
 /* global CommentsStore */
+const Vue = require('vue');
 
 (() => {
   const JumpToDiscussion = Vue.extend({
@@ -12,12 +12,10 @@
     data: function () {
       return {
         discussions: CommentsStore.state,
+        discussion: {},
       };
     },
     computed: {
-      discussion: function () {
-        return this.discussions[this.discussionId];
-      },
       allResolved: function () {
         return this.unresolvedDiscussionCount === 0;
       },
@@ -186,7 +184,10 @@
           offset: -($('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight())
         });
       }
-    }
+    },
+    created() {
+      this.discussion = this.discussions[this.discussionId];
+    },
   });
 
   Vue.component('jump-to-discussion', JumpToDiscussion);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
index 5852b8bbdb7..d1873d6c7a2 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
@@ -1,8 +1,8 @@
 /* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, no-new, max-len */
-/* global Vue */
 /* global CommentsStore */
 /* global ResolveService */
 /* global Flash */
+const Vue = require('vue');
 
 (() => {
   const ResolveBtn = Vue.extend({
@@ -10,14 +10,14 @@
       noteId: Number,
       discussionId: String,
       resolved: Boolean,
-      projectPath: String,
       canResolve: Boolean,
       resolvedBy: String
     },
     data: function () {
       return {
         discussions: CommentsStore.state,
-        loading: false
+        loading: false,
+        note: {},
       };
     },
     watch: {
@@ -30,13 +30,6 @@
       discussion: function () {
         return this.discussions[this.discussionId];
       },
-      note: function () {
-        if (this.discussion) {
-          return this.discussion.getNote(this.noteId);
-        } else {
-          return undefined;
-        }
-      },
       buttonText: function () {
         if (this.isResolved) {
           return `Resolved by ${this.resolvedByName}`;
@@ -73,10 +66,10 @@
 
         if (this.isResolved) {
           promise = ResolveService
-            .unresolve(this.projectPath, this.noteId);
+            .unresolve(this.noteId);
         } else {
           promise = ResolveService
-            .resolve(this.projectPath, this.noteId);
+            .resolve(this.noteId);
         }
 
         promise.then((response) => {
@@ -106,6 +99,8 @@
     },
     created: function () {
       CommentsStore.create(this.discussionId, this.noteId, this.canResolve, this.resolved, this.resolvedBy);
+
+      this.note = this.discussion.getNote(this.noteId);
     }
   });
 
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
index 72cdae812bc..de9367f2136 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
@@ -1,7 +1,7 @@
 /* eslint-disable comma-dangle, object-shorthand, func-names, no-param-reassign */
-/* global Vue */
 /* global DiscussionMixins */
 /* global CommentsStore */
+const Vue = require('vue');
 
 ((w) => {
   w.ResolveCount = Vue.extend({
diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
index ee5f62b2d9e..7c5fcd04d2d 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
@@ -1,25 +1,22 @@
 /* eslint-disable object-shorthand, func-names, space-before-function-paren, comma-dangle, no-else-return, quotes, max-len */
-/* global Vue */
 /* global CommentsStore */
 /* global ResolveService */
 
+const Vue = require('vue');
+
 (() => {
   const ResolveDiscussionBtn = Vue.extend({
     props: {
       discussionId: String,
       mergeRequestId: Number,
-      projectPath: String,
       canResolve: Boolean,
     },
     data: function() {
       return {
-        discussions: CommentsStore.state
+        discussion: {},
       };
     },
     computed: {
-      discussion: function () {
-        return this.discussions[this.discussionId];
-      },
       showButton: function () {
         if (this.discussion) {
           return this.discussion.isResolvable();
@@ -51,11 +48,13 @@
     },
     methods: {
       resolve: function () {
-        ResolveService.toggleResolveForDiscussion(this.projectPath, this.mergeRequestId, this.discussionId);
+        ResolveService.toggleResolveForDiscussion(this.mergeRequestId, this.discussionId);
       }
     },
     created: function () {
       CommentsStore.createDiscussion(this.discussionId, this.canResolve);
+
+      this.discussion = CommentsStore.state[this.discussionId];
     }
   });
 
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6 b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
index f0edfb8aaf1..190461451d5 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
@@ -3,6 +3,7 @@
 /* global ResolveCount */
 
 function requireAll(context) { return context.keys().map(context); }
+const Vue = require('vue');
 requireAll(require.context('./models',     false, /^\.\/.*\.(js|es6)$/));
 requireAll(require.context('./stores',     false, /^\.\/.*\.(js|es6)$/));
 requireAll(require.context('./services',   false, /^\.\/.*\.(js|es6)$/));
@@ -10,11 +11,14 @@ requireAll(require.context('./mixins',     false, /^\.\/.*\.(js|es6)$/));
 requireAll(require.context('./components', false, /^\.\/.*\.(js|es6)$/));
 
 $(() => {
+  const projectPath = document.querySelector('.merge-request').dataset.projectPath;
   const COMPONENT_SELECTOR = 'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn';
 
   window.gl = window.gl || {};
   window.gl.diffNoteApps = {};
 
+  window.ResolveService = new gl.DiffNotesResolveServiceClass(projectPath);
+
   gl.diffNotesCompileComponents = () => {
     const $components = $(COMPONENT_SELECTOR).filter(function () {
       return $(this).closest('resolve-count').length !== 1;
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js.es6 b/app/assets/javascripts/diff_notes/services/resolve.js.es6
index a52c476352d..090c454e9e4 100644
--- a/app/assets/javascripts/diff_notes/services/resolve.js.es6
+++ b/app/assets/javascripts/diff_notes/services/resolve.js.es6
@@ -1,45 +1,37 @@
 /* eslint-disable class-methods-use-this, one-var, camelcase, no-new, comma-dangle, no-param-reassign, max-len */
-/* global Vue */
 /* global Flash */
 /* global CommentsStore */
 
-((w) => {
-  class ResolveServiceClass {
-    constructor() {
-      this.noteResource = Vue.resource('notes{/noteId}/resolve');
-      this.discussionResource = Vue.resource('merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve');
-    }
+const Vue = window.Vue = require('vue');
+window.Vue.use(require('vue-resource'));
+require('../../vue_shared/vue_resource_interceptor');
 
-    setCSRF() {
-      Vue.http.headers.common['X-CSRF-Token'] = $.rails.csrfToken();
-    }
+(() => {
+  window.gl = window.gl || {};
 
-    prepareRequest(root) {
-      this.setCSRF();
-      Vue.http.options.root = root;
+  class ResolveServiceClass {
+    constructor(root) {
+      this.noteResource = Vue.resource(`${root}/notes{/noteId}/resolve`);
+      this.discussionResource = Vue.resource(`${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve`);
     }
 
-    resolve(projectPath, noteId) {
-      this.prepareRequest(projectPath);
-
+    resolve(noteId) {
       return this.noteResource.save({ noteId }, {});
     }
 
-    unresolve(projectPath, noteId) {
-      this.prepareRequest(projectPath);
-
+    unresolve(noteId) {
       return this.noteResource.delete({ noteId }, {});
     }
 
-    toggleResolveForDiscussion(projectPath, mergeRequestId, discussionId) {
+    toggleResolveForDiscussion(mergeRequestId, discussionId) {
       const discussion = CommentsStore.state[discussionId];
       const isResolved = discussion.isResolved();
       let promise;
 
       if (isResolved) {
-        promise = this.unResolveAll(projectPath, mergeRequestId, discussionId);
+        promise = this.unResolveAll(mergeRequestId, discussionId);
       } else {
-        promise = this.resolveAll(projectPath, mergeRequestId, discussionId);
+        promise = this.resolveAll(mergeRequestId, discussionId);
       }
 
       promise.then((response) => {
@@ -62,11 +54,9 @@
       });
     }
 
-    resolveAll(projectPath, mergeRequestId, discussionId) {
+    resolveAll(mergeRequestId, discussionId) {
       const discussion = CommentsStore.state[discussionId];
 
-      this.prepareRequest(projectPath);
-
       discussion.loading = true;
 
       return this.discussionResource.save({
@@ -75,11 +65,9 @@
       }, {});
     }
 
-    unResolveAll(projectPath, mergeRequestId, discussionId) {
+    unResolveAll(mergeRequestId, discussionId) {
       const discussion = CommentsStore.state[discussionId];
 
-      this.prepareRequest(projectPath);
-
       discussion.loading = true;
 
       return this.discussionResource.delete({
@@ -89,5 +77,5 @@
     }
   }
 
-  w.ResolveService = new ResolveServiceClass();
-})(window);
+  gl.DiffNotesResolveServiceClass = ResolveServiceClass;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
index 859d6515531..e8c2df03a46 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
@@ -4,7 +4,7 @@
   class FilteredSearchDropdown {
     constructor(droplab, dropdown, input, filter) {
       this.droplab = droplab;
-      this.hookId = input.getAttribute('data-id');
+      this.hookId = input && input.getAttribute('data-id');
       this.input = input;
       this.filter = filter;
       this.dropdown = dropdown;
diff --git a/app/assets/javascripts/merge_request_widget.js.es6 b/app/assets/javascripts/merge_request_widget.js.es6
index e5d2d706fc7..69aed77c83d 100644
--- a/app/assets/javascripts/merge_request_widget.js.es6
+++ b/app/assets/javascripts/merge_request_widget.js.es6
@@ -154,7 +154,7 @@ require('./smart_interval');
       return $.getJSON(this.opts.ci_status_url, (function(_this) {
         return function(data) {
           var message, status, title;
-          if (data.status === '') {
+          if (!data.status) {
             return;
           }
           if (data.environments && data.environments.length) _this.renderEnvironments(data.environments);
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index d108da29af7..3579843baed 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -455,7 +455,7 @@ require('vendor/task_list');
         var mergeRequestId = $form.data('noteable-iid');
 
         if (ResolveService != null) {
-          ResolveService.toggleResolveForDiscussion(projectPath, mergeRequestId, discussionId);
+          ResolveService.toggleResolveForDiscussion(mergeRequestId, discussionId);
         }
       }
 
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 5b20c63384c..3ee0c73a8d2 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -33,13 +33,13 @@
         this.$toggleIcon.addClass('fa-caret-down');
       }
 
-      $('.file-title, .click-to-expand', this.file).on('click', (function (e) {
+      $('.js-file-title, .click-to-expand', this.file).on('click', (function (e) {
         this.toggleDiff($(e.target));
       }).bind(this));
     }
 
     SingleFileDiff.prototype.toggleDiff = function($target, cb) {
-      if (!$target.hasClass('file-title') && !$target.hasClass('click-to-expand') && !$target.hasClass('diff-toggle-caret')) return;
+      if (!$target.hasClass('js-file-title') && !$target.hasClass('click-to-expand') && !$target.hasClass('diff-toggle-caret')) return;
       this.isOpen = !this.isOpen;
       if (!this.isOpen && !this.hasError) {
         this.content.hide();
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index d485e75a434..fb8ea18d122 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -9,6 +9,8 @@
 }
 
 .user-calendar-activities {
+  direction: ltr;
+
   .str-truncated {
     max-width: 70%;
   }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index facfb7f9920..ff31e7f7b3d 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -125,7 +125,6 @@
   top: 100%;
   left: 0;
   z-index: 9;
-  max-width: 280px;
   min-width: 240px;
   margin-top: 2px;
   margin-bottom: 0;
@@ -137,6 +136,10 @@
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
 
+  .filtered-search-input-container & {
+    max-width: 280px;
+  }
+
   &.is-loading {
     .dropdown-content {
       display: none;
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index c51912b4ac4..30f242a35db 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -231,3 +231,46 @@ span.idiff {
     }
   }
 }
+
+.file-title-flex-parent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: $gray-light;
+  border-bottom: 1px solid $border-color;
+  padding: 5px $gl-padding;
+  margin: 0;
+  border-radius: 3px 3px 0 0;
+
+  .file-header-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 30px;
+    position: relative;
+  }
+
+  .btn-clipboard {
+    position: absolute;
+    right: 0;
+  }
+
+  a {
+    color: $gl-text-color;
+  }
+
+  small {
+    margin: 0 10px 0 0;
+  }
+
+  .file-actions {
+    white-space: nowrap;
+
+    .btn {
+      padding: 0 10px;
+      font-size: 13px;
+      line-height: 28px;
+      display: inline-block;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 96ba7c40634..92d7772da57 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -34,9 +34,14 @@
     }
   }
 
-  .file-title {
+  .file-title,
+  .file-title-flex-parent {
     cursor: pointer;
 
+    a:hover {
+      text-decoration: none;
+    }
+
     &:hover {
       background-color: $gray-normal;
     }
diff --git a/app/controllers/projects/protected_branches_controller.rb b/app/controllers/projects/protected_branches_controller.rb
index 9a438d5512c..2f422d352ed 100644
--- a/app/controllers/projects/protected_branches_controller.rb
+++ b/app/controllers/projects/protected_branches_controller.rb
@@ -68,8 +68,12 @@ class Projects::ProtectedBranchesController < Projects::ApplicationController
 
   def access_levels_options
     {
-      push_access_levels: ProtectedBranch::PushAccessLevel.human_access_levels.map { |id, text| { id: id, text: text, before_divider: true } },
-      merge_access_levels: ProtectedBranch::MergeAccessLevel.human_access_levels.map { |id, text| { id: id, text: text, before_divider: true } }
+      push_access_levels: {
+        "Roles" => ProtectedBranch::PushAccessLevel.human_access_levels.map { |id, text| { id: id, text: text, before_divider: true } },
+      },
+      merge_access_levels: {
+        "Roles" => ProtectedBranch::MergeAccessLevel.human_access_levels.map { |id, text| { id: id, text: text, before_divider: true } }
+      }
     }
   end
 
diff --git a/app/views/admin/logs/show.html.haml b/app/views/admin/logs/show.html.haml
index 0a954c20fcd..13d00dd1fcb 100644
--- a/app/views/admin/logs/show.html.haml
+++ b/app/views/admin/logs/show.html.haml
@@ -18,7 +18,7 @@
       .tab-pane{ class: (klass == Gitlab::GitLogger ? 'active' : ''),
           id: klass::file_name_noext }
         .file-holder#README
-          .file-title
+          .js-file-title.file-title
             %i.fa.fa-file
             = klass::file_name
             .pull-right
diff --git a/app/views/ci/lints/show.html.haml b/app/views/ci/lints/show.html.haml
index b0bee1c6204..dfbc7772698 100644
--- a/app/views/ci/lints/show.html.haml
+++ b/app/views/ci/lints/show.html.haml
@@ -11,7 +11,7 @@
       .form-group
         .col-sm-12
           .file-holder
-            .file-title.clearfix
+            .js-file-title.file-title.clearfix
               Content of .gitlab-ci.yml
             #ci-editor.ci-editor= @content
           = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true)
diff --git a/app/views/discussions/_diff_with_notes.html.haml b/app/views/discussions/_diff_with_notes.html.haml
index 3a95a652810..94408b92374 100644
--- a/app/views/discussions/_diff_with_notes.html.haml
+++ b/app/views/discussions/_diff_with_notes.html.haml
@@ -2,7 +2,7 @@
 - blob = discussion.blob
 
 .diff-file.file-holder
-  .file-title
+  .js-file-title.file-title
     = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_file.content_commit, project: discussion.project, url: discussion_diff_path(discussion)
 
   .diff-content.code.js-syntax-highlight
diff --git a/app/views/discussions/_resolve_all.html.haml b/app/views/discussions/_resolve_all.html.haml
index f0b61e0f7de..e30ee1b0e05 100644
--- a/app/views/discussions/_resolve_all.html.haml
+++ b/app/views/discussions/_resolve_all.html.haml
@@ -1,6 +1,5 @@
 - if discussion.for_merge_request?
-  %resolve-discussion-btn{ ":project-path" => "'#{project_path(discussion.project)}'",
-      ":discussion-id" => "'#{discussion.id}'",
+  %resolve-discussion-btn{ ":discussion-id" => "'#{discussion.id}'",
       ":merge-request-id" => discussion.noteable.iid,
       ":can-resolve" => discussion.can_resolve?(current_user),
       "inline-template" => true }
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
index dd1df46792b..87f9b503989 100644
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -528,7 +528,7 @@
   - blob = Snippet.new(content: "Wow\nSuch\nFile")
   .example
     .file-holder
-      .file-title
+      .js-file-title.file-title
         Awesome file
         .file-actions
           .btn-group
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 1c3bccccb5c..a08436715d2 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -10,6 +10,7 @@
             - if @project && event.project != @project
               %span at
               %strong= link_to_project event.project
+            = clipboard_button(clipboard_text: event.ref_name, class: 'btn-clipboard btn-transparent', title: 'Copy branch to clipboard')
             #{time_ago_with_tooltip(event.created_at)}
 
           .pull-right
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index 23f54553014..8a40281e28c 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -7,7 +7,7 @@
 
   #blob-content-holder.tree-holder
     .file-holder
-      .file-title
+      .js-file-title.file-title
         = blob_icon @blob.mode, @blob.name
         %strong
           = @path
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index f75f438ee4f..19fa4c78501 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -24,7 +24,7 @@
 
 #blob-content-holder.blob-content-holder
   %article.file-holder
-    .file-title
+    .js-file-title.file-title
       = blob_icon blob.mode, blob.name
       %strong
         = blob.name
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 228ac61fc8c..e7adef5558a 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -1,5 +1,5 @@
 .file-holder.file.append-bottom-default
-  .file-title.clearfix
+  .js-file-title.file-title.clearfix
     .editor-ref
       = icon('code-fork')
       = ref
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 75885badac9..0232a09b4a8 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -1,7 +1,8 @@
 - environment = local_assigns.fetch(:environment, nil)
 .diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_commit.id) }
-  .file-title
-    = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "##{file_hash}"
+  .js-file-title.file-title-flex-parent
+    .file-header-content
+      = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "##{file_hash}"
 
     - unless diff_file.submodule?
       .file-actions.hidden-xs
diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml
index ddec775b789..5b09b6907ab 100644
--- a/app/views/projects/diffs/_file_header.html.haml
+++ b/app/views/projects/diffs/_file_header.html.haml
@@ -10,13 +10,13 @@
 
     - if diff_file.renamed_file
       - old_path, new_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
-      %strong
+      %strong.file-title-name.has-tooltip{ data: { title: old_path } }
         = old_path
       &rarr;
-      %strong
+      %strong.file-title-name.has-tooltip{ data: { title: new_path } }
         = new_path
     - else
-      %strong
+      %strong.file-title-name.has-tooltip{ data: { title: diff_file.new_path } }
         = diff_file.new_path
       - if diff_file.deleted_file
         deleted
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 83250443bea..dd615d3036c 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -3,10 +3,9 @@
 - page_description     @merge_request.description
 - page_card_attributes @merge_request.card_attributes
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('lib_vue')
   = page_specific_javascript_bundle_tag('diff_notes')
 
-.merge-request{ 'data-url' => merge_request_path(@merge_request) }
+.merge-request{ 'data-url' => merge_request_path(@merge_request), 'data-project-path' => project_path(@merge_request.project) }
   = render "projects/merge_requests/show/mr_title"
 
   .merge-request-details.issuable-details{ data: { id: @merge_request.project.id } }
diff --git a/app/views/projects/merge_requests/conflicts.html.haml b/app/views/projects/merge_requests/conflicts.html.haml
index dcf578b85f9..1ecd9924d88 100644
--- a/app/views/projects/merge_requests/conflicts.html.haml
+++ b/app/views/projects/merge_requests/conflicts.html.haml
@@ -23,7 +23,7 @@
   .files-wrapper{ "v-if" => "!isLoading && !hasError" }
     .files
       .diff-file.file-holder.conflict{ "v-for" => "file in conflictsData.files" }
-        .file-title
+        .js-file-title.file-title
           %i.fa.fa-fw{ ":class" => "file.iconClass" }
           %strong {{file.filePath}}
           = render partial: 'projects/merge_requests/conflicts/file_actions'
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index 4b1da9c73e5..e58de9f0e18 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -30,8 +30,7 @@
 
             - if note.resolvable?
               - can_resolve = can?(current_user, :resolve_note, note)
-              %resolve-btn{ "project-path" => "#{project_path(note.project)}",
-                  "discussion-id" => "#{note.discussion_id}",
+              %resolve-btn{ "discussion-id" => "#{note.discussion_id}",
                   ":note-id" => note.id,
                   ":resolved" => note.resolved?,
                   ":can-resolve" => can_resolve,
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 485b23815bc..6b3d7d4008b 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -4,7 +4,7 @@
 
 .project-snippets
   %article.file-holder.snippet-file-content
-    .file-title
+    .js-file-title.file-title
       = blob_icon 0, @snippet.file_name
       = @snippet.file_name
       .file-actions
diff --git a/app/views/projects/tree/_readme.html.haml b/app/views/projects/tree/_readme.html.haml
index a1f4e3e8ed6..bdcc160a067 100644
--- a/app/views/projects/tree/_readme.html.haml
+++ b/app/views/projects/tree/_readme.html.haml
@@ -1,5 +1,5 @@
 %article.file-holder.readme-holder
-  .file-title
+  .js-file-title.file-title
     = blob_icon readme.mode, readme.name
     = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, @path, readme.name)) do
       %strong
diff --git a/app/views/search/results/_blob.html.haml b/app/views/search/results/_blob.html.haml
index 9e8adc82583..7f1f807e2e7 100644
--- a/app/views/search/results/_blob.html.haml
+++ b/app/views/search/results/_blob.html.haml
@@ -1,7 +1,7 @@
 - file_name, blob = blob
 .blob-result
   .file-holder
-    .file-title
+    .js-file-title.file-title
       - ref = @search_results.repository_ref
       - blob_link = namespace_project_blob_path(@project.namespace, @project, tree_join(ref, file_name))
       = link_to blob_link do
diff --git a/app/views/search/results/_snippet_blob.html.haml b/app/views/search/results/_snippet_blob.html.haml
index 23ca6479414..f7808ea6aff 100644
--- a/app/views/search/results/_snippet_blob.html.haml
+++ b/app/views/search/results/_snippet_blob.html.haml
@@ -14,7 +14,7 @@
   - snippet_path = reliable_snippet_path(snippet)
   = link_to snippet_path do
     .file-holder
-      .file-title
+      .js-file-title.file-title
         %i.fa.fa-file
         %strong= snippet.file_name
       - if markup?(snippet.file_name)
diff --git a/app/views/search/results/_wiki_blob.html.haml b/app/views/search/results/_wiki_blob.html.haml
index 648d0bd76cb..d87f9df2677 100644
--- a/app/views/search/results/_wiki_blob.html.haml
+++ b/app/views/search/results/_wiki_blob.html.haml
@@ -1,7 +1,7 @@
 - wiki_blob = parse_search_result(wiki_blob)
 .blob-result
   .file-holder
-    .file-title
+    .js-file-title.file-title
       = link_to namespace_project_wiki_path(@project.namespace, @project, wiki_blob.basename) do
         %i.fa.fa-file
         %strong
diff --git a/app/views/shared/snippets/_form.html.haml b/app/views/shared/snippets/_form.html.haml
index 56c0f7390a5..e7f7db73223 100644
--- a/app/views/shared/snippets/_form.html.haml
+++ b/app/views/shared/snippets/_form.html.haml
@@ -18,7 +18,7 @@
         = f.label :file_name, "File", class: 'control-label'
         .col-sm-10
           .file-holder.snippet
-            .file-title
+            .js-file-title.file-title
               = f.text_field :file_name, placeholder: "Optionally name this file to add code highlighting, e.g. example.rb for Ruby.", class: 'form-control snippet-file-name'
             .file-content.code
               %pre#editor= @snippet.content
diff --git a/app/views/sherlock/file_samples/show.html.haml b/app/views/sherlock/file_samples/show.html.haml
index 92151176fce..1a6e2542dc1 100644
--- a/app/views/sherlock/file_samples/show.html.haml
+++ b/app/views/sherlock/file_samples/show.html.haml
@@ -26,7 +26,7 @@
       = @file_sample.events
 
 %article.file-holder
-  .file-title
+  .js-file-title.file-title
     %i.fa.fa-file-text-o.fa-fw
     %strong
       = @file_sample.file
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index 837a1a0cc8c..970afbe6b64 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -3,7 +3,7 @@
 = render 'shared/snippets/header'
 
 %article.file-holder.snippet-file-content
-  .file-title
+  .js-file-title.file-title
     = blob_icon 0, @snippet.file_name
     = @snippet.file_name
     .file-actions