Merge branch 'master' into go-go-gadget-webpack

.gitlab-ci.yml

@@ -235,7 +235,13 @@ spinach 9 10 ruby21: *spinach-knapsack-ruby21
   script:
     - bundle exec $CI_BUILD_NAME
 
-rubocop: *exec
+rubocop: 
+  <<: *ruby-static-analysis
+  <<: *dedicated-runner
+  stage: test
+  script:
+    - bundle exec "rubocop --require rubocop-rspec"
+
 rake haml_lint: *exec
 rake scss_lint: *exec
 rake brakeman: *exec

.rubocop.yml

@@ -344,10 +344,6 @@ Style/ParenthesesAroundCondition:
 Style/RedundantParentheses:
   Enabled: true
 
-# Don't use return where it's not required.
-Style/RedundantReturn:
-  Enabled: true
-
 # Don't use semicolons to terminate expressions.
 Style/Semicolon:
   Enabled: true

CHANGELOG.md

@@ -2,6 +2,36 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
 
+## 8.15.4 (2017-01-09)
+
+- Make successful pipeline emails off for watchers. !8176
+- Speed up group milestone index by passing group_id to IssuesFinder. !8363
+- Don't instrument 405 Grape calls. !8445
+- Update the gitlab-markup gem to the version 1.5.1. !8509
+- Updated Turbolinks to mitigate potential XSS attacks.
+- Re-order update steps in the 8.14 -> 8.15 upgrade guide.
+- Re-add Google Cloud Storage as a backup strategy.
+
+## 8.15.3 (2017-01-06)
+
+- Rename wiki_events to wiki_page_events in project hooks API to avoid errors. !8425
+- Rename projects wth reserved names. !8234
+- Cache project authorizations even when user has access to zero projects. !8327
+- Fix a minor grammar error in merge request widget. !8337
+- Fix unclear closing issue behaviour on Merge Request show page. !8345 (Gabriel Gizotti)
+- fix border in login session tabs. !8346
+- Copy, don't move uploaded avatar files. !8396
+- Increases width of mini-pipeline-graph dropdown to prevent wrong position on chrome on ubuntu. !8399
+- Removes invalid html and unneed CSS to prevent shaking in the pipelines tab. !8411
+- Gitlab::LDAP::Person uses LDAP attributes configuration. !8418
+- Fix 500 errors when creating a user with identity via API. !8442
+- Whitelist next project names: assets, profile, public. !8470
+- Fixed regression of note-headline-light where it was always placed on 2 lines, even on wide viewports.
+- Fix 500 error when visit group from admin area if group name contains dot.
+- Fix cross-project references copy to include the project reference.
+- Fix 500 error renaming group.
+- Fixed GFM dropdown not showing on new lines.
+
 ## 8.15.2 (2016-12-27)
 
 - Fix finding the latest pipeline. !8301
@@ -235,6 +265,11 @@ entry.
 - Whitelist next project names: help, ci, admin, search. !8227
 - Adds back CSS for progress-bars. !8237
 
+## 8.14.6 (2017-01-10)
+
+- Update the gitlab-markup gem to the version 1.5.1. !8509
+- Updated Turbolinks to mitigate potential XSS attacks.
+
 ## 8.14.5 (2016-12-14)
 
 - Moved Leave Project and Leave Group buttons to access_request_buttons from the settings dropdown. !7600
@@ -512,6 +547,11 @@ entry.
 - Fix "Without projects" filter. !6611 (Ben Bodenmiller)
 - Fix 404 when visit /projects page
 
+## 8.13.11 (2017-01-10)
+
+- Update the gitlab-markup gem to the version 1.5.1. !8509
+- Updated Turbolinks to mitigate potential XSS attacks.
+
 ## 8.13.10 (2016-12-14)
 
 - API: Memoize the current_user so that sudo can work properly. !8017

Gemfile

@@ -84,10 +84,14 @@ gem 'dropzonejs-rails', '~> 0.7.1'
 # for backups
 gem 'fog-aws', '~> 0.9'
 gem 'fog-core', '~> 1.40'
+gem 'fog-google', '~> 0.5'
 gem 'fog-local', '~> 0.3'
 gem 'fog-openstack', '~> 0.1'
 gem 'fog-rackspace', '~> 0.1.1'
 
+# for Google storage
+gem 'google-api-client', '~> 0.8.6'
+
 # for aws storage
 gem 'unf', '~> 0.1.4'
 
@@ -97,7 +101,7 @@ gem 'seed-fu', '~> 2.3.5'
 # Markdown and HTML processing
 gem 'html-pipeline',        '~> 1.11.0'
 gem 'deckar01-task_list',   '1.0.6', require: 'task_list/railtie'
-gem 'gitlab-markup',      '~> 1.5.0'
+gem 'gitlab-markup',        '~> 1.5.1'
 gem 'redcarpet',            '~> 3.3.3'
 gem 'RedCloth',             '~> 4.3.2'
 gem 'rdoc',                 '~> 4.2'
@@ -105,6 +109,7 @@ gem 'org-ruby',           '~> 0.9.12'
 gem 'creole',               '~> 0.5.0'
 gem 'wikicloth',            '0.8.1'
 gem 'asciidoctor',          '~> 1.5.2'
+gem 'asciidoctor-plantuml', '0.0.6'
 gem 'rouge',                '~> 2.0'
 gem 'truncato',             '~> 0.7.8'
 
@@ -219,8 +224,7 @@ gem 'webpack-rails', '~> 0.9.9'
 gem 'sass-rails', '~> 5.0.6'
 gem 'coffee-rails', '~> 4.1.0'
 gem 'uglifier', '~> 2.7.2'
-gem 'turbolinks', '~> 2.5.0'
-gem 'jquery-turbolinks', '~> 2.1.0'
+gem 'gitlab-turbolinks-classic', '~> 2.5', '>= 2.5.6'
 
 gem 'addressable',        '~> 2.3.8'
 gem 'bootstrap-sass',     '~> 3.3.0'
@@ -294,8 +298,8 @@ group :development, :test do
   gem 'spring-commands-rspec',    '~> 1.0.4'
   gem 'spring-commands-spinach',  '~> 1.1.0'
 
-  gem 'rubocop', '~> 0.43.0', require: false
-  gem 'rubocop-rspec', '~> 1.5.0', require: false
+  gem 'rubocop', '~> 0.46.0', require: false
+  gem 'rubocop-rspec', '~> 1.9.1', require: false
   gem 'scss_lint', '~> 0.47.0', require: false
   gem 'haml_lint', '~> 0.18.2', require: false
   gem 'simplecov', '0.12.0', require: false

Gemfile.lock

@@ -54,10 +54,16 @@ GEM
       faraday_middleware-multi_json (~> 0.0)
       oauth2 (~> 1.0)
     asciidoctor (1.5.3)
+    asciidoctor-plantuml (0.0.6)
+      asciidoctor (~> 1.5)
     ast (2.3.0)
     attr_encrypted (3.0.3)
       encryptor (~> 3.0.0)
     attr_required (1.0.0)
+    autoparse (0.3.3)
+      addressable (>= 2.3.1)
+      extlib (>= 0.9.15)
+      multi_json (>= 1.0.0)
     autoprefixer-rails (6.2.3)
       execjs
       json
@@ -179,6 +185,7 @@ GEM
     excon (0.52.0)
     execjs (2.6.0)
     expression_parser (0.9.0)
+    extlib (0.9.16)
     factory_girl (4.7.0)
       activesupport (>= 3.0.0)
     factory_girl_rails (4.7.0)
@@ -208,6 +215,10 @@ GEM
       builder
       excon (~> 0.49)
       formatador (~> 0.2)
+    fog-google (0.5.0)
+      fog-core
+      fog-json
+      fog-xml
     fog-json (1.0.2)
       fog-core (~> 1.0)
       multi_json (~> 1.10)
@@ -254,7 +265,9 @@ GEM
       diff-lcs (~> 1.1)
       mime-types (>= 1.16, < 3)
       posix-spawn (~> 0.3)
-    gitlab-markup (1.5.0)
+    gitlab-markup (1.5.1)
+    gitlab-turbolinks-classic (2.5.6)
+      coffee-rails
     gitlab_omniauth-ldap (1.2.1)
       net-ldap (~> 0.9)
       omniauth (~> 1.0)
@@ -279,6 +292,25 @@ GEM
       json
       multi_json
       request_store (>= 1.0)
+    google-api-client (0.8.7)
+      activesupport (>= 3.2, < 5.0)
+      addressable (~> 2.3)
+      autoparse (~> 0.3)
+      extlib (~> 0.9)
+      faraday (~> 0.9)
+      googleauth (~> 0.3)
+      launchy (~> 2.4)
+      multi_json (~> 1.10)
+      retriable (~> 1.4)
+      signet (~> 0.6)
+    googleauth (0.5.1)
+      faraday (~> 0.9)
+      jwt (~> 1.4)
+      logging (~> 2.0)
+      memoist (~> 0.12)
+      multi_json (~> 1.11)
+      os (~> 0.9)
+      signet (~> 0.7)
     grape (0.18.0)
       activesupport
       builder
@@ -342,9 +374,6 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    jquery-turbolinks (2.1.0)
-      railties (>= 3.1.0)
-      turbolinks
     jquery-ui-rails (5.0.5)
       railties (>= 3.2.16)
     json (1.8.3)
@@ -381,11 +410,16 @@ GEM
     listen (3.0.5)
       rb-fsevent (>= 0.9.3)
       rb-inotify (>= 0.9)
+    little-plugger (1.1.4)
+    logging (2.1.0)
+      little-plugger (~> 1.1)
+      multi_json (~> 1.10)
     loofah (2.0.3)
       nokogiri (>= 1.5.9)
     mail (2.6.4)
       mime-types (>= 1.16, < 4)
     mail_room (0.9.0)
+    memoist (0.15.0)
     method_source (0.8.2)
     mime-types (2.99.3)
     mimemagic (0.3.0)
@@ -473,6 +507,7 @@ GEM
     org-ruby (0.9.12)
       rubypants (~> 0.2)
     orm_adapter (0.5.0)
+    os (0.9.6)
     paranoia (2.2.0)
       activerecord (>= 4.0, < 5.1)
     parser (2.3.1.4)
@@ -584,6 +619,7 @@ GEM
       http-cookie (>= 1.0.2, < 2.0)
       mime-types (>= 1.16, < 4.0)
       netrc (~> 0.8)
+    retriable (1.4.1)
     rinku (2.0.0)
     rotp (2.1.2)
     rouge (2.0.7)
@@ -614,14 +650,14 @@ GEM
     rspec-retry (0.4.5)
       rspec-core
     rspec-support (3.5.0)
-    rubocop (0.43.0)
+    rubocop (0.46.0)
       parser (>= 2.3.1.1, < 3.0)
       powerpack (~> 0.1)
       rainbow (>= 1.99.1, < 3.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (~> 1.0, >= 1.0.1)
-    rubocop-rspec (1.5.0)
-      rubocop (>= 0.40.0)
+    rubocop-rspec (1.9.1)
+      rubocop (>= 0.42.0)
     ruby-fogbugz (0.2.1)
       crack (~> 0.4)
     ruby-prof (0.16.2)
@@ -675,6 +711,11 @@ GEM
       sidekiq (>= 4.2.1)
     sidekiq-limit_fetch (3.4.0)
       sidekiq (>= 4)
+    signet (0.7.3)
+      addressable (~> 2.3)
+      faraday (~> 0.9)
+      jwt (~> 1.5)
+      multi_json (~> 1.10)
     simplecov (0.12.0)
       docile (~> 1.1.0)
       json (>= 1.8, < 3)
@@ -736,8 +777,6 @@ GEM
     truncato (0.7.8)
       htmlentities (~> 4.3.1)
       nokogiri (~> 1.6.1)
-    turbolinks (2.5.3)
-      coffee-rails
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
     u2f (0.2.1)
@@ -800,6 +839,7 @@ DEPENDENCIES
   allocations (~> 1.0)
   asana (~> 0.4.0)
   asciidoctor (~> 1.5.2)
+  asciidoctor-plantuml (= 0.0.6)
   attr_encrypted (~> 3.0.0)
   awesome_print (~> 1.2.0)
   babosa (~> 1.0.2)
@@ -837,6 +877,7 @@ DEPENDENCIES
   flay (~> 2.6.1)
   fog-aws (~> 0.9)
   fog-core (~> 1.40)
+  fog-google (~> 0.5)
   fog-local (~> 0.3)
   fog-openstack (~> 0.1)
   fog-rackspace (~> 0.1.1)
@@ -847,11 +888,13 @@ DEPENDENCIES
   gemojione (~> 3.0)
   github-linguist (~> 4.7.0)
   gitlab-flowdock-git-hook (~> 1.0.1)
-  gitlab-markup (~> 1.5.0)
+  gitlab-markup (~> 1.5.1)
+  gitlab-turbolinks-classic (~> 2.5, >= 2.5.6)
   gitlab_omniauth-ldap (~> 1.2.1)
   gollum-lib (~> 4.2)
   gollum-rugged_adapter (~> 0.4.2)
   gon (~> 6.1.0)
+  google-api-client (~> 0.8.6)
   grape (~> 0.18.0)
   grape-entity (~> 0.6.0)
   haml_lint (~> 0.18.2)
@@ -865,7 +908,6 @@ DEPENDENCIES
   jira-ruby (~> 1.1.2)
   jquery-atwho-rails (~> 1.3.2)
   jquery-rails (~> 4.1.0)
-  jquery-turbolinks (~> 2.1.0)
   jquery-ui-rails (~> 5.0.0)
   json-schema (~> 2.6.2)
   jwt
@@ -928,8 +970,8 @@ DEPENDENCIES
   rqrcode-rails3 (~> 0.1.7)
   rspec-rails (~> 3.5.0)
   rspec-retry (~> 0.4.5)
-  rubocop (~> 0.43.0)
-  rubocop-rspec (~> 1.5.0)
+  rubocop (~> 0.46.0)
+  rubocop-rspec (~> 1.9.1)
   ruby-fogbugz (~> 0.2.1)
   ruby-prof (~> 0.16.2)
   rugged (~> 0.24.0)
@@ -961,7 +1003,6 @@ DEPENDENCIES
   thin (~> 1.7.0)
   timecop (~> 0.8.0)
   truncato (~> 0.7.8)
-  turbolinks (~> 2.5.0)
   u2f (~> 0.2.1)
   uglifier (~> 2.7.2)
   underscore-rails (~> 1.8.0)

app/assets/javascripts/application.js

@@ -55,6 +55,7 @@ requireAll(require.context('./extensions', false, /^\.\/.*\.(js|es6)$/));
 requireAll(require.context('./lib/utils',  false, /^\.\/.*\.(js|es6)$/));
 requireAll(require.context('./u2f',        false, /^\.\/.*\.(js|es6)$/));
 requireAll(require.context('.',            false, /^\.\/(?!application).*\.(js|es6)$/));
+requireAll(require.context('./droplab',    false, /^\.\/.*\.(js|es6)$/));
 require('vendor/fuzzaldrin-plus');
 window.ES6Promise = require('vendor/es6-promise.auto');
 window.ES6Promise.polyfill();

app/assets/javascripts/boards/components/board.js.es6

@@ -45,14 +45,28 @@ require('./board_list');
           const issue = this.list.findIssue(this.detailIssue.issue.id);
 
           if (issue) {
+            const offsetLeft = this.$el.offsetLeft;
             const boardsList = document.querySelectorAll('.boards-list')[0];
-            const right = (this.$el.offsetLeft + this.$el.offsetWidth) - boardsList.offsetWidth;
-            const left = boardsList.scrollLeft - this.$el.offsetLeft;
+            const left = boardsList.scrollLeft - offsetLeft;
+            let right = (offsetLeft + this.$el.offsetWidth);
+
+            if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) {
+              // -290 here because width of boardsList is animating so therefore
+              // getting the width here is incorrect
+              // 290 is the width of the sidebar
+              right -= (boardsList.offsetWidth - 290);
+            } else {
+              right -= boardsList.offsetWidth;
+            }
 
             if (right - boardsList.scrollLeft > 0) {
-              boardsList.scrollLeft = right;
+              $(boardsList).animate({
+                scrollLeft: right
+              }, this.sortableOptions.animation);
             } else if (left > 0) {
-              boardsList.scrollLeft = this.$el.offsetLeft;
+              $(boardsList).animate({
+                scrollLeft: offsetLeft
+              }, this.sortableOptions.animation);
             }
           }
         },
@@ -65,7 +79,7 @@ require('./board_list');
       }
     },
     mounted () {
-      const options = gl.issueBoards.getBoardSortableDefaultOptions({
+      this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
         disabled: this.disabled,
         group: 'boards',
         draggable: '.is-draggable',
@@ -84,7 +98,7 @@ require('./board_list');
         }
       });
 
-      this.sortable = Sortable.create(this.$el.parentNode, options);
+      this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
     },
   });
 })();

app/assets/javascripts/boards/mixins/sortable_default_options.js.es6

@@ -20,6 +20,7 @@
 
   gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
     let defaultSortOptions = {
+      animation: 200,
       forceFallback: true,
       fallbackClass: 'is-dragging',
       fallbackOnBody: true,

app/assets/javascripts/build.js

@@ -5,6 +5,7 @@
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
   var AUTO_SCROLL_OFFSET = 75;
+  var DOWN_BUILD_TRACE = '#down-build-trace';
 
   this.Build = (function() {
     Build.interval = null;
@@ -26,7 +27,7 @@
       this.$autoScrollStatus = $('#autoscroll-status');
       this.$autoScrollStatusText = this.$autoScrollStatus.find('.status-text');
       this.$upBuildTrace = $('#up-build-trace');
-      this.$downBuildTrace = $('#down-build-trace');
+      this.$downBuildTrace = $(DOWN_BUILD_TRACE);
       this.$scrollTopBtn = $('#scroll-top');
       this.$scrollBottomBtn = $('#scroll-bottom');
       this.$buildRefreshAnimation = $('.js-build-refresh');
@@ -91,6 +92,9 @@
         dataType: 'json',
         success: function(buildData) {
           $('.js-build-output').html(buildData.trace_html);
+          if (window.location.hash === DOWN_BUILD_TRACE) {
+            $("html,body").scrollTop(this.$buildTrace.height());
+          }
           if (removeRefreshStatuses.indexOf(buildData.status) >= 0) {
             this.$buildRefreshAnimation.remove();
             return this.initScrollMonitor();
@@ -105,6 +109,8 @@
         dataType: "json",
         success: (function(_this) {
           return function(log) {
+            var pageUrl;
+
             if (log.state) {
               _this.state = log.state;
             }
@@ -116,7 +122,12 @@
               }
               return _this.checkAutoscroll();
             } else if (log.status !== _this.buildStatus) {
-              return Turbolinks.visit(_this.pageUrl);
+              pageUrl = _this.pageUrl;
+              if (_this.$autoScrollStatus.data('state') === 'enabled') {
+                pageUrl += DOWN_BUILD_TRACE;
+              }
+
+              return Turbolinks.visit(pageUrl);
             }
           };
         })(this)

app/assets/javascripts/ci_lint_editor.js.es6

+(() => {
+  window.gl = window.gl || {};
+
+  class CILintEditor {
+    constructor() {
+      this.editor = window.ace.edit('ci-editor');
+      this.textarea = document.querySelector('#content');
+
+      this.editor.getSession().setMode('ace/mode/yaml');
+      this.editor.on('input', () => {
+        const content = this.editor.getSession().getValue();
+        this.textarea.value = content;
+      });
+    }
+  }
+
+  gl.CILintEditor = CILintEditor;
+})();

app/assets/javascripts/dispatcher.js.es6

@@ -84,6 +84,9 @@
           break;
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
+          if (gl.FilteredSearchManager) {
+            new gl.FilteredSearchManager();
+          }
           Issuable.init();
           new gl.IssuableBulkActions({
             prefixId: page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_',
@@ -184,11 +187,6 @@
             new TreeView();
           }
           break;
-        case 'projects:pipelines:index':
-          new gl.MiniPipelineGraph({
-            container: '.js-pipeline-table',
-          });
-          break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:show':
           const { controllerAction } = document.querySelector('.js-pipeline-container').dataset;
@@ -215,7 +213,9 @@
           new gl.Members();
           new UsersSelect();
           break;
-        case 'projects:project_members:index':
+        case 'projects:members:show':
+          new gl.MemberExpirationDate('.js-access-expiration-date-groups');
+          new GroupsSelect();
           new gl.MemberExpirationDate();
           new gl.Members();
           new UsersSelect();
@@ -261,10 +261,6 @@
         case 'projects:artifacts:browse':
           new BuildArtifacts();
           break;
-        case 'projects:group_links:index':
-          new gl.MemberExpirationDate();
-          new GroupsSelect();
-          break;
         case 'search:show':
           new Search();
           break;
@@ -275,6 +271,10 @@
         case 'projects:variables:index':
           new gl.ProjectVariables();
           break;
+        case 'ci:lints:create':
+        case 'ci:lints:show':
+          new gl.CILintEditor();
+          break;
       }
       switch (path.first()) {
         case 'admin':

app/assets/javascripts/droplab/droplab_ajax.js

+/* eslint-disable */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/* global droplab */
+
+require('../window')(function(w){
+  function droplabAjaxException(message) {
+    this.message = message;
+  }
+
+  w.droplabAjax = {
+    _loadUrlData: function _loadUrlData(url) {
+      return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest;
+        xhr.open('GET', url, true);
+        xhr.onreadystatechange = function () {
+          if(xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+              var data = JSON.parse(xhr.responseText);
+              return resolve(data);
+            } else {
+              return reject([xhr.responseText, xhr.status]);
+            }
+          }
+        };
+        xhr.send();
+      });
+    },
+
+    init: function init(hook) {
+      var self = this;
+      var config = hook.config.droplabAjax;
+
+      if (!config || !config.endpoint || !config.method) {
+        return;
+      }
+
+      if (config.method !== 'setData' && config.method !== 'addData') {
+        return;
+      }
+
+      if (config.loadingTemplate) {
+        var dynamicList = hook.list.list.querySelector('[data-dynamic]');
+
+        var loadingTemplate = document.createElement('div');
+        loadingTemplate.innerHTML = config.loadingTemplate;
+        loadingTemplate.setAttribute('data-loading-template', '');
+
+        this.listTemplate = dynamicList.outerHTML;
+        dynamicList.outerHTML = loadingTemplate.outerHTML;
+      }
+
+      this._loadUrlData(config.endpoint)
+        .then(function(d) {
+          if (config.loadingTemplate) {
+            var dataLoadingTemplate = hook.list.list.querySelector('[data-loading-template]');
+
+            if (dataLoadingTemplate) {
+              dataLoadingTemplate.outerHTML = self.listTemplate;
+            }
+          }
+          hook.list[config.method].call(hook.list, d);
+        }).catch(function(e) {
+          throw new droplabAjaxException(e.message || e);
+        });
+    },
+
+    destroy: function() {
+    }
+  };
+});
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
+},{}]},{},[1])(1)
+});
\ No newline at end of file

app/assets/javascripts/droplab/droplab_ajax_filter.js

+/* eslint-disable */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/* global droplab */
+
+require('../window')(function(w){
+  w.droplabAjaxFilter = {
+    init: function(hook) {
+      this.destroyed = false;
+      this.hook = hook;
+      this.notLoading();
+
+      this.debounceTriggerWrapper = this.debounceTrigger.bind(this);
+      this.hook.trigger.addEventListener('keydown.dl', this.debounceTriggerWrapper);
+      this.hook.trigger.addEventListener('focus', this.debounceTriggerWrapper);
+      this.trigger(true);
+    },
+
+    notLoading: function notLoading() {
+      this.loading = false;
+    },
+
+    debounceTrigger: function debounceTrigger(e) {
+      var NON_CHARACTER_KEYS = [16, 17, 18, 20, 37, 38, 39, 40, 91, 93];
+      var invalidKeyPressed = NON_CHARACTER_KEYS.indexOf(e.detail.which || e.detail.keyCode) > -1;
+      var focusEvent = e.type === 'focus';
+
+      if (invalidKeyPressed || this.loading) {
+        return;
+      }
+
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+      }
+
+      this.timeout = setTimeout(this.trigger.bind(this, focusEvent), 200);
+    },
+
+    trigger: function trigger(getEntireList) {
+      var config = this.hook.config.droplabAjaxFilter;
+      var searchValue = this.trigger.value;
+
+      if (!config || !config.endpoint || !config.searchKey) {
+        return;
+      }
+
+      if (config.searchValueFunction) {
+        searchValue = config.searchValueFunction();
+      }
+
+      if (config.loadingTemplate && this.hook.list.data === undefined ||
+        this.hook.list.data.length === 0) {
+        var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
+
+        var loadingTemplate = document.createElement('div');
+        loadingTemplate.innerHTML = config.loadingTemplate;
+        loadingTemplate.setAttribute('data-loading-template', true);
+
+        this.listTemplate = dynamicList.outerHTML;
+        dynamicList.outerHTML = loadingTemplate.outerHTML;
+      }
+
+      if (getEntireList) {
+        searchValue = '';
+      }
+
+      if (config.searchKey === searchValue) {
+        return this.list.show();
+      }
+
+      this.loading = true;
+
+      var params = config.params || {};
+      params[config.searchKey] = searchValue;
+      var self = this;
+      this._loadUrlData(config.endpoint + this.buildParams(params)).then(function(data) {
+        if (config.loadingTemplate && self.hook.list.data === undefined ||
+          self.hook.list.data.length === 0) {
+          const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
+
+          if (dataLoadingTemplate) {
+            dataLoadingTemplate.outerHTML = self.listTemplate;
+          }
+        }
+
+        if (!self.destroyed) {
+          var hookListChildren = self.hook.list.list.children;
+          var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
+
+          if (onlyDynamicList && data.length === 0) {
+            self.hook.list.hide();
+          }
+
+          self.hook.list.setData.call(self.hook.list, data);
+        }
+        self.notLoading();
+      });
+    },
+
+    _loadUrlData: function _loadUrlData(url) {
+      return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest;
+        xhr.open('GET', url, true);
+        xhr.onreadystatechange = function () {
+          if(xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+              var data = JSON.parse(xhr.responseText);
+              return resolve(data);
+            } else {
+              return reject([xhr.responseText, xhr.status]);
+            }
+          }
+        };
+        xhr.send();
+      });
+    },
+
+    buildParams: function(params) {
+      if (!params) return '';
+      var paramsArray = Object.keys(params).map(function(param) {
+        return param + '=' + (params[param] || '');
+      });
+      return '?' + paramsArray.join('&');
+    },
+
+    destroy: function destroy() {
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+      }
+
+      this.destroyed = true;
+
+      this.hook.trigger.removeEventListener('keydown.dl', this.debounceTriggerWrapper);
+      this.hook.trigger.removeEventListener('focus', this.debounceTriggerWrapper);
+    }
+  };
+});
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
+},{}]},{},[1])(1)
+});
\ No newline at end of file

app/assets/javascripts/droplab/droplab_filter.js

+/* eslint-disable */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.filter||(g.filter = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/* global droplab */
+
+require('../window')(function(w){
+  w.droplabFilter = {
+
+    keydownWrapper: function(e){
+        var list = e.detail.hook.list;
+        var data = list.data;
+        var value = e.detail.hook.trigger.value.toLowerCase();
+        var config = e.detail.hook.config.droplabFilter;
+        var matches = [];
+        var filterFunction;
+        // will only work on dynamically set data
+        if(!data){
+          return;
+        }
+
+        if (config && config.filterFunction && typeof config.filterFunction === 'function') {
+          filterFunction = config.filterFunction;
+        } else {
+          filterFunction = function(o){
+            // cheap string search
+            o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1;
+            return o;
+          };
+        }
+
+        matches = data.map(function(o) {
+          return filterFunction(o, value);
+        });
+        list.render(matches);
+    },
+
+    init: function init(hookInput) {
+      var config = hookInput.config.droplabFilter;
+
+      if (!config || (!config.template && !config.filterFunction)) {
+        return;
+      }
+
+      this.hookInput = hookInput;
+      this.hookInput.trigger.addEventListener('keyup.dl', this.keydownWrapper);
+    },
+
+    destroy: function destroy(){
+      this.hookInput.trigger.removeEventListener('keyup.dl', this.keydownWrapper);
+    }
+  };
+});
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
+},{}]},{},[1])(1)
+});
\ No newline at end of file

app/assets/javascripts/environments/components/environment.js.es6

@@ -216,7 +216,7 @@ require('./environment_item');
                   <th class="environments-deploy">Last deployment</th>
                   <th class="environments-build">Build</th>
                   <th class="environments-commit">Commit</th>
-                  <th class="environments-date"></th>
+                  <th class="environments-date">Created</th>
                   <th class="hidden-xs environments-actions"></th>
                 </tr>
               </thead>

app/assets/javascripts/filtered_search/dropdown_hint.js.es6

+require('./filtered_search_dropdown');
+
+/* global droplabFilter */
+
+(() => {
+  class DropdownHint extends gl.FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter) {
+      super(droplab, dropdown, input, filter);
+      this.config = {
+        droplabFilter: {
+          template: 'hint',
+          filterFunction: gl.DropdownUtils.filterHint,
+        },
+      };
+    }
+
+    itemClicked(e) {
+      const { selected } = e.detail;
+
+      if (selected.tagName === 'LI') {
+        if (selected.hasAttribute('data-value')) {
+          this.dismissDropdown();
+        } else {
+          const token = selected.querySelector('.js-filter-hint').innerText.trim();
+          const tag = selected.querySelector('.js-filter-tag').innerText.trim();
+
+          if (tag.length) {
+            gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''));
+          }
+          this.dismissDropdown();
+          this.dispatchInputEvent();
+        }
+      }
+    }
+
+    renderContent() {
+      const dropdownData = [{
+        icon: 'fa-pencil',
+        hint: 'author:',
+        tag: '<@author>',
+      }, {
+        icon: 'fa-user',
+        hint: 'assignee:',
+        tag: '<@assignee>',
+      }, {
+        icon: 'fa-clock-o',
+        hint: 'milestone:',
+        tag: '<%milestone>',
+      }, {
+        icon: 'fa-tag',
+        hint: 'label:',
+        tag: '<~label>',
+      }];
+
+      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
+      this.droplab.setData(this.hookId, dropdownData);
+    }
+
+    init() {
+      this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownHint = DropdownHint;
+})();

app/assets/javascripts/filtered_search/dropdown_non_user.js.es6

+require('./filtered_search_dropdown');
+
+/* global droplabAjax */
+/* global droplabFilter */
+
+(() => {
+  class DropdownNonUser extends gl.FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter, endpoint, symbol) {
+      super(droplab, dropdown, input, filter);
+      this.symbol = symbol;
+      this.config = {
+        droplabAjax: {
+          endpoint,
+          method: 'setData',
+          loadingTemplate: this.loadingTemplate,
+        },
+        droplabFilter: {
+          filterFunction: gl.DropdownUtils.filterWithSymbol.bind(null, this.symbol),
+        },
+      };
+    }
+
+    itemClicked(e) {
+      super.itemClicked(e, (selected) => {
+        const title = selected.querySelector('.js-data-value').innerText.trim();
+        return `${this.symbol}${gl.DropdownUtils.getEscapedText(title)}`;
+      });
+    }
+
+    renderContent(forceShowList = false) {
+      this.droplab
+        .changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config);
+      super.renderContent(forceShowList);
+    }
+
+    init() {
+      this.droplab
+        .addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownNonUser = DropdownNonUser;
+})();

app/assets/javascripts/filtered_search/dropdown_user.js.es6

+require('./filtered_search_dropdown');
+
+/* global droplabAjaxFilter */
+
+(() => {
+  class DropdownUser extends gl.FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter) {
+      super(droplab, dropdown, input, filter);
+      this.config = {
+        droplabAjaxFilter: {
+          endpoint: '/autocomplete/users.json',
+          searchKey: 'search',
+          params: {
+            per_page: 20,
+            active: true,
+            project_id: this.getProjectId(),
+            current_user: true,
+          },
+          searchValueFunction: this.getSearchInput.bind(this),
+          loadingTemplate: this.loadingTemplate,
+        },
+      };
+    }
+
+    itemClicked(e) {
+      super.itemClicked(e,
+        selected => selected.querySelector('.dropdown-light-content').innerText.trim());
+    }
+
+    renderContent(forceShowList = false) {
+      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config);
+      super.renderContent(forceShowList);
+    }
+
+    getProjectId() {
+      return this.input.getAttribute('data-project-id');
+    }
+
+    getSearchInput() {
+      const query = this.input.value.trim();
+      const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
+
+      return lastToken.value || '';
+    }
+
+    init() {
+      this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownUser = DropdownUser;
+})();

app/assets/javascripts/filtered_search/dropdown_utils.js.es6

+(() => {
+  class DropdownUtils {
+    static getEscapedText(text) {
+      let escapedText = text;
+      const hasSpace = text.indexOf(' ') !== -1;
+      const hasDoubleQuote = text.indexOf('"') !== -1;
+
+      // Encapsulate value with quotes if it has spaces
+      // Known side effect: values's with both single and double quotes
+      // won't escape properly
+      if (hasSpace) {
+        if (hasDoubleQuote) {
+          escapedText = `'${text}'`;
+        } else {
+          // Encapsulate singleQuotes or if it hasSpace
+          escapedText = `"${text}"`;
+        }
+      }
+
+      return escapedText;
+    }
+
+    static filterWithSymbol(filterSymbol, item, query) {
+      const updatedItem = item;
+      const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(query);
+
+      if (lastToken !== searchToken) {
+        const title = updatedItem.title.toLowerCase();
+        let value = lastToken.value.toLowerCase();
+
+        if ((value[0] === '"' || value[0] === '\'') && title.indexOf(' ') !== -1) {
+          value = value.slice(1);
+        }
+
+        // Eg. filterSymbol = ~ for labels
+        const matchWithoutSymbol = lastToken.symbol === filterSymbol && title.indexOf(value) !== -1;
+        const match = title.indexOf(`${lastToken.symbol}${value}`) !== -1;
+
+        updatedItem.droplab_hidden = !match && !matchWithoutSymbol;
+      } else {
+        updatedItem.droplab_hidden = false;
+      }
+
+      return updatedItem;
+    }
+
+    static filterHint(item, query) {
+      const updatedItem = item;
+      let { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
+      lastToken = lastToken.key || lastToken || '';
+
+      if (!lastToken || query.split('').last() === ' ') {
+        updatedItem.droplab_hidden = false;
+      } else if (lastToken) {
+        const split = lastToken.split(':');
+        const tokenName = split[0].split(' ').last();
+
+        const match = updatedItem.hint.indexOf(tokenName.toLowerCase()) === -1;
+        updatedItem.droplab_hidden = tokenName ? match : false;
+      }
+
+      return updatedItem;
+    }
+
+    static setDataValueIfSelected(filter, selected) {
+      const dataValue = selected.getAttribute('data-value');
+
+      if (dataValue) {
+        gl.FilteredSearchDropdownManager.addWordToInput(filter, dataValue);
+      }
+
+      // Return boolean based on whether it was set
+      return dataValue !== null;
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownUtils = DropdownUtils;
+})();

app/assets/javascripts/filtered_search/filtered_search_bundle.js

+ // This is a manifest file that'll be compiled into including all the files listed below.
+ // Add new JavaScript code in separate files in this directory and they'll automatically
+ // be included in the compiled file accessible from http://example.com/assets/application.js
+ // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+ // the compiled file.
+ //
+ function requireAll(context) { return context.keys().map(context); }
+
+ requireAll(require.context('./', true, /^\.\/.*\.(js|es6)$/));

app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6

+(() => {
+  const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
+
+  class FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter) {
+      this.droplab = droplab;
+      this.hookId = input.getAttribute('data-id');
+      this.input = input;
+      this.filter = filter;
+      this.dropdown = dropdown;
+      this.loadingTemplate = `<div class="filter-dropdown-loading">
+        <i class="fa fa-spinner fa-spin"></i>
+      </div>`;
+      this.bindEvents();
+    }
+
+    bindEvents() {
+      this.itemClickedWrapper = this.itemClicked.bind(this);
+      this.dropdown.addEventListener('click.dl', this.itemClickedWrapper);
+    }
+
+    unbindEvents() {
+      this.dropdown.removeEventListener('click.dl', this.itemClickedWrapper);
+    }
+
+    getCurrentHook() {
+      return this.droplab.hooks.filter(h => h.id === this.hookId)[0] || null;
+    }
+
+    itemClicked(e, getValueFunction) {
+      const { selected } = e.detail;
+
+      if (selected.tagName === 'LI' && selected.innerHTML) {
+        const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(this.filter, selected);
+
+        if (!dataValueSet) {
+          const value = getValueFunction(selected);
+          gl.FilteredSearchDropdownManager.addWordToInput(this.filter, value);
+        }
+
+        this.dismissDropdown();
+      }
+    }
+
+    setAsDropdown() {
+      this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.dropdown.id}`);
+    }
+
+    setOffset(offset = 0) {
+      this.dropdown.style.left = `${offset}px`;
+    }
+
+    renderContent(forceShowList = false) {
+      if (forceShowList && this.getCurrentHook().list.hidden) {
+        this.getCurrentHook().list.show();
+      }
+    }
+
+    render(forceRenderContent = false, forceShowList = false) {
+      this.setAsDropdown();
+
+      const currentHook = this.getCurrentHook();
+      const firstTimeInitialized = currentHook === null;
+
+      if (firstTimeInitialized || forceRenderContent) {
+        this.renderContent(forceShowList);
+      } else if (currentHook.list.list.id !== this.dropdown.id) {
+        this.renderContent(forceShowList);
+      }
+    }
+
+    dismissDropdown() {
+      // Focusing on the input will dismiss dropdown
+      // (default droplab functionality)
+      this.input.focus();
+    }
+
+    dispatchInputEvent() {
+      // Propogate input change to FilteredSearchDropdownManager
+      // so that it can determine which dropdowns to open
+      this.input.dispatchEvent(new Event('input'));
+    }
+
+    hideDropdown() {
+      this.getCurrentHook().list.hide();
+    }
+
+    resetFilters() {
+      const hook = this.getCurrentHook();
+      const data = hook.list.data;
+      const results = data.map((o) => {
+        const updated = o;
+        updated.droplab_hidden = false;
+        return updated;
+      });
+      hook.list.render(results);
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchDropdown = FilteredSearchDropdown;
+})();

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js.es6

+/* global DropLab */
+
+(() => {
+  class FilteredSearchDropdownManager {
+    constructor() {
+      this.tokenizer = gl.FilteredSearchTokenizer;
+      this.filteredSearchInput = document.querySelector('.filtered-search');
+
+      this.setupMapping();
+
+      this.cleanupWrapper = this.cleanup.bind(this);
+      document.addEventListener('page:fetch', this.cleanupWrapper);
+    }
+
+    cleanup() {
+      if (this.droplab) {
+        this.droplab.destroy();
+        this.droplab = null;
+      }
+
+      this.setupMapping();
+
+      document.removeEventListener('page:fetch', this.cleanupWrapper);
+    }
+
+    setupMapping() {
+      this.mapping = {
+        author: {
+          reference: null,
+          gl: 'DropdownUser',
+          element: document.querySelector('#js-dropdown-author'),
+        },
+        assignee: {
+          reference: null,
+          gl: 'DropdownUser',
+          element: document.querySelector('#js-dropdown-assignee'),
+        },
+        milestone: {
+          reference: null,
+          gl: 'DropdownNonUser',
+          extraArguments: ['milestones.json', '%'],
+          element: document.querySelector('#js-dropdown-milestone'),
+        },
+        label: {
+          reference: null,
+          gl: 'DropdownNonUser',
+          extraArguments: ['labels.json', '~'],
+          element: document.querySelector('#js-dropdown-label'),
+        },
+        hint: {
+          reference: null,
+          gl: 'DropdownHint',
+          element: document.querySelector('#js-dropdown-hint'),
+        },
+      };
+    }
+
+    static addWordToInput(tokenName, tokenValue = '') {
+      const input = document.querySelector('.filtered-search');
+      const word = `${tokenName}:${tokenValue}`;
+
+      const { lastToken, searchToken } = gl.FilteredSearchTokenizer.processTokens(input.value);
+      const lastSearchToken = searchToken.split(' ').last();
+      const lastInputCharacter = input.value[input.value.length - 1];
+      const lastInputTrimmedCharacter = input.value.trim()[input.value.trim().length - 1];
+
+      // Remove the typed tokenName
+      if (word.indexOf(lastSearchToken) === 0 && searchToken !== '') {
+        // Remove spaces after the colon
+        if (lastInputCharacter === ' ' && lastInputTrimmedCharacter === ':') {
+          input.value = input.value.trim();
+        }
+
+        input.value = input.value.slice(0, -1 * lastSearchToken.length);
+      } else if (lastInputCharacter !== ' ' || (lastToken && lastToken.value[lastToken.value.length - 1] === ' ')) {
+        // Remove the existing tokenValue
+        const lastTokenString = `${lastToken.key}:${lastToken.symbol}${lastToken.value}`;
+        input.value = input.value.slice(0, -1 * lastTokenString.length);
+      }
+
+      input.value += word;
+    }
+
+    updateCurrentDropdownOffset() {
+      this.updateDropdownOffset(this.currentDropdown);
+    }
+
+    updateDropdownOffset(key) {
+      if (!this.font) {
+        this.font = window.getComputedStyle(this.filteredSearchInput).font;
+      }
+
+      const filterIconPadding = 27;
+      const offset = gl.text
+        .getTextWidth(this.filteredSearchInput.value, this.font) + filterIconPadding;
+
+      this.mapping[key].reference.setOffset(offset);
+    }
+
+    load(key, firstLoad = false) {
+      const mappingKey = this.mapping[key];
+      const glClass = mappingKey.gl;
+      const element = mappingKey.element;
+      let forceShowList = false;
+
+      if (!mappingKey.reference) {
+        const dl = this.droplab;
+        const defaultArguments = [null, dl, element, this.filteredSearchInput, key];
+        const glArguments = defaultArguments.concat(mappingKey.extraArguments || []);
+
+        // Passing glArguments to `new gl[glClass](<arguments>)`
+        mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
+      }
+
+      if (firstLoad) {
+        mappingKey.reference.init();
+      }
+
+      if (this.currentDropdown === 'hint') {
+        // Force the dropdown to show if it was clicked from the hint dropdown
+        forceShowList = true;
+      }
+
+      this.updateDropdownOffset(key);
+      mappingKey.reference.render(firstLoad, forceShowList);
+
+      this.currentDropdown = key;
+    }
+
+    loadDropdown(dropdownName = '') {
+      let firstLoad = false;
+
+      if (!this.droplab) {
+        firstLoad = true;
+        this.droplab = new DropLab();
+      }
+
+      const match = gl.FilteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase());
+      const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key
+        && this.mapping[match.key];
+      const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
+
+      if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
+        const key = match && match.key ? match.key : 'hint';
+        this.load(key, firstLoad);
+      }
+    }
+
+    setDropdown() {
+      const { lastToken, searchToken } = this.tokenizer
+        .processTokens(this.filteredSearchInput.value);
+
+      if (this.filteredSearchInput.value.split('').last() === ' ') {
+        this.updateCurrentDropdownOffset();
+      }
+
+      if (lastToken === searchToken && lastToken !== null) {
+        // Token is not fully initialized yet because it has no value
+        // Eg. token = 'label:'
+
+        const split = lastToken.split(':');
+        const dropdownName = split[0].split(' ').last();
+        this.loadDropdown(split.length > 1 ? dropdownName : '');
+      } else if (lastToken) {
+        // Token has been initialized into an object because it has a value
+        this.loadDropdown(lastToken.key);
+      } else {
+        this.loadDropdown('hint');
+      }
+    }
+
+    resetDropdowns() {
+      // Force current dropdown to hide
+      this.mapping[this.currentDropdown].reference.hideDropdown();
+
+      // Re-Load dropdown
+      this.setDropdown();
+
+      // Reset filters for current dropdown
+      this.mapping[this.currentDropdown].reference.resetFilters();
+
+      // Reposition dropdown so that it is aligned with cursor
+      this.updateDropdownOffset(this.currentDropdown);
+    }
+
+    destroyDroplab() {
+      this.droplab.destroy();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager;
+})();

app/assets/javascripts/filtered_search/filtered_search_manager.js.es6

+/* global Turbolinks */
+
+(() => {
+  class FilteredSearchManager {
+    constructor() {
+      this.filteredSearchInput = document.querySelector('.filtered-search');
+      this.clearSearchButton = document.querySelector('.clear-search');
+
+      if (this.filteredSearchInput) {
+        this.tokenizer = gl.FilteredSearchTokenizer;
+        this.dropdownManager = new gl.FilteredSearchDropdownManager();
+
+        this.bindEvents();
+        this.loadSearchParamsFromURL();
+        this.dropdownManager.setDropdown();
+
+        this.cleanupWrapper = this.cleanup.bind(this);
+        document.addEventListener('page:fetch', this.cleanupWrapper);
+      }
+    }
+
+    cleanup() {
+      this.unbindEvents();
+      document.removeEventListener('page:fetch', this.cleanupWrapper);
+    }
+
+    bindEvents() {
+      this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
+      this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this);
+      this.checkForEnterWrapper = this.checkForEnter.bind(this);
+      this.clearSearchWrapper = this.clearSearch.bind(this);
+      this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
+
+      this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
+      this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
+      this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
+      this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
+      this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
+    }
+
+    unbindEvents() {
+      this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
+      this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
+      this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
+      this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
+      this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
+    }
+
+    checkForBackspace(e) {
+      // 8 = Backspace Key
+      // 46 = Delete Key
+      if (e.keyCode === 8 || e.keyCode === 46) {
+        // Reposition dropdown so that it is aligned with cursor
+        this.dropdownManager.updateCurrentDropdownOffset();
+      }
+    }
+
+    checkForEnter(e) {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+
+        // Prevent droplab from opening dropdown
+        this.dropdownManager.destroyDroplab();
+
+        this.search();
+      }
+    }
+
+    toggleClearSearchButton(e) {
+      if (e.target.value) {
+        this.clearSearchButton.classList.remove('hidden');
+      } else {
+        this.clearSearchButton.classList.add('hidden');
+      }
+    }
+
+    clearSearch(e) {
+      e.preventDefault();
+
+      this.filteredSearchInput.value = '';
+      this.clearSearchButton.classList.add('hidden');
+
+      this.dropdownManager.resetDropdowns();
+    }
+
+    loadSearchParamsFromURL() {
+      const params = gl.utils.getUrlParamsArray();
+      const inputValues = [];
+
+      params.forEach((p) => {
+        const split = p.split('=');
+        const keyParam = decodeURIComponent(split[0]);
+        const value = split[1];
+
+        // Check if it matches edge conditions listed in gl.FilteredSearchTokenKeys
+        const condition = gl.FilteredSearchTokenKeys.searchByConditionUrl(p);
+
+        if (condition) {
+          inputValues.push(`${condition.tokenKey}:${condition.value}`);
+        } else {
+          // Sanitize value since URL converts spaces into +
+          // Replace before decode so that we know what was originally + versus the encoded +
+          const sanitizedValue = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : value;
+          const match = gl.FilteredSearchTokenKeys.searchByKeyParam(keyParam);
+
+          if (match) {
+            const indexOf = keyParam.indexOf('_');
+            const sanitizedKey = indexOf !== -1 ? keyParam.slice(0, keyParam.indexOf('_')) : keyParam;
+            const symbol = match.symbol;
+            let quotationsToUse = '';
+
+            if (sanitizedValue.indexOf(' ') !== -1) {
+              // Prefer ", but use ' if required
+              quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\'';
+            }
+
+            inputValues.push(`${sanitizedKey}:${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`);
+          } else if (!match && keyParam === 'search') {
+            inputValues.push(sanitizedValue);
+          }
+        }
+      });
+
+      // Trim the last space value
+      this.filteredSearchInput.value = inputValues.join(' ');
+
+      if (inputValues.length > 0) {
+        this.clearSearchButton.classList.remove('hidden');
+      }
+    }
+
+    search() {
+      const paths = [];
+      const { tokens, searchToken } = this.tokenizer.processTokens(this.filteredSearchInput.value);
+      const currentState = gl.utils.getParameterByName('state') || 'opened';
+      paths.push(`state=${currentState}`);
+
+      tokens.forEach((token) => {
+        const condition = gl.FilteredSearchTokenKeys
+          .searchByConditionKeyValue(token.key, token.value.toLowerCase());
+        const { param } = gl.FilteredSearchTokenKeys.searchByKey(token.key);
+        const keyParam = param ? `${token.key}_${param}` : token.key;
+        let tokenPath = '';
+
+        if (condition) {
+          tokenPath = condition.url;
+        } else {
+          let tokenValue = token.value;
+
+          if ((tokenValue[0] === '\'' && tokenValue[tokenValue.length - 1] === '\'') ||
+            (tokenValue[0] === '"' && tokenValue[tokenValue.length - 1] === '"')) {
+            tokenValue = tokenValue.slice(1, tokenValue.length - 1);
+          }
+
+          tokenPath = `${keyParam}=${encodeURIComponent(tokenValue)}`;
+        }
+
+        paths.push(tokenPath);
+      });
+
+      if (searchToken) {
+        paths.push(`search=${encodeURIComponent(searchToken)}`);
+      }
+
+      Turbolinks.visit(`?scope=all&utf8=✓&${paths.join('&')}`);
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchManager = FilteredSearchManager;
+})();

app/assets/javascripts/filtered_search/filtered_search_token_keys.js.es6

+(() => {
+  const tokenKeys = [{
+    key: 'author',
+    type: 'string',
+    param: 'username',
+    symbol: '@',
+  }, {
+    key: 'assignee',
+    type: 'string',
+    param: 'username',
+    symbol: '@',
+  }, {
+    key: 'milestone',
+    type: 'string',
+    param: 'title',
+    symbol: '%',
+  }, {
+    key: 'label',
+    type: 'array',
+    param: 'name[]',
+    symbol: '~',
+  }];
+
+  const conditions = [{
+    url: 'assignee_id=0',
+    tokenKey: 'assignee',
+    value: 'none',
+  }, {
+    url: 'milestone_title=No+Milestone',
+    tokenKey: 'milestone',
+    value: 'none',
+  }, {
+    url: 'milestone_title=%23upcoming',
+    tokenKey: 'milestone',
+    value: 'upcoming',
+  }, {
+    url: 'label_name[]=No+Label',
+    tokenKey: 'label',
+    value: 'none',
+  }];
+
+  class FilteredSearchTokenKeys {
+    static get() {
+      return tokenKeys;
+    }
+
+    static getConditions() {
+      return conditions;
+    }
+
+    static searchByKey(key) {
+      return tokenKeys.find(tokenKey => tokenKey.key === key) || null;
+    }
+
+    static searchBySymbol(symbol) {
+      return tokenKeys.find(tokenKey => tokenKey.symbol === symbol) || null;
+    }
+
+    static searchByKeyParam(keyParam) {
+      return tokenKeys.find((tokenKey) => {
+        let tokenKeyParam = tokenKey.key;
+
+        if (tokenKey.param) {
+          tokenKeyParam += `_${tokenKey.param}`;
+        }
+
+        return keyParam === tokenKeyParam;
+      }) || null;
+    }
+
+    static searchByConditionUrl(url) {
+      return conditions.find(condition => condition.url === url) || null;
+    }
+
+    static searchByConditionKeyValue(key, value) {
+      return conditions
+        .find(condition => condition.tokenKey === key && condition.value === value) || null;
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchTokenKeys = FilteredSearchTokenKeys;
+})();

app/assets/javascripts/filtered_search/filtered_search_tokenizer.js.es6

+(() => {
+  class FilteredSearchTokenizer {
+    static processTokens(input) {
+      // Regex extracts `(token):(symbol)(value)`
+      // Values that start with a double quote must end in a double quote (same for single)
+      const tokenRegex = /(\w+):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\S+))/g;
+      const tokens = [];
+      let lastToken = null;
+      const searchToken = input.replace(tokenRegex, (match, key, symbol, v1, v2, v3) => {
+        let tokenValue = v1 || v2 || v3;
+        let tokenSymbol = symbol;
+
+        if (tokenValue === '~' || tokenValue === '%' || tokenValue === '@') {
+          tokenSymbol = tokenValue;
+          tokenValue = '';
+        }
+
+        tokens.push({
+          key,
+          value: tokenValue || '',
+          symbol: tokenSymbol || '',
+        });
+        return '';
+      }).replace(/\s{2,}/g, ' ').trim() || '';
+
+      if (tokens.length > 0) {
+        const last = tokens[tokens.length - 1];
+        const lastString = `${last.key}:${last.symbol}${last.value}`;
+        lastToken = input.lastIndexOf(lastString) ===
+          input.length - lastString.length ? last : searchToken;
+      } else {
+        lastToken = searchToken;
+      }
+
+      return {
+        tokens,
+        lastToken,
+        searchToken,
+      };
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchTokenizer = FilteredSearchTokenizer;
+})();

app/assets/javascripts/lib/utils/common_utils.js → app/assets/javascripts/lib/utils/common_utils.js.es6

@@ -124,6 +124,12 @@
       return parsedUrl.pathname.charAt(0) === '/' ? parsedUrl.pathname : '/' + parsedUrl.pathname;
     };
 
+    gl.utils.getUrlParamsArray = function () {
+      // We can trust that each param has one & since values containing & will be encoded
+      // Remove the first character of search as it is always ?
+      return window.location.search.slice(1).split('&');
+    };
+
     gl.utils.isMetaKey = function(e) {
       return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
     };
@@ -139,6 +145,21 @@
       }, 200);
     };
 
+    /**
+      this will take in the `name` of the param you want to parse in the url
+      if the name does not exist this function will return `null`
+      otherwise it will return the value of the param key provided
+    */
+    w.gl.utils.getParameterByName = (name) => {
+      const url = window.location.href;
+      name = name.replace(/[[\]]/g, '\\$&');
+      const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
+      const results = regex.exec(url);
+      if (!results) return null;
+      if (!results[2]) return '';
+      return decodeURIComponent(results[2].replace(/\+/g, ' '));
+    };
+
   })(window);
 
 }).call(this);

app/assets/javascripts/lib/utils/text_utility.js

@@ -17,6 +17,21 @@
     gl.text.replaceRange = function(s, start, end, substitute) {
       return s.substring(0, start) + substitute + s.substring(end);
     };
+    gl.text.getTextWidth = function(text, font) {
+      /**
+      * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+      *
+      * @param {String} text The text to be rendered.
+      * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
+      *
+      * @see http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
+      */
+      // re-use canvas object for better performance
+      var canvas = gl.text.getTextWidth.canvas || (gl.text.getTextWidth.canvas = document.createElement('canvas'));
+      var context = canvas.getContext('2d');
+      context.font = font;
+      return context.measureText(text).width;
+    };
     gl.text.selectedText = function(text, textarea) {
       return text.substring(textarea.selectionStart, textarea.selectionEnd);
     };

app/assets/javascripts/member_expiration_date.js → app/assets/javascripts/member_expiration_date.js.es6

-/* eslint-disable func-names, space-before-function-paren, vars-on-top, no-var, object-shorthand, comma-dangle, max-len */
-(function() {
+(() => {
   // Add datepickers to all `js-access-expiration-date` elements. If those elements are
   // children of an element with the `clearable-input` class, and have a sibling
   // `js-clear-input` element, then show that element when there is a value in the
   // datepicker, and make clicking on that element clear the field.
   //
-  gl.MemberExpirationDate = function() {
+  window.gl = window.gl || {};
+  gl.MemberExpirationDate = (selector = '.js-access-expiration-date') => {
     function toggleClearInput() {
       $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
     }
-
-    var inputs = $('.js-access-expiration-date');
+    const inputs = $(selector);
 
     inputs.datepicker({
       dateFormat: 'yy-mm-dd',
       minDate: 1,
-      onSelect: function () {
+      onSelect: function onSelect() {
         $(this).trigger('change');
         toggleClearInput.call(this);
-      }
+      },
     });
 
-    inputs.next('.js-clear-input').on('click', function(event) {
+    inputs.next('.js-clear-input').on('click', function clicked(event) {
       event.preventDefault();
 
-      var input = $(this).closest('.clearable-input').find('.js-access-expiration-date');
+      const input = $(this).closest('.clearable-input').find(selector);
       input.datepicker('setDate', null)
         .trigger('change');
       toggleClearInput.call(input);

app/assets/javascripts/notes.js

@@ -896,7 +896,9 @@ require('vendor/task_list');
 
       new GLForm($editForm.find('form'));
 
-      $editForm.find('form').attr('action', postUrl);
+      $editForm.find('form')
+        .attr('action', postUrl)
+        .attr('data-remote', 'true');
       $editForm.find('.js-form-target-id').val(targetId);
       $editForm.find('.js-form-target-type').val(targetType);
       $editForm.find('.js-note-text').focus().val(originalContent);

app/assets/javascripts/search_autocomplete.js.es6

@@ -142,8 +142,9 @@
     }
 
     getCategoryContents() {
-      var dashboardOptions, groupOptions, issuesPath, items, mrPath, name, options, projectOptions, userId, utils;
+      var dashboardOptions, groupOptions, issuesPath, items, mrPath, name, options, projectOptions, userId, userName, utils;
       userId = gon.current_user_id;
+      userName = gon.current_username;
       utils = gl.utils, projectOptions = gl.projectOptions, groupOptions = gl.groupOptions, dashboardOptions = gl.dashboardOptions;
       if (utils.isInGroupsPage() && groupOptions) {
         options = groupOptions[utils.getGroupSlug()];
@@ -158,10 +159,10 @@
           header: "" + name
         }, {
           text: 'Issues assigned to me',
-          url: issuesPath + "/?assignee_id=" + userId
+          url: issuesPath + "/?assignee_username=" + userName
         }, {
           text: "Issues I've created",
-          url: issuesPath + "/?author_id=" + userId
+          url: issuesPath + "/?author_username=" + userName
         }, 'separator', {
           text: 'Merge requests assigned to me',
           url: mrPath + "/?assignee_id=" + userId

app/assets/javascripts/vue_pagination/index.js.es6

+/* global Vue, gl */
+/* eslint-disable no-param-reassign, no-plusplus */
+
+window.Vue = require('vue');
+
+((gl) => {
+  const PAGINATION_UI_BUTTON_LIMIT = 4;
+  const UI_LIMIT = 6;
+  const SPREAD = '...';
+  const PREV = 'Prev';
+  const NEXT = 'Next';
+  const FIRST = '<< First';
+  const LAST = 'Last >>';
+
+  gl.VueGlPagination = Vue.extend({
+    props: {
+
+      /**
+        This function will take the information given by the pagination component
+        And make a new Turbolinks call
+
+        Here is an example `change` method:
+
+        change(pagenum, apiScope) {
+          Turbolinks.visit(`?scope=${apiScope}&p=${pagenum}`);
+        },
+      */
+
+      change: {
+        type: Function,
+        required: true,
+      },
+
+      /**
+        pageInfo will come from the headers of the API call
+        in the `.then` clause of the VueResource API call
+        there should be a function that contructs the pageInfo for this component
+
+        This is an example:
+
+        const pageInfo = headers => ({
+          perPage: +headers['X-Per-Page'],
+          page: +headers['X-Page'],
+          total: +headers['X-Total'],
+          totalPages: +headers['X-Total-Pages'],
+          nextPage: +headers['X-Next-Page'],
+          previousPage: +headers['X-Prev-Page'],
+        });
+      */
+
+      pageInfo: {
+        type: Object,
+        required: true,
+      },
+    },
+    methods: {
+      changePage(e) {
+        let apiScope = gl.utils.getParameterByName('scope');
+
+        if (!apiScope) apiScope = 'all';
+
+        const text = e.target.innerText;
+        const { totalPages, nextPage, previousPage } = this.pageInfo;
+
+        switch (text) {
+          case SPREAD:
+            break;
+          case LAST:
+            this.change(totalPages, apiScope);
+            break;
+          case NEXT:
+            this.change(nextPage, apiScope);
+            break;
+          case PREV:
+            this.change(previousPage, apiScope);
+            break;
+          case FIRST:
+            this.change(1, apiScope);
+            break;
+          default:
+            this.change(+text, apiScope);
+            break;
+        }
+      },
+    },
+    computed: {
+      prev() {
+        return this.pageInfo.previousPage;
+      },
+      next() {
+        return this.pageInfo.nextPage;
+      },
+      getItems() {
+        const total = this.pageInfo.totalPages;
+        const page = this.pageInfo.page;
+        const items = [];
+
+        if (page > 1) items.push({ title: FIRST });
+
+        if (page > 1) {
+          items.push({ title: PREV, prev: true });
+        } else {
+          items.push({ title: PREV, disabled: true, prev: true });
+        }
+
+        if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true });
+
+        const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
+        const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total);
+
+        for (let i = start; i <= end; i++) {
+          const isActive = i === page;
+          items.push({ title: i, active: isActive, page: true });
+        }
+
+        if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
+          items.push({ title: SPREAD, separator: true, page: true });
+        }
+
+        if (page === total) {
+          items.push({ title: NEXT, disabled: true, next: true });
+        } else if (total - page >= 1) {
+          items.push({ title: NEXT, next: true });
+        }
+
+        if (total - page >= 1) items.push({ title: LAST, last: true });
+
+        return items;
+      },
+    },
+    template: `
+      <div class="gl-pagination">
+        <ul class="pagination clearfix">
+          <li v-for='item in getItems'
+            :class='{
+              page: item.page,
+              prev: item.prev,
+              next: item.next,
+              separator: item.separator,
+              active: item.active,
+              disabled: item.disabled
+            }'
+          >
+            <a @click="changePage($event)">{{item.title}}</a>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_index/index.js.es6

+/* global Vue, VueResource, gl */
+window.Vue = require('vue');
+window.Vue.use(require('vue-resource'));
+require('../vue_common_component/commit')
+require('../boards/vue_resource_interceptor');
+require('./status');
+require('./store');
+require('./pipeline_url');
+require('./stage');
+require('./stages');
+require('./pipeline_actions');
+require('./time_ago');
+require('./pipelines');
+
+(() => {
+  const project = document.querySelector('.pipelines');
+  const entry = document.querySelector('.vue-pipelines-index');
+  const svgs = document.querySelector('.pipeline-svgs');
+
+  if (!entry) return null;
+  return new Vue({
+    el: entry,
+    data: {
+      scope: project.dataset.url,
+      store: new gl.PipelineStore(),
+      svgs: svgs.dataset,
+    },
+    components: {
+      'vue-pipelines': gl.VuePipelines,
+    },
+    template: `
+      <vue-pipelines
+        :scope='scope'
+        :store='store'
+        :svgs='svgs'
+      >
+      </vue-pipelines>
+    `,
+  });
+})();

app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6

+/* global Vue, Flash, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePipelineActions = Vue.extend({
+    props: ['pipeline', 'svgs'],
+    computed: {
+      actions() {
+        return this.pipeline.details.manual_actions.length > 0;
+      },
+      artifacts() {
+        return this.pipeline.details.artifacts.length > 0;
+      },
+    },
+    methods: {
+      download(name) {
+        return `Download ${name} artifacts`;
+      },
+    },
+    template: `
+      <td class="pipeline-actions hidden-xs">
+        <div class="controls pull-right">
+          <div class="btn-group inline">
+            <div class="btn-group">
+              <a
+                v-if='actions'
+                class="dropdown-toggle btn btn-default js-pipeline-dropdown-manual-actions"
+                data-toggle="dropdown"
+                title="Manual build"
+                alt="Manual Build"
+              >
+                <span v-html='svgs.iconPlay'></span>
+                <i class="fa fa-caret-down"></i>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-align-right">
+                <li v-for='action in pipeline.details.manual_actions'>
+                  <a
+                    rel="nofollow"
+                    data-method="post"
+                    :href='action.path'
+                    title="Manual build"
+                  >
+                    <span v-html='svgs.iconPlay'></span>
+                    <span title="Manual build">{{action.name}}</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="btn-group">
+              <a
+                v-if='artifacts'
+                class="dropdown-toggle btn btn-default build-artifacts js-pipeline-dropdown-download"
+                data-toggle="dropdown"
+                type="button"
+              >
+                <i class="fa fa-download"></i>
+                <i class="fa fa-caret-down"></i>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-align-right">
+                <li v-for='artifact in pipeline.details.artifacts'>
+                  <a
+                    rel="nofollow"
+                    :href='artifact.path'
+                  >
+                    <i class="fa fa-download"></i>
+                    <span>{{download(artifact.name)}}</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="cancel-retry-btns inline">
+            <a
+              v-if='pipeline.flags.retryable'
+              class="btn has-tooltip"
+              title="Retry"
+              rel="nofollow"
+              data-method="post"
+              :href='pipeline.retry_path'
+            >
+              <i class="fa fa-repeat"></i>
+            </a>
+            <a
+              v-if='pipeline.flags.cancelable'
+              class="btn btn-remove has-tooltip"
+              title="Cancel"
+              rel="nofollow"
+              data-method="post"
+              :href='pipeline.cancel_path'
+              data-original-title="Cancel"
+            >
+              <i class="fa fa-remove"></i>
+            </a>
+          </div>
+        </div>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePipelineUrl = Vue.extend({
+    props: [
+      'pipeline',
+    ],
+    computed: {
+      user() {
+        return !!this.pipeline.user;
+      },
+    },
+    template: `
+      <td>
+        <a :href='pipeline.path'>
+          <span class="pipeline-id">#{{pipeline.id}}</span>
+        </a>
+        <span>by</span>
+        <a
+          v-if='user'
+          :href='pipeline.user.web_url'
+        >
+          <img
+            v-if='user'
+            class="avatar has-tooltip s20 "
+            :title='pipeline.user.name'
+            data-container="body"
+            :src='pipeline.user.avatar_url'
+          >
+        </a>
+        <span
+          v-if='!user'
+          class="api monospace"
+        >
+          API
+        </span>
+        <span
+          v-if='pipeline.flags.latest'
+          class="label label-success has-tooltip"
+          title="Latest pipeline for this branch"
+          data-original-title="Latest pipeline for this branch"
+        >
+          latest
+        </span>
+        <span
+          v-if='pipeline.flags.yaml_errors'
+          class="label label-danger has-tooltip"
+          :title='pipeline.yaml_errors'
+          :data-original-title='pipeline.yaml_errors'
+        >
+          yaml invalid
+        </span>
+        <span
+          v-if='pipeline.flags.stuck'
+          class="label label-warning"
+        >
+          stuck
+        </span>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_index/pipelines.js.es6

+/* global Vue, Turbolinks, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePipelines = Vue.extend({
+    components: {
+      runningPipeline: gl.VueRunningPipeline,
+      pipelineActions: gl.VuePipelineActions,
+      stages: gl.VueStages,
+      commit: gl.CommitComponent,
+      pipelineUrl: gl.VuePipelineUrl,
+      pipelineHead: gl.VuePipelineHead,
+      glPagination: gl.VueGlPagination,
+      statusScope: gl.VueStatusScope,
+      timeAgo: gl.VueTimeAgo,
+    },
+    data() {
+      return {
+        pipelines: [],
+        timeLoopInterval: '',
+        intervalId: '',
+        apiScope: 'all',
+        pageInfo: {},
+        pagenum: 1,
+        count: { all: 0, running_or_pending: 0 },
+        pageRequest: false,
+      };
+    },
+    props: ['scope', 'store', 'svgs'],
+    created() {
+      const pagenum = gl.utils.getParameterByName('p');
+      const scope = gl.utils.getParameterByName('scope');
+      if (pagenum) this.pagenum = pagenum;
+      if (scope) this.apiScope = scope;
+      this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
+    },
+    methods: {
+      change(pagenum, apiScope) {
+        Turbolinks.visit(`?scope=${apiScope}&p=${pagenum}`);
+      },
+      author(pipeline) {
+        if (!pipeline.commit) return { avatar_url: '', web_url: '', username: '' };
+        if (pipeline.commit.author) return pipeline.commit.author;
+        return {
+          avatar_url: pipeline.commit.author_gravatar_url,
+          web_url: `mailto:${pipeline.commit.author_email}`,
+          username: pipeline.commit.author_name,
+        };
+      },
+      ref(pipeline) {
+        const { ref } = pipeline;
+        return { name: ref.name, tag: ref.tag, ref_url: ref.path };
+      },
+      commitTitle(pipeline) {
+        return pipeline.commit ? pipeline.commit.title : '';
+      },
+      commitSha(pipeline) {
+        return pipeline.commit ? pipeline.commit.short_id : '';
+      },
+      commitUrl(pipeline) {
+        return pipeline.commit ? pipeline.commit.commit_path : '';
+      },
+      match(string) {
+        return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase());
+      },
+    },
+    template: `
+      <div>
+        <div class="pipelines realtime-loading" v-if='pipelines.length < 1'>
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
+        <div class="table-holder" v-if='pipelines.length'>
+          <table class="table ci-table">
+            <thead>
+              <tr>
+                <th class="pipeline-status">Status</th>
+                <th class="pipeline-info">Pipeline</th>
+                <th class="pipeline-commit">Commit</th>
+                <th class="pipeline-stages">Stages</th>
+                <th class="pipeline-date"></th>
+                <th class="pipeline-actions hidden-xs"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="commit" v-for='pipeline in pipelines'>
+                <status-scope
+                  :pipeline='pipeline'
+                  :match='match'
+                  :svgs='svgs'
+                >
+                </status-scope>
+                <pipeline-url :pipeline='pipeline'></pipeline-url>
+                <td>
+                  <commit
+                    :commit-icon-svg='svgs.commitIconSvg'
+                    :author='author(pipeline)'
+                    :tag="pipeline.ref.tag"
+                    :title='commitTitle(pipeline)'
+                    :commit-ref='ref(pipeline)'
+                    :short-sha='commitSha(pipeline)'
+                    :commit-url='commitUrl(pipeline)'
+                  >
+                  </commit>
+                </td>
+                <stages
+                  :pipeline='pipeline'
+                  :svgs='svgs'
+                  :match='match'
+                >
+                </stages>
+                <time-ago :pipeline='pipeline' :svgs='svgs'></time-ago>
+                <pipeline-actions :pipeline='pipeline' :svgs='svgs'></pipeline-actions>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="pipelines realtime-loading" v-if='pageRequest'>
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
+        <gl-pagination
+          v-if='pageInfo.total > pageInfo.perPage'
+          :pagenum='pagenum'
+          :change='change'
+          :count='count.all'
+          :pageInfo='pageInfo'
+        >
+        </gl-pagination>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_index/stage.js.es6

+/* global Vue, Flash, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueStage = Vue.extend({
+    data() {
+      return {
+        request: false,
+        builds: '',
+        spinner: '<span class="fa fa-spinner fa-spin"></span>',
+      };
+    },
+    props: ['stage', 'svgs', 'match'],
+    methods: {
+      fetchBuilds() {
+        if (this.request) return this.clearBuilds();
+
+        return this.$http.get(this.stage.dropdown_path)
+          .then((response) => {
+            this.request = true;
+            this.builds = JSON.parse(response.body).html;
+          }, () => {
+            const flash = new Flash('Something went wrong on our end.');
+            this.request = false;
+            return flash;
+          });
+      },
+      clearBuilds() {
+        this.builds = '';
+        this.request = false;
+      },
+    },
+    computed: {
+      buildsOrSpinner() {
+        return this.request ? this.builds : this.spinner;
+      },
+      dropdownClass() {
+        if (this.request) return 'js-builds-dropdown-container';
+        return 'js-builds-dropdown-loading builds-dropdown-loading';
+      },
+      buildStatus() {
+        return `Build: ${this.stage.status.label}`;
+      },
+      tooltip() {
+        return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`;
+      },
+      svg() {
+        const icon = this.stage.status.icon;
+        const stageIcon = icon.replace(/icon/i, 'stage_icon');
+        return this.svgs[this.match(stageIcon)];
+      },
+      triggerButtonClass() {
+        return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
+      },
+    },
+    template: `
+      <div>
+        <button
+          @click='fetchBuilds'
+          @blur='fetchBuilds'
+          :class="triggerButtonClass"
+          :title='stage.title'
+          data-placement="top"
+          data-toggle="dropdown"
+          type="button">
+          <span v-html="svg"></span>
+          <i class="fa fa-caret-down "></i>
+        </button>
+        <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
+          <div class="arrow-up"></div>
+          <div :class="dropdownClass" class="js-builds-dropdown-list scrollable-menu" v-html="buildsOrSpinner"></div>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_index/stages.js.es6

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueStages = Vue.extend({
+    components: {
+      'vue-stage': gl.VueStage,
+    },
+    props: ['pipeline', 'svgs', 'match'],
+    template: `
+      <td class="stage-cell">
+        <div
+          class="stage-container dropdown js-mini-pipeline-graph"
+          v-for='stage in pipeline.details.stages'
+        >
+          <vue-stage :stage='stage' :svgs='svgs' :match='match'></vue-stage>
+        </div>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_index/status.js.es6

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueStatusScope = Vue.extend({
+    props: [
+      'pipeline', 'svgs', 'match',
+    ],
+    computed: {
+      cssClasses() {
+        const cssObject = { 'ci-status': true };
+        cssObject[`ci-${this.pipeline.details.status.group}`] = true;
+        return cssObject;
+      },
+      svg() {
+        return this.svgs[this.match(this.pipeline.details.status.icon)];
+      },
+      detailsPath() {
+        const { status } = this.pipeline.details;
+        return status.has_details ? status.details_path : false;
+      },
+    },
+    template: `
+      <td class="commit-link">
+        <a
+          :class='cssClasses'
+          :href='detailsPath'
+          v-html='svg + pipeline.details.status.text'
+        >
+        </a>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_index/store.js.es6

+/* global gl, Flash */
+/* eslint-disable no-param-reassign, no-underscore-dangle */
+require('../vue_realtime_listener');
+
+((gl) => {
+  const pageValues = headers => ({
+    perPage: +headers['X-Per-Page'],
+    page: +headers['X-Page'],
+    total: +headers['X-Total'],
+    totalPages: +headers['X-Total-Pages'],
+    nextPage: +headers['X-Next-Page'],
+    previousPage: +headers['X-Prev-Page'],
+  });
+
+  gl.PipelineStore = class {
+    fetchDataLoop(Vue, pageNum, url, apiScope) {
+      const updatePipelineNums = (count) => {
+        const { all } = count;
+        const running = count.running_or_pending;
+        document.querySelector('.js-totalbuilds-count').innerHTML = all;
+        document.querySelector('.js-running-count').innerHTML = running;
+      };
+
+      const goFetch = () =>
+        this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
+          .then((response) => {
+            const pageInfo = pageValues(response.headers);
+            this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
+
+            const res = JSON.parse(response.body);
+            this.count = Object.assign({}, this.count, res.count);
+            this.pipelines = Object.assign([], this.pipelines, res.pipelines);
+
+            updatePipelineNums(this.count);
+            this.pageRequest = false;
+          }, () => {
+            this.pageRequest = false;
+            return new Flash('Something went wrong on our end.');
+          });
+
+      goFetch();
+
+      const startTimeLoops = () => {
+        this.timeLoopInterval = setInterval(() => {
+          this.$children
+            .filter(e => e.$options._componentTag === 'time-ago')
+            .forEach(e => e.changeTime());
+        }, 10000);
+      };
+
+      startTimeLoops();
+
+      const removeIntervals = () => clearInterval(this.timeLoopInterval);
+      const startIntervals = () => startTimeLoops();
+
+      gl.VueRealtimeListener(removeIntervals, startIntervals);
+    }
+  };
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_index/time_ago.js.es6

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueTimeAgo = Vue.extend({
+    data() {
+      return {
+        currentTime: new Date(),
+      };
+    },
+    props: ['pipeline', 'svgs'],
+    computed: {
+      timeAgo() {
+        return gl.utils.getTimeago();
+      },
+      localTimeFinished() {
+        return gl.utils.formatDate(this.pipeline.details.finished_at);
+      },
+      timeStopped() {
+        const changeTime = this.currentTime;
+        const options = {
+          weekday: 'long',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+        };
+        options.timeZoneName = 'short';
+        const finished = this.pipeline.details.finished_at;
+        if (!finished && changeTime) return false;
+        return ({ words: this.timeAgo.format(finished) });
+      },
+      duration() {
+        const { duration } = this.pipeline.details;
+        const date = new Date(duration * 1000);
+
+        let hh = date.getUTCHours();
+        let mm = date.getUTCMinutes();
+        let ss = date.getSeconds();
+
+        if (hh < 10) hh = `0${hh}`;
+        if (mm < 10) mm = `0${mm}`;
+        if (ss < 10) ss = `0${ss}`;
+
+        if (duration !== null) return `${hh}:${mm}:${ss}`;
+        return false;
+      },
+    },
+    methods: {
+      changeTime() {
+        this.currentTime = new Date();
+      },
+    },
+    template: `
+      <td>
+        <p class="duration" v-if='duration'>
+          <span v-html='svgs.iconTimer'></span>
+          {{duration}}
+        </p>
+        <p class="finished-at" v-if='timeStopped'>
+          <i class="fa fa-calendar"></i>
+          <time
+            data-toggle="tooltip"
+            data-placement="top"
+            data-container="body"
+            :data-original-title='localTimeFinished'
+          >
+            {{timeStopped.words}}
+          </time>
+        </p>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_realtime_listener/index.js.es6

+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueRealtimeListener = (removeIntervals, startIntervals) => {
+    const removeAll = () => {
+      removeIntervals();
+      window.removeEventListener('beforeunload', removeIntervals);
+      window.removeEventListener('focus', startIntervals);
+      window.removeEventListener('blur', removeIntervals);
+      document.removeEventListener('page:fetch', removeAll);
+    };
+
+    window.addEventListener('beforeunload', removeIntervals);
+    window.addEventListener('focus', startIntervals);
+    window.addEventListener('blur', removeIntervals);
+    document.addEventListener('page:fetch', removeAll);
+  };
+})(window.gl || (window.gl = {}));

app/assets/stylesheets/framework/filters.scss

@@ -23,3 +23,118 @@
   }
 }
 
+.filtered-search-container {
+  display: -webkit-flex;
+  display: flex;
+}
+
+.filtered-search-input-container {
+  display: -webkit-flex;
+  display: flex;
+  position: relative;
+  width: 100%;
+
+  .form-control {
+    padding-left: 25px;
+    padding-right: 25px;
+
+    &:focus ~ .fa-filter {
+      color: $common-gray-dark;
+    }
+  }
+
+  .fa-filter {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: $gray-darkest;
+  }
+
+  .fa-times {
+    right: 10px;
+    color: $gray-darkest;
+  }
+
+  .clear-search {
+    width: 35px;
+    background-color: transparent;
+    border: none;
+    position: absolute;
+    right: 0;
+    height: 100%;
+    outline: none;
+
+    &:hover .fa-times {
+      color: $common-gray-dark;
+    }
+  }
+}
+
+.dropdown-menu .filter-dropdown-item {
+  padding: 0;
+}
+
+.filter-dropdown {
+  max-height: 215px;
+  overflow-x: scroll;
+}
+
+.filter-dropdown-item {
+  .btn {
+    border: none;
+    width: 100%;
+    text-align: left;
+    padding: 8px 16px;
+    text-overflow: ellipsis;
+    overflow-y: hidden;
+    border-radius: 0;
+
+    .fa {
+      width: 15px;
+    }
+
+    .dropdown-label-box {
+      border-color: $white-light;
+      border-style: solid;
+      border-width: 1px;
+      width: 17px;
+      height: 17px;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $dropdown-hover-color;
+      color: $white-light;
+      text-decoration: none;
+
+      .avatar {
+        border-color: $white-light;
+      }
+    }
+  }
+
+  .dropdown-light-content {
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .dropdown-user {
+    display: -webkit-flex;
+    display: flex;
+  }
+
+  .dropdown-user-details {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+.hint-dropdown {
+  width: 250px;
+}
+
+.filter-dropdown-loading {
+  padding: 8px 16px;
+}

app/assets/stylesheets/framework/layout.scss

@@ -41,6 +41,21 @@ body {
     }
   }
 
+  .alert-link-group {
+    float: right;
+  }
+
+  /* Center alert text and alert action links on smaller screens */
+  @media (max-width: $screen-sm-max) {
+    .alert {
+      text-align: center;
+    }
+
+    .alert-link-group {
+      float: none;
+    }
+  }
+
   /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
   .alert-warning {
     transition: background-color 0.15s, border-color 0.15s;

app/assets/stylesheets/framework/lists.scss

@@ -163,6 +163,10 @@ ul.content-list {
 
         &:last-child {
           margin-right: 0;
+
+          @media(max-width: $screen-xs-max) {
+            margin: 0 auto;
+          }
         }
       }
 

app/assets/stylesheets/framework/mobile.scss

@@ -23,21 +23,21 @@
     margin-right: 0;
   }
 
-  .issues-details-filters,
+  .issues-details-filters:not(.filtered-search-block),
   .dash-projects-filters,
   .check-all-holder {
     display: none;
   }
 
-  .rss-btn {
+  .issues-holder .issue-check {
     display: none;
   }
 
-  .project-home-links {
+  .rss-btn {
     display: none;
   }
 
-  .project-avatar {
+  .project-home-links {
     display: none;
   }
 

app/assets/stylesheets/framework/sidebar.scss

@@ -183,9 +183,11 @@
 
   &.right-sidebar-expanded {
     .line-resolve-all-container {
+      @media (min-width: $sidebar-breakpoint) {
         display: none;
       }
     }
+  }
 }
 
 header.header-sidebar-pinned {

app/assets/stylesheets/framework/variables.scss

@@ -263,6 +263,11 @@ $dropdown-chevron-size: 10px;
 $dropdown-toggle-active-border-color: darken($border-color, 14%);
 
 
+/*
+* Filtered Search
+*/
+$dropdown-hover-color: #3b86ff;
+
 /*
 * Buttons
 */

app/assets/stylesheets/pages/boards.scss

@@ -74,6 +74,7 @@
     height: 475px; // Needed for PhantomJS
     height: calc(100vh - 220px);
     min-height: 475px;
+    transition: width .2s;
 
     &.is-compact {
       width: calc(100% - 290px);
@@ -338,3 +339,18 @@
     }
   }
 }
+
+.right-sidebar.right-sidebar-expanded {
+  &.boards-sidebar-slide-enter-active,
+  &.boards-sidebar-slide-leave-active {
+    transition: width .2s,
+                padding .2s;
+  }
+
+  &.boards-sidebar-slide-enter,
+  &.boards-sidebar-slide-leave-active {
+    width: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

app/assets/stylesheets/pages/issuable.scss

+// Limit MR description for side-by-side diff view
+.fixed-width-container {
+  max-width: $limited-layout-width - ($gl-padding * 2);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.limit-container-width {
+  .detail-page-header {
+    @extend .fixed-width-container;
+  }
+
+  .issuable-details {
+    .detail-page-description,
+    .mr-source-target,
+    .mr-state-widget,
+    .merge-manually {
+      @extend .fixed-width-container;
+    }
+
+    .merge-request-tabs-holder {
+      &.affix {
+        border-bottom: 1px solid $border-color;
+
+        .nav-links {
+          border: 0;
+        }
+      }
+
+      .container-fluid {
+        @extend .fixed-width-container;
+      }
+    }
+  }
+
+  .merge-request-details {
+    .emoji-list-container {
+      @extend .fixed-width-container;
+    }
+  }
+
+  .diffs {
+    .mr-version-controls,
+    .files-changed {
+      @extend .fixed-width-container;
+    }
+  }
+}
+
 .issuable-details {
   section {
     .issuable-discussion {

app/assets/stylesheets/pages/lint.scss

@@ -9,3 +9,13 @@
     color: $lint-correct-color;
   }
 }
+
+.ci-linter {
+  .ci-editor {
+    height: 400px;
+  }
+
+  .ci-template pre {
+    white-space: pre-wrap;
+  }
+}

app/assets/stylesheets/pages/members.scss

@@ -25,7 +25,7 @@
   }
 
   .form-horizontal {
-    margin-top: 5px;
+    margin-top: 20px;
 
     @media (min-width: $screen-sm-min) {
       display: -webkit-flex;
@@ -98,6 +98,10 @@
     padding-right: 35px;
 
     @media (min-width: $screen-sm-min) {
+      width: 250px;
+    }
+
+    @media (min-width: $screen-md-min) {
       width: 350px;
     }
 

app/assets/stylesheets/pages/notes.scss

@@ -526,8 +526,9 @@ ul.notes {
 }
 
 .line-resolve-all {
+  vertical-align: middle;
   display: inline-block;
-  padding: 5px 10px;
+  padding: 6px 10px;
   background-color: $gray-light;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
@@ -535,18 +536,14 @@ ul.notes {
   &.has-next-btn {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    border-right: 0;
   }
 
   .line-resolve-btn {
-    vertical-align: middle;
     margin-right: 5px;
   }
 }
 
-.line-resolve-text {
-  vertical-align: middle;
-}
-
 .line-resolve-btn {
   display: inline-block;
   position: relative;

app/assets/stylesheets/pages/pipelines.scss

 .pipelines {
+  .realtime-loading {
+    font-size: 40px;
+    text-align: center;
+  }
+
   .stage {
     max-width: 90px;
     width: 90px;
@@ -24,6 +29,10 @@
     min-width: 1200px;
     table-layout: fixed;
 
+    .label {
+      margin-bottom: 3px;
+    }
+
     .pipeline-id {
       color: $black;
     }
@@ -177,6 +186,7 @@
   .stage-cell {
     font-size: 0;
 
+    > .stage-container > div > button > span > svg,
     > .stage-container > button > svg {
       height: 22px;
       width: 22px;

app/assets/stylesheets/pages/projects.scss

@@ -587,11 +587,21 @@ pre.light-well {
 
     .project-full-name {
       @include str-truncated;
+
+      @media (max-width: $screen-xs-max) {
+        max-width: 50%;
+      }
     }
 
     .controls {
       line-height: $list-text-height;
 
+      .badge {
+        @media (max-width: $screen-xs-max) {
+          display: none;
+        }
+      }
+
       a:hover {
         text-decoration: none;
       }
@@ -605,6 +615,12 @@ pre.light-well {
         top: 2px;
       }
     }
+
+    .description p {
+      @media (max-width: $screen-xs-max) {
+        max-width: 50%;
+      }
+    }
   }
 
   .bottom {

app/controllers/admin/application_settings_controller.rb

@@ -67,69 +67,78 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
     params.delete(:domain_blacklist_raw) if params[:domain_blacklist_file]
 
     params.require(:application_setting).permit(
-      :default_projects_limit,
-      :default_branch_protection,
-      :signup_enabled,
-      :signin_enabled,
-      :require_two_factor_authentication,
-      :two_factor_grace_period,
-      :gravatar_enabled,
-      :sign_in_text,
-      :after_sign_up_text,
-      :help_page_text,
-      :home_page_url,
+      application_setting_params_ce
+    )
+  end
+
+  def application_setting_params_ce
+    [
+      :admin_notification_email,
       :after_sign_out_path,
-      :max_attachment_size,
-      :session_expire_delay,
+      :after_sign_up_text,
+      :akismet_api_key,
+      :akismet_enabled,
+      :container_registry_token_expire_delay,
+      :default_branch_protection,
+      :default_group_visibility,
       :default_project_visibility,
+      :default_projects_limit,
       :default_snippet_visibility,
-      :default_group_visibility,
-      :domain_whitelist_raw,
       :domain_blacklist_enabled,
-      :domain_blacklist_raw,
       :domain_blacklist_file,
-      :version_check_enabled,
-      :admin_notification_email,
-      :user_oauth_applications,
-      :user_default_external,
-      :shared_runners_enabled,
-      :shared_runners_text,
+      :domain_blacklist_raw,
+      :domain_whitelist_raw,
+      :email_author_in_body,
+      :enabled_git_access_protocol,
+      :gravatar_enabled,
+      :help_page_text,
+      :home_page_url,
+      :housekeeping_bitmaps_enabled,
+      :housekeeping_enabled,
+      :housekeeping_full_repack_period,
+      :housekeeping_gc_period,
+      :housekeeping_incremental_repack_period,
+      :html_emails_enabled,
+      :koding_enabled,
+      :koding_url,
+      :plantuml_enabled,
+      :plantuml_url,
       :max_artifacts_size,
+      :max_attachment_size,
       :metrics_enabled,
       :metrics_host,
-      :metrics_port,
-      :metrics_pool_size,
-      :metrics_timeout,
       :metrics_method_call_threshold,
+      :metrics_packet_size,
+      :metrics_pool_size,
+      :metrics_port,
       :metrics_sample_interval,
+      :metrics_timeout,
       :recaptcha_enabled,
-      :recaptcha_site_key,
       :recaptcha_private_key,
-      :sentry_enabled,
-      :sentry_dsn,
-      :akismet_enabled,
-      :akismet_api_key,
-      :koding_enabled,
-      :koding_url,
-      :email_author_in_body,
-      :html_emails_enabled,
+      :recaptcha_site_key,
       :repository_checks_enabled,
-      :metrics_packet_size,
+      :require_two_factor_authentication,
+      :session_expire_delay,
+      :sign_in_text,
+      :signin_enabled,
+      :signup_enabled,
+      :sentry_dsn,
+      :sentry_enabled,
       :send_user_confirmation_email,
-      :container_registry_token_expire_delay,
-      :enabled_git_access_protocol,
+      :shared_runners_enabled,
+      :shared_runners_text,
       :sidekiq_throttling_enabled,
       :sidekiq_throttling_factor,
-      :housekeeping_enabled,
-      :housekeeping_bitmaps_enabled,
-      :housekeeping_incremental_repack_period,
-      :housekeeping_full_repack_period,
-      :housekeeping_gc_period,
+      :two_factor_grace_period,
+      :user_default_external,
+      :user_oauth_applications,
+      :version_check_enabled,
+
+      disabled_oauth_sign_in_sources: [],
+      import_sources: [],
       repository_storages: [],
       restricted_visibility_levels: [],
-      import_sources: [],
-      disabled_oauth_sign_in_sources: [],
       sidekiq_throttling_queues: []
-    )
+    ]
   end
 end

app/controllers/admin/groups_controller.rb

@@ -61,7 +61,11 @@ class Admin::GroupsController < Admin::ApplicationController
   end
 
   def group_params
-    params.require(:group).permit(
+    params.require(:group).permit(group_params_ce)
+  end
+
+  def group_params_ce
+    [
       :avatar,
       :description,
       :lfs_enabled,
@@ -69,6 +73,6 @@ class Admin::GroupsController < Admin::ApplicationController
       :path,
       :request_access_enabled,
       :visibility_level
-    )
+    ]
   end
 end

app/controllers/admin/users_controller.rb

@@ -161,15 +161,6 @@ class Admin::UsersController < Admin::ApplicationController
     @user ||= User.find_by!(username: params[:id])
   end
 
-  def user_params
-    params.require(:user).permit(
-      :email, :remember_me, :bio, :name, :username,
-      :skype, :linkedin, :twitter, :website_url, :color_scheme_id, :theme_id, :force_random_password,
-      :extern_uid, :provider, :password_expires_at, :avatar, :hide_no_ssh_key, :hide_no_password,
-      :projects_limit, :can_create_group, :admin, :key_id, :external
-    )
-  end
-
   def redirect_back_or_admin_user(options = {})
     redirect_back_or_default(default: default_route, options: options)
   end
@@ -177,4 +168,36 @@ class Admin::UsersController < Admin::ApplicationController
   def default_route
     [:admin, @user]
   end
+
+  def user_params
+    params.require(:user).permit(user_params_ce)
+  end
+
+  def user_params_ce
+    [
+      :admin,
+      :avatar,
+      :bio,
+      :can_create_group,
+      :color_scheme_id,
+      :email,
+      :extern_uid,
+      :external,
+      :force_random_password,
+      :hide_no_password,
+      :hide_no_ssh_key,
+      :key_id,
+      :linkedin,
+      :name,
+      :password_expires_at,
+      :projects_limit,
+      :provider,
+      :remember_me,
+      :skype,
+      :theme_id,
+      :twitter,
+      :username,
+      :website_url
+    ]
+  end
 end

app/controllers/concerns/service_params.rb

 module ServiceParams
   extend ActiveSupport::Concern
 
-  ALLOWED_PARAMS = [:title, :token, :type, :active, :api_key, :api_url, :api_version, :subdomain,
-                    :room, :recipients, :project_url, :webhook,
-                    :user_key, :device, :priority, :sound, :bamboo_url, :username, :password,
-                    :build_key, :server, :teamcity_url, :drone_url, :build_type,
-                    :description, :issues_url, :new_issue_url, :restrict_to_branch, :channel,
-                    :colorize_messages, :channels,
+  ALLOWED_PARAMS_CE = [
+    :active,
+    :add_pusher,
+    :api_key,
+    :api_url,
+    :api_version,
+    :bamboo_url,
+    :build_key,
+    :build_type,
+    :ca_pem,
+    :channel,
+    :channels,
+    :color,
+    :colorize_messages,
+    :confidential_issues_events,
+    :default_irc_uri,
+    :description,
+    :device,
+    :disable_diffs,
+    :drone_url,
+    :enable_ssl_verification,
+    :external_wiki_url,
     # We're using `issues_events` and `merge_requests_events`
     # in the view so we still need to explicitly state them
     # here. `Service#event_names` would only give
     # `issue_events` and `merge_request_events` (singular!)
     # See app/helpers/services_helper.rb for how we
     # make those event names plural as special case.
-                    :issues_events, :confidential_issues_events, :merge_requests_events,
-                    :notify_only_broken_builds, :notify_only_broken_pipelines,
-                    :add_pusher, :send_from_committer_email, :disable_diffs,
-                    :external_wiki_url, :notify, :color,
-                    :server_host, :server_port, :default_irc_uri, :enable_ssl_verification,
-                    :jira_issue_transition_id, :url, :project_key, :ca_pem, :namespace]
+    :issues_events,
+    :issues_url,
+    :jira_issue_transition_id,
+    :merge_requests_events,
+    :namespace,
+    :new_issue_url,
+    :notify,
+    :notify_only_broken_builds,
+    :notify_only_broken_pipelines,
+    :password,
+    :priority,
+    :project_key,
+    :project_url,
+    :recipients,
+    :restrict_to_branch,
+    :room,
+    :send_from_committer_email,
+    :server,
+    :server_host,
+    :server_port,
+    :sound,
+    :subdomain,
+    :teamcity_url,
+    :title,
+    :token,
+    :type,
+    :url,
+    :user_key,
+    :username,
+    :webhook
+  ]
 
   # Parameters to ignore if no value is specified
   FILTER_BLANK_PARAMS = [:password]
 
   def service_params
     dynamic_params = @service.event_channel_names + @service.event_names
-    service_params = params.permit(:id, service: ALLOWED_PARAMS + dynamic_params)
+    service_params = params.permit(:id, service: ALLOWED_PARAMS_CE + dynamic_params)
 
     if service_params[:service].is_a?(Hash)
       FILTER_BLANK_PARAMS.each do |param|

app/controllers/groups_controller.rb

@@ -125,7 +125,11 @@ class GroupsController < Groups::ApplicationController
   end
 
   def group_params
-    params.require(:group).permit(
+    params.require(:group).permit(group_params_ce)
+  end
+
+  def group_params_ce
+    [
       :avatar,
       :description,
       :lfs_enabled,
@@ -135,7 +139,7 @@ class GroupsController < Groups::ApplicationController
       :request_access_enabled,
       :share_with_group_lock,
       :visibility_level
-    )
+    ]
   end
 
   def load_events

app/controllers/projects/group_links_controller.rb

@@ -4,10 +4,7 @@ class Projects::GroupLinksController < Projects::ApplicationController
   before_action :authorize_admin_project_member!, only: [:update]
 
   def index
-    @group_links = project.project_group_links.all
-
-    @skip_groups = @group_links.pluck(:group_id)
-    @skip_groups << project.namespace_id unless project.personal?
+    redirect_to namespace_project_settings_members_path
   end
 
   def create
@@ -25,7 +22,7 @@ class Projects::GroupLinksController < Projects::ApplicationController
       flash[:alert] = 'Please select a group.'
     end
 
-    redirect_to namespace_project_group_links_path(project.namespace, project)
+    redirect_to namespace_project_settings_members_path(project.namespace, project)
   end
 
   def update
@@ -39,7 +36,7 @@ class Projects::GroupLinksController < Projects::ApplicationController
 
     respond_to do |format|
       format.html do
-        redirect_to namespace_project_group_links_path(project.namespace, project)
+        redirect_to namespace_project_settings_members_path(project.namespace, project)
       end
       format.js { head :ok }
     end

app/controllers/projects/merge_requests_controller.rb

@@ -409,10 +409,6 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     else
       ci_service = @merge_request.source_project.try(:ci_service)
       status = ci_service.commit_status(merge_request.diff_head_sha, merge_request.source_branch) if ci_service
-
-      if ci_service.respond_to?(:commit_coverage)
-        coverage = ci_service.commit_coverage(merge_request.diff_head_sha, merge_request.source_branch)
-      end
     end
 
     response = {

app/controllers/projects/pipelines_controller.rb

@@ -7,11 +7,33 @@ class Projects::PipelinesController < Projects::ApplicationController
 
   def index
     @scope = params[:scope]
-    @pipelines = PipelinesFinder.new(project).execute(scope: @scope).page(params[:page]).per(30)
-    @pipelines = @pipelines.includes(project: :namespace)
+    @pipelines = PipelinesFinder
+      .new(project)
+      .execute(scope: @scope)
+      .page(params[:page])
+      .per(30)
 
-    @running_or_pending_count = PipelinesFinder.new(project).execute(scope: 'running').count
-    @pipelines_count = PipelinesFinder.new(project).execute.count
+    @running_or_pending_count = PipelinesFinder
+      .new(project).execute(scope: 'running').count
+
+    @pipelines_count = PipelinesFinder
+      .new(project).execute.count
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          pipelines: PipelineSerializer
+            .new(project: @project, user: @current_user)
+            .with_pagination(request, response)
+            .represent(@pipelines),
+          count: {
+            all: @pipelines_count,
+            running_or_pending: @running_or_pending_count
+          }
+        }
+      end
+    end
   end
 
   def new

app/controllers/projects/project_members_controller.rb

@@ -6,54 +6,14 @@ class Projects::ProjectMembersController < Projects::ApplicationController
   before_action :authorize_admin_project_member!, except: [:index, :leave, :request_access]
 
   def index
-    @sort = params[:sort].presence || sort_value_name
-    @group_links = @project.project_group_links
-
-    @project_members = @project.project_members
-    @project_members = @project_members.non_invite unless can?(current_user, :admin_project, @project)
-
-    group = @project.group
-
-    if group
-      # We need `.where.not(user_id: nil)` here otherwise when a group has an
-      # invitee, it would make the following query return 0 rows since a NULL
-      # user_id would be present in the subquery
-      # See http://stackoverflow.com/questions/129077/not-in-clause-and-null-values
-      # FIXME: This whole logic should be moved to a finder!
-      non_null_user_ids = @project_members.where.not(user_id: nil).select(:user_id)
-      group_members = group.group_members.where.not(user_id: non_null_user_ids)
-      group_members = group_members.non_invite unless can?(current_user, :admin_group, @group)
-    end
-
-    if params[:search].present?
-      user_ids = @project.users.search(params[:search]).select(:id)
-      @project_members = @project_members.where(user_id: user_ids)
-
-      if group_members
-        user_ids = group.users.search(params[:search]).select(:id)
-        group_members = group_members.where(user_id: user_ids)
-      end
-
-      @group_links = @project.project_group_links.where(group_id: @project.invited_groups.search(params[:search]).select(:id))
-    end
-
-    wheres = ["members.id IN (#{@project_members.select(:id).to_sql})"]
-    wheres << "members.id IN (#{group_members.select(:id).to_sql})" if group_members
-
-    @project_members = Member.
-      where(wheres.join(' OR ')).
-      sort(@sort).
-      page(params[:page])
-
-    @requesters = AccessRequestsFinder.new(@project).execute(current_user)
-
-    @project_member = @project.project_members.new
+    sort = params[:sort].presence || sort_value_name
+    redirect_to namespace_project_settings_members_path(@project.namespace, @project, sort: sort)
   end
 
   def create
     status = Members::CreateService.new(@project, current_user, params).execute
 
-    redirect_url = namespace_project_project_members_path(@project.namespace, @project)
+    redirect_url = namespace_project_settings_members_path(@project.namespace, @project)
 
     if status
       redirect_to redirect_url, notice: 'Users were successfully added.'
@@ -76,14 +36,14 @@ class Projects::ProjectMembersController < Projects::ApplicationController
 
     respond_to do |format|
       format.html do
-        redirect_to namespace_project_project_members_path(@project.namespace, @project)
+        redirect_to namespace_project_settings_members_path(@project.namespace, @project)
       end
       format.js { head :ok }
     end
   end
 
   def resend_invite
-    redirect_path = namespace_project_project_members_path(@project.namespace, @project)
+    redirect_path = namespace_project_settings_members_path(@project.namespace, @project)
 
     @project_member = @project.project_members.find(params[:id])
 
@@ -106,7 +66,7 @@ class Projects::ProjectMembersController < Projects::ApplicationController
       return render_404
     end
 
-    redirect_to(namespace_project_project_members_path(project.namespace, project),
+    redirect_to(namespace_project_settings_members_path(project.namespace, project),
                 notice: notice)
   end
 

app/controllers/projects/settings/members_controller.rb

+module Projects
+  module Settings
+    class MembersController < Projects::ApplicationController
+      include SortingHelper
+
+      def show
+        @sort = params[:sort].presence || sort_value_name
+        @group_links = @project.project_group_links
+
+        @project_members = @project.project_members
+        @project_members = @project_members.non_invite unless can?(current_user, :admin_project, @project)
+
+        group = @project.group
+
+        # group links
+        @group_links = @project.project_group_links.all
+
+        @skip_groups = @group_links.pluck(:group_id)
+        @skip_groups << @project.namespace_id unless @project.personal?
+
+        if group
+          # We need `.where.not(user_id: nil)` here otherwise when a group has an
+          # invitee, it would make the following query return 0 rows since a NULL
+          # user_id would be present in the subquery
+          # See http://stackoverflow.com/questions/129077/not-in-clause-and-null-values
+          group_members = MembersFinder.new(@project_members, group).execute(current_user)
+        end
+
+        if params[:search].present?
+          user_ids = @project.users.search(params[:search]).select(:id)
+          @project_members = @project_members.where(user_id: user_ids)
+
+          if group_members
+            user_ids = group.users.search(params[:search]).select(:id)
+            group_members = group_members.where(user_id: user_ids)
+          end
+
+          @group_links = @project.project_group_links.where(group_id: @project.invited_groups.search(params[:search]).select(:id))
+        end
+
+        wheres = ["members.id IN (#{@project_members.select(:id).to_sql})"]
+        wheres << "members.id IN (#{group_members.select(:id).to_sql})" if group_members
+
+        @project_members = Member.
+          where(wheres.join(' OR ')).
+          sort(@sort).
+          page(params[:page])
+
+        @requesters = AccessRequestsFinder.new(@project).execute(current_user)
+
+        @project_member = @project.project_members.new
+      end
+    end
+  end
+end

app/finders/issuable_finder.rb

@@ -165,31 +165,53 @@ class IssuableFinder
       end
   end
 
-  def assignee?
-    params[:assignee_id].present?
+  def assignee_id?
+    params[:assignee_id].present? && params[:assignee_id] != NONE
+  end
+
+  def assignee_username?
+    params[:assignee_username].present? && params[:assignee_username] != NONE
+  end
+
+  def no_assignee?
+    # Assignee_id takes precedence over assignee_username
+    params[:assignee_id] == NONE || params[:assignee_username] == NONE
   end
 
   def assignee
     return @assignee if defined?(@assignee)
 
     @assignee =
-      if assignee? && params[:assignee_id] != NONE
-        User.find(params[:assignee_id])
+      if assignee_id?
+        User.find_by(id: params[:assignee_id])
+      elsif assignee_username?
+        User.find_by(username: params[:assignee_username])
       else
         nil
       end
   end
 
-  def author?
-    params[:author_id].present?
+  def author_id?
+    params[:author_id].present? && params[:author_id] != NONE
+  end
+
+  def author_username?
+    params[:author_username].present? && params[:author_username] != NONE
+  end
+
+  def no_author?
+    # author_id takes precedence over author_username
+    params[:author_id] == NONE || params[:author_username] == NONE
   end
 
   def author
     return @author if defined?(@author)
 
     @author =
-      if author? && params[:author_id] != NONE
-        User.find(params[:author_id])
+      if author_id?
+        User.find_by(id: params[:author_id])
+      elsif author_username?
+        User.find_by(username: params[:author_username])
       else
         nil
       end
@@ -263,16 +285,24 @@ class IssuableFinder
   end
 
   def by_assignee(items)
-    if assignee?
-      items = items.where(assignee_id: assignee.try(:id))
+    if assignee
+      items = items.where(assignee_id: assignee.id)
+    elsif no_assignee?
+      items = items.where(assignee_id: nil)
+    elsif assignee_id? || assignee_username? # assignee not found
+      items = items.none
     end
 
     items
   end
 
   def by_author(items)
-    if author?
-      items = items.where(author_id: author.try(:id))
+    if author
+      items = items.where(author_id: author.id)
+    elsif no_author?
+      items = items.where(author_id: nil)
+    elsif author_id? || author_username? # author not found
+      items = items.none
     end
 
     items

app/finders/members_finder.rb

+class MembersFinder < Projects::ApplicationController
+  def initialize(project_members, project_group)
+    @project_members = project_members
+    @project_group = project_group
+  end
+
+  def execute(current_user)
+    non_null_user_ids = @project_members.where.not(user_id: nil).select(:user_id)
+    group_members = @project_group.group_members.where.not(user_id: non_null_user_ids)
+    group_members = group_members.non_invite unless can?(current_user, :admin_group,  @project_group)
+    group_members
+  end
+end

app/helpers/application_helper.rb

@@ -244,7 +244,9 @@ module ApplicationHelper
       scope: params[:scope],
       milestone_title: params[:milestone_title],
       assignee_id: params[:assignee_id],
+      assignee_username: params[:assignee_username],
       author_id: params[:author_id],
+      author_username: params[:author_username],
       search: params[:search],
       label_name: params[:label_name]
     }

app/helpers/gitlab_routing_helper.rb

@@ -206,4 +206,9 @@ module GitlabRoutingHelper
       file_namespace_project_build_artifacts_path(*args)
     end
   end
+
+  # Settings
+  def project_settings_members_path(project, *args)
+    namespace_project_settings_members_path(project.namespace, project, *args)
+  end
 end

app/helpers/search_helper.rb

@@ -75,7 +75,7 @@ module SearchHelper
         { category: "Current Project", label: "Merge Requests", url: namespace_project_merge_requests_path(@project.namespace, @project) },
         { category: "Current Project", label: "Milestones",     url: namespace_project_milestones_path(@project.namespace, @project) },
         { category: "Current Project", label: "Snippets",       url: namespace_project_snippets_path(@project.namespace, @project) },
-        { category: "Current Project", label: "Members",        url: namespace_project_project_members_path(@project.namespace, @project) },
+        { category: "Current Project", label: "Members",        url: namespace_project_settings_members_path(@project.namespace, @project) },
         { category: "Current Project", label: "Wiki",           url: namespace_project_wikis_path(@project.namespace, @project) },
       ]
     else

app/models/application_setting.rb

@@ -68,6 +68,10 @@ class ApplicationSetting < ActiveRecord::Base
             presence: true,
             if: :koding_enabled
 
+  validates :plantuml_url,
+            presence: true,
+            if: :plantuml_enabled
+
   validates :max_attachment_size,
             presence: true,
             numericality: { only_integer: true, greater_than: 0 }
@@ -184,6 +188,8 @@ class ApplicationSetting < ActiveRecord::Base
       akismet_enabled: false,
       koding_enabled: false,
       koding_url: nil,
+      plantuml_enabled: false,
+      plantuml_url: nil,
       repository_checks_enabled: true,
       disabled_oauth_sign_in_sources: [],
       send_user_confirmation_email: false,

app/models/ci/pipeline.rb

@@ -142,7 +142,7 @@ module Ci
     end
 
     def artifacts
-      builds.latest.with_artifacts_not_expired
+      builds.latest.with_artifacts_not_expired.includes(project: [:namespace])
     end
 
     def project_id
@@ -191,7 +191,11 @@ module Ci
     end
 
     def manual_actions
-      builds.latest.manual_actions
+      builds.latest.manual_actions.includes(project: [:namespace])
+    end
+
+    def stuck?
+      builds.pending.any?(&:stuck?)
     end
 
     def retryable?
@@ -283,6 +287,10 @@ module Ci
       end
     end
 
+    def has_yaml_errors?
+      yaml_errors.present?
+    end
+
     def environments
       builds.where.not(environment: nil).success.pluck(:environment).uniq
     end

app/models/concerns/reactive_caching.rb

@@ -55,30 +55,30 @@ module ReactiveCaching
     self.reactive_cache_refresh_interval = 1.minute
     self.reactive_cache_lifetime = 10.minutes
 
-    def calculate_reactive_cache
+    def calculate_reactive_cache(*args)
       raise NotImplementedError
     end
 
-    def with_reactive_cache(&blk)
-      within_reactive_cache_lifetime do
-        data = Rails.cache.read(full_reactive_cache_key)
+    def with_reactive_cache(*args, &blk)
+      within_reactive_cache_lifetime(*args) do
+        data = Rails.cache.read(full_reactive_cache_key(*args))
         yield data if data.present?
       end
     ensure
-      Rails.cache.write(full_reactive_cache_key('alive'), true, expires_in: self.class.reactive_cache_lifetime)
-      ReactiveCachingWorker.perform_async(self.class, id)
+      Rails.cache.write(alive_reactive_cache_key(*args), true, expires_in: self.class.reactive_cache_lifetime)
+      ReactiveCachingWorker.perform_async(self.class, id, *args)
     end
 
-    def clear_reactive_cache!
-      Rails.cache.delete(full_reactive_cache_key)
+    def clear_reactive_cache!(*args)
+      Rails.cache.delete(full_reactive_cache_key(*args))
     end
 
-    def exclusively_update_reactive_cache!
-      locking_reactive_cache do
-        within_reactive_cache_lifetime do
-          enqueuing_update do
-            value = calculate_reactive_cache
-            Rails.cache.write(full_reactive_cache_key, value)
+    def exclusively_update_reactive_cache!(*args)
+      locking_reactive_cache(*args) do
+        within_reactive_cache_lifetime(*args) do
+          enqueuing_update(*args) do
+            value = calculate_reactive_cache(*args)
+            Rails.cache.write(full_reactive_cache_key(*args), value)
           end
         end
       end
@@ -93,22 +93,26 @@ module ReactiveCaching
       ([prefix].flatten + qualifiers).join(':')
     end
 
-    def locking_reactive_cache
-      lease = Gitlab::ExclusiveLease.new(full_reactive_cache_key, timeout: reactive_cache_lease_timeout)
+    def alive_reactive_cache_key(*qualifiers)
+      full_reactive_cache_key(*(qualifiers + ['alive']))
+    end
+
+    def locking_reactive_cache(*args)
+      lease = Gitlab::ExclusiveLease.new(full_reactive_cache_key(*args), timeout: reactive_cache_lease_timeout)
       uuid = lease.try_obtain
       yield if uuid
     ensure
-      Gitlab::ExclusiveLease.cancel(full_reactive_cache_key, uuid)
+      Gitlab::ExclusiveLease.cancel(full_reactive_cache_key(*args), uuid)
     end
 
-    def within_reactive_cache_lifetime
-      yield if Rails.cache.read(full_reactive_cache_key('alive'))
+    def within_reactive_cache_lifetime(*args)
+      yield if Rails.cache.read(alive_reactive_cache_key(*args))
     end
 
-    def enqueuing_update
+    def enqueuing_update(*args)
       yield
     ensure
-      ReactiveCachingWorker.perform_in(self.class.reactive_cache_refresh_interval, self.class, id)
+      ReactiveCachingWorker.perform_in(self.class.reactive_cache_refresh_interval, self.class, id, *args)
     end
   end
 end

app/models/concerns/reactive_service.rb

+module ReactiveService
+  extend ActiveSupport::Concern
+
+  included do
+    include ReactiveCaching
+
+    # Default cache key: class name + project_id
+    self.reactive_cache_key = ->(service) { [ service.class.model_name.singular, service.project_id ] }
+  end
+end