Merge branch 'master' into user-cohorts

.gitignore

@@ -31,6 +31,7 @@ eslint-report.html
 /config/unicorn.rb
 /config/secrets.yml
 /config/sidekiq.yml
+/config/registry.key
 /coverage/*
 /coverage-javascript/
 /db/*.sqlite3

.gitlab-ci.yml

@@ -9,14 +9,15 @@ variables:
   MYSQL_ALLOW_EMPTY_PASSWORD: "1"
   ELASTIC_URL: "http://elasticsearch:9200"
   RAILS_ENV: "test"
+  NODE_ENV: "test"
   SIMPLECOV: "true"
   SETUP_DB: "true"
   USE_BUNDLE_INSTALL: "true"
   GIT_DEPTH: "20"
   PHANTOMJS_VERSION: "2.1.1"
   GET_SOURCES_ATTEMPTS: "3"
-  KNAPSACK_RSPEC_SUITE_REPORT_PATH: knapsack/${CI_PROJECT_NAME}/rspec_report-${CI_COMMIT_REF_SLUG}.json
-  KNAPSACK_SPINACH_SUITE_REPORT_PATH: knapsack/${CI_PROJECT_NAME}/spinach_report-${CI_COMMIT_REF_SLUG}.json
+  KNAPSACK_RSPEC_SUITE_REPORT_PATH: knapsack/${CI_PROJECT_NAME}/rspec_report-master.json
+  KNAPSACK_SPINACH_SUITE_REPORT_PATH: knapsack/${CI_PROJECT_NAME}/spinach_report-master.json
   # This hack is needed to make ES not that memory hungry
   ES_JAVA_OPTS: "-Xms600m -Xmx600m"
 
@@ -134,9 +135,7 @@ setup-test-env:
   stage: prepare
   script:
     - node --version
-    - yarn --version
     - yarn install --pure-lockfile
-    - yarn check # ensure that yarn.lock matches package.json
     - bundle exec rake gitlab:assets:compile
     - bundle exec ruby -Ispec -e 'require "spec_helper" ; TestEnv.init'
   artifacts:
@@ -278,14 +277,31 @@ rake karma:
     paths:
     - coverage-javascript/
 
-lint-doc:
+docs:check:apilint:
+  image: "phusion/baseimage"
   stage: test
   <<: *dedicated-runner
-  image: "phusion/baseimage:latest"
+  cache: {}
+  dependencies: []
   before_script: []
   script:
     - scripts/lint-doc.sh
 
+docs:check:links:
+  image: "registry.gitlab.com/gitlab-org/gitlab-build-images:nanoc-bootstrap-ruby-2.4-alpine"
+  stage: test
+  <<: *dedicated-runner
+  cache: {}
+  dependencies: []
+  before_script: []
+  script:
+    - mv doc/ /nanoc/content/
+    - cd /nanoc
+    # Build HTML from Markdown
+    - bundle exec nanoc
+    # Check the internal links
+    - bundle exec nanoc check internal_links
+
 bundler:check:
   stage: test
   <<: *dedicated-runner

.rubocop.yml

@@ -535,6 +535,10 @@ Style/WhileUntilModifier:
 Style/WordArray:
   Enabled: true
 
+# Use `proc` instead of `Proc.new`.
+Style/Proc:
+  Enabled: true
+
 # Metrics #####################################################################
 
 # A calculated magnitude based on number of assignments,

.rubocop_todo.yml

@@ -226,12 +226,8 @@ Style/PredicateName:
 Style/PreferredHashMethods:
   Enabled: false
 
-# Offense count: 9
-# Cop supports --auto-correct.
-Style/Proc:
-  Enabled: false
 
-# Offense count: 64
+# Offense count: 62
 # Cop supports --auto-correct.
 # Configuration parameters: EnforcedStyle, SupportedStyles.
 # SupportedStyles: compact, exploded

CHANGELOG-EE.md

 Please view this file on the master branch, on stable branches it's out of date.
 
+## 9.0.4 (2017-04-05)
+
+- No changes.
+
+## 9.0.3 (2017-04-05)
+
+- Allow to edit pipelines quota for user.
+- Fixed label resetting when sorting by weight. (James Clark)
+- Fixed issue boards milestone toggle text not updating when filtering.
+- Fixed mirror user dropdown not displaying.
+
 ## 9.0.2 (2017-03-29)
 
 - No changes.
@@ -53,6 +64,10 @@ Please view this file on the master branch, on stable branches it's out of date.
 - [Elasticsearch] More efficient search.
 - Get Geo secondaries nodes statuses over AJAX.
 
+## 8.17.5 (2017-04-05)
+
+- No changes.
+
 ## 8.17.4 (2017-03-19)
 
 - Elastic security fix: Respect feature visibility level.
@@ -91,6 +106,10 @@ Please view this file on the master branch, on stable branches it's out of date.
 - Reduce queries needed to check if node is a primary or secondary Geo node.
 - Allow squashing merge requests into a single commit.
 
+## 8.16.9 (2017-04-05)
+
+- No changes.
+
 ## 8.16.8 (2017-03-19)
 
 - No changes.

CHANGELOG.md

@@ -2,6 +2,31 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
 
+## 9.0.4 (2017-04-05)
+
+- Don’t show source project name when user does not have access.
+- Remove the class attribute from the whitelist for HTML generated from Markdown.
+- Fix path disclosure in project import/export.
+- Fix for open redirect vulnerability using continue[to] in URL when requesting project import status.
+- Fix for open redirect vulnerabilities in todos, issues, and MR controllers.
+
+## 9.0.3 (2017-04-05)
+
+- Fix name colision when importing GitHub pull requests from forked repositories. !9719
+- Fix GitHub Importer for PRs of deleted forked repositories. !9992
+- Fix environment folder route when special chars present in environment name. !10250
+- Improve Markdown rendering when a lot of merge requests are referenced. !10252
+- Allow users to import GitHub projects to subgroups.
+- Backport API changes needed to fix sticking in EE.
+- Remove unnecessary ORDER BY clause from `forked_to_project_id` subquery. (mhasbini)
+- Make CI build to use optimistic locking only on status change.
+- Fix race condition where a namespace would be deleted before a project was deleted.
+- Fix linking to new issue with selected template via url parameter.
+- Remove unnecessary ORDER BY clause when updating todos. (mhasbini)
+- API: Make the /notes endpoint work with noteable iid instead of id.
+- Fixes method not replacing URL parameters correctly and breaking pipelines pagination.
+- Move issue, mr, todos next to profile dropdown in top nav.
+
 ## 9.0.2 (2017-03-29)
 
 - Correctly update paths when changing a child group.
@@ -303,6 +328,14 @@ entry.
 - Change development tanuki favicon colors to match logo color order.
 - API issues - support filtering by iids.
 
+## 8.17.5 (2017-04-05)
+
+- Don’t show source project name when user does not have access.
+- Remove the class attribute from the whitelist for HTML generated from Markdown.
+- Fix path disclosure in project import/export.
+- Fix for open redirect vulnerability using continue[to] in URL when requesting project import status.
+- Fix for open redirect vulnerabilities in todos, issues, and MR controllers.
+
 ## 8.17.4 (2017-03-19)
 
 - Only show public emails in atom feeds.
@@ -517,6 +550,14 @@ entry.
 - Remove deprecated GitlabCiService.
 - Requeue pending deletion projects.
 
+## 8.16.9 (2017-04-05)
+
+- Don’t show source project name when user does not have access.
+- Remove the class attribute from the whitelist for HTML generated from Markdown.
+- Fix path disclosure in project import/export.
+- Fix for open redirect vulnerability using continue[to] in URL when requesting project import status.
+- Fix for open redirect vulnerabilities in todos, issues, and MR controllers.
+
 ## 8.16.8 (2017-03-19)
 
 - Only show public emails in atom feeds.

CONTRIBUTING.md

@@ -13,30 +13,32 @@ _This notice should stay as the first item in the CONTRIBUTING.MD file._
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 
-- [Contributor license agreement](#contributor-license-agreement)
 - [Contribute to GitLab](#contribute-to-gitlab)
 - [Security vulnerability disclosure](#security-vulnerability-disclosure)
 - [Closing policy for issues and merge requests](#closing-policy-for-issues-and-merge-requests)
 - [Helping others](#helping-others)
 - [I want to contribute!](#i-want-to-contribute)
-- [Implement design & UI elements](#implement-design-ui-elements)
+- [Workflow labels](#workflow-labels)
+- [Implement design & UI elements](#implement-design--ui-elements)
 - [Release retrospective and kickoff](#release-retrospective-and-kickoff)
-    - [Retrospective](#retrospective)
-    - [Kickoff](#kickoff)
+  - [Retrospective](#retrospective)
+  - [Kickoff](#kickoff)
 - [Issue tracker](#issue-tracker)
-    - [Feature proposals](#feature-proposals)
-    - [Issue tracker guidelines](#issue-tracker-guidelines)
-    - [Issue weight](#issue-weight)
-    - [Regression issues](#regression-issues)
-    - [Technical debt](#technical-debt)
-    - [Stewardship](#stewardship)
+  - [Feature proposals](#feature-proposals)
+  - [Issue tracker guidelines](#issue-tracker-guidelines)
+  - [Issue weight](#issue-weight)
+  - [Regression issues](#regression-issues)
+  - [Technical debt](#technical-debt)
+  - [Stewardship](#stewardship)
 - [Merge requests](#merge-requests)
-    - [Merge request guidelines](#merge-request-guidelines)
-    - [Contribution acceptance criteria](#contribution-acceptance-criteria)
+  - [Merge request guidelines](#merge-request-guidelines)
+  - [Getting your merge request reviewed, approved, and merged](#getting-your-merge-request-reviewed-approved-and-merged)
+  - [Contribution acceptance criteria](#contribution-acceptance-criteria)
 - [Changes for Stable Releases](#changes-for-stable-releases)
 - [Definition of done](#definition-of-done)
 - [Style guides](#style-guides)
 - [Code of conduct](#code-of-conduct)
+- [Contribution Flow](#contribution-flow)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -314,9 +316,12 @@ request is as follows:
   organized commits by [squashing them][git-squash]
 1. Push the commit(s) to your fork
 1. Submit a merge request (MR) to the `master` branch
-1. Leave the approvals settings as they are:
-  1. Your merge request needs at least 1 approval
-  1. You don't have to select any approvers
+  1. Your merge request needs at least 1 approval but feel free to require more.
+    For instance if you're touching backend and frontend code, it's a good idea
+    to require 2 approvals: 1 from a backend maintainer and 1 from a frontend
+    maintainer
+  1. You don't have to select any approvers, but you can if you really want
+    specific people to approve your merge request
 1. The MR title should describe the change you want to make
 1. The MR description should give a motive for your change and the method you
    used to achieve it.
@@ -376,7 +381,7 @@ There are a few rules to get your merge request accepted:
   1. If your merge request includes only frontend changes [^1], it must be
     **approved by a [frontend maintainer][team]**.
   1. If your merge request includes frontend and backend changes [^1], it must
-    be approved by a frontend **and** a backend maintainer.
+    be **approved by a [frontend and a backend maintainer][team]**.
 1. To lower the amount of merge requests maintainers need to review, you can
   ask or assign any [reviewers][team] for a first review.
   1. If you need some guidance (e.g. it's your first merge request), feel free
@@ -526,6 +531,24 @@ reported by emailing `contact@gitlab.com`.
 This Code of Conduct is adapted from the [Contributor Covenant][contributor-covenant], version 1.1.0,
 available at [http://contributor-covenant.org/version/1/1/0/](http://contributor-covenant.org/version/1/1/0/).
 
+## Contribution Flow
+
+When contributing to GitLab, your merge request is subject to review by merge request maintainers of a particular specialty.
+
+When you submit code to GitLab, we really want it to get merged, but there will be times when it will not be merged.
+
+When maintainers are reading through a merge request they may request guidance from other maintainers. If merge request maintainers conclude that the code should not be merged, our reasons will be fully disclosed. If it has been decided that the code quality is not up to GitLab’s standards, the merge request maintainer will refer the author to our docs and code style guides, and provide some guidance.
+
+Sometimes style guides will be followed but the code will lack structural integrity, or the maintainer will have reservations about the code’s overall quality. When there is a reservation the maintainer will inform the author and provide some guidance.  The author may then choose to update the merge request. Once the merge request has been updated and reassigned to the maintainer, they will review the code again. Once the code has been resubmitted any number of times, the maintainer may choose to close the merge request with a summary of why it will not be merged, as well as some guidance. If the merge request is closed the maintainer will be open to discussion as to how to improve the code so it can be approved in the future.
+
+GitLab will do its best to review community contributions as quickly as possible. Specially appointed developers review community contributions daily. You may take a look at the [team page](https://about.gitlab.com/team/) for the merge request coach who specializes in the type of code you have written and mention them in the merge request.  For example, if you have written some JavaScript in your code then you should mention the frontend merge request coach. If your code has multiple disciplines you may mention multiple merge request coaches.
+
+GitLab receives a lot of community contributions, so if your code has not been reviewed within 4 days of its initial submission feel free to re-mention the appropriate merge request coach.
+
+When submitting code to GitLab, you may feel that your contribution requires the aid of an external library. If your code includes an external library please provide a link to the library, as well as reasons for including it.
+
+When your code contains more than 500 changes, any major breaking changes, or an external library, `@mention` a maintainer in the merge request. If you are not sure who to mention, the reviewer will add one early in the merge request process.
+
 [core team]: https://about.gitlab.com/core-team/
 [team]: https://about.gitlab.com/team/
 [getting-help]: https://about.gitlab.com/getting-help/
@@ -556,6 +579,5 @@ available at [http://contributor-covenant.org/version/1/1/0/](http://contributor
 [GitLab Inc engineering workflow]: https://about.gitlab.com/handbook/engineering/workflow/#labelling-issues
 [polling-etag]: https://docs.gitlab.com/ce/development/polling.html
 
-[^1]: Specs other than JavaScript specs are considered backend code. Haml
-      changes are considered backend code if they include Ruby code other than just
-      pure HTML.
+[^1]: Please note that specs other than JavaScript specs are considered backend
+      code.

GITALY_SERVER_VERSION

-0.4.0
+0.5.0

GITLAB_WORKHORSE_VERSION

-1.4.2
+1.4.3

Gemfile

@@ -15,7 +15,7 @@ gem 'default_value_for', '~> 3.0.0'
 gem 'mysql2', '~> 0.3.16', group: :mysql
 gem 'pg', '~> 0.18.2', group: :postgres
 
-gem 'rugged', '~> 0.24.0'
+gem 'rugged', '~> 0.25.1.1'
 
 # Authentication libraries
 gem 'devise', '~> 4.2'
@@ -65,7 +65,7 @@ gem 'net-ldap'
 # Git Wiki
 # Required manually in config/initializers/gollum.rb to control load order
 gem 'gollum-lib', '~> 4.2', require: false
-gem 'gollum-rugged_adapter', '~> 0.4.2', require: false
+gem 'gollum-rugged_adapter', '~> 0.4.4', require: false
 
 # Language detection
 gem 'github-linguist', '~> 4.7.0', require: 'linguist'
@@ -233,7 +233,7 @@ gem 'oj', '~> 2.17.4'
 gem 'chronic', '~> 0.10.2'
 gem 'chronic_duration', '~> 0.10.6'
 
-gem 'webpack-rails', '~> 0.9.9'
+gem 'webpack-rails', '~> 0.9.10'
 gem 'rack-proxy', '~> 0.6.0'
 
 gem 'sass-rails', '~> 5.0.6'
@@ -271,7 +271,6 @@ group :development do
   gem 'brakeman', '~> 3.6.0', require: false
 
   gem 'letter_opener_web', '~> 1.3.0'
-  gem 'bullet', '~> 5.5.0', require: false
   gem 'rblineprof', '~> 0.3.6', platform: :mri, require: false
 
   # Better errors handler
@@ -283,6 +282,7 @@ group :development do
 end
 
 group :development, :test do
+  gem 'bullet', '~> 5.5.0', require: !!ENV['ENABLE_BULLET']
   gem 'pry-byebug', '~> 3.4.1', platform: :mri
   gem 'pry-rails', '~> 0.3.4'
 
@@ -363,4 +363,4 @@ gem 'vmstat', '~> 2.3.0'
 gem 'sys-filesystem', '~> 1.1.6'
 
 # Gitaly GRPC client
-gem 'gitaly', '~> 0.3.0'
+gem 'gitaly', '~> 0.5.0'

Gemfile.lock

@@ -277,7 +277,7 @@ GEM
       json
     get_process_mem (0.2.0)
     gherkin-ruby (0.3.2)
-    gitaly (0.3.0)
+    gitaly (0.5.0)
       google-protobuf (~> 3.1)
       grpc (~> 1.0)
     github-linguist (4.7.6)
@@ -321,9 +321,9 @@ GEM
       rouge (~> 2.0)
       sanitize (~> 2.1.0)
       stringex (~> 2.5.1)
-    gollum-rugged_adapter (0.4.2)
+    gollum-rugged_adapter (0.4.4)
       mime-types (>= 1.15)
-      rugged (~> 0.24.0, >= 0.21.3)
+      rugged (~> 0.25)
     gon (6.1.0)
       actionpack (>= 3.0)
       json
@@ -718,7 +718,7 @@ GEM
     rubypants (0.2.0)
     rubyzip (1.2.1)
     rufus-scheduler (3.1.10)
-    rugged (0.24.0)
+    rugged (0.25.1.1)
     safe_yaml (1.0.4)
     sanitize (2.1.0)
       nokogiri (>= 1.4.4)
@@ -859,8 +859,8 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff
-    webpack-rails (0.9.9)
-      rails (>= 3.2.0)
+    webpack-rails (0.9.10)
+      railties (>= 3.2.0)
     websocket-driver (0.6.3)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.2)
@@ -940,7 +940,7 @@ DEPENDENCIES
   fuubar (~> 2.0.0)
   gemnasium-gitlab-service (~> 0.2)
   gemojione (~> 3.0)
-  gitaly (~> 0.3.0)
+  gitaly (~> 0.5.0)
   github-linguist (~> 4.7.0)
   gitlab-elasticsearch-git (= 1.1.1)
   gitlab-flowdock-git-hook (~> 1.0.1)
@@ -948,7 +948,7 @@ DEPENDENCIES
   gitlab-markup (~> 1.5.1)
   gitlab_omniauth-ldap (~> 1.2.1)
   gollum-lib (~> 4.2)
-  gollum-rugged_adapter (~> 0.4.2)
+  gollum-rugged_adapter (~> 0.4.4)
   gon (~> 6.1.0)
   google-api-client (~> 0.8.6)
   grape (~> 0.19.0)
@@ -1032,7 +1032,7 @@ DEPENDENCIES
   rubocop-rspec (~> 1.12.0)
   ruby-fogbugz (~> 0.2.1)
   ruby-prof (~> 0.16.2)
-  rugged (~> 0.24.0)
+  rugged (~> 0.25.1.1)
   sanitize (~> 2.0)
   sass-rails (~> 5.0.6)
   scss_lint (~> 0.47.0)
@@ -1071,7 +1071,7 @@ DEPENDENCIES
   virtus (~> 1.0.1)
   vmstat (~> 2.3.0)
   webmock (~> 1.24.0)
-  webpack-rails (~> 0.9.9)
+  webpack-rails (~> 0.9.10)
   wikicloth (= 0.8.1)
 
 BUNDLED WITH

VERSION

-8.18.0-ee-pre
+9.1.0-pre

app/assets/javascripts/awards_handler.js

@@ -476,10 +476,10 @@ AwardsHandler.prototype.setupSearch = function setupSearch() {
   this.registerEventListener('on', $('input.emoji-search'), 'input', (e) => {
     const term = $(e.target).val().trim();
     // Clean previous search results
-    $('ul.emoji-menu-search, h5.emoji-search').remove();
+    $('ul.emoji-menu-search, h5.emoji-search-title').remove();
     if (term.length > 0) {
       // Generate a search result block
-      const h5 = $('<h5 class="emoji-search" />').text('Search results');
+      const h5 = $('<h5 class="emoji-search-title"/>').text('Search results');
       const foundEmojis = this.searchEmojis(term).show();
       const ul = $('<ul>').addClass('emoji-menu-list emoji-menu-search').append(foundEmojis);
       $('.emoji-menu-content ul, .emoji-menu-content h5').hide();

app/assets/javascripts/behaviors/gl_emoji/is_emoji_unicode_supported.js

-import spreadString from './spread_string';
-
 // On Windows, flags render as two-letter country codes, see http://emojipedia.org/flags/
 const flagACodePoint = 127462; // parseInt('1F1E6', 16)
 const flagZCodePoint = 127487; // parseInt('1F1FF', 16)
@@ -20,7 +18,7 @@ function isKeycapEmoji(emojiUnicode) {
 const tone1 = 127995;// parseInt('1F3FB', 16)
 const tone5 = 127999;// parseInt('1F3FF', 16)
 function isSkinToneComboEmoji(emojiUnicode) {
-  return emojiUnicode.length > 2 && spreadString(emojiUnicode).some((char) => {
+  return emojiUnicode.length > 2 && Array.from(emojiUnicode).some((char) => {
     const cp = char.codePointAt(0);
     return cp >= tone1 && cp <= tone5;
   });
@@ -30,7 +28,7 @@ function isSkinToneComboEmoji(emojiUnicode) {
 // doesn't support the skin tone versions of horse racing
 const horseRacingCodePoint = 127943;// parseInt('1F3C7', 16)
 function isHorceRacingSkinToneComboEmoji(emojiUnicode) {
-  return spreadString(emojiUnicode)[0].codePointAt(0) === horseRacingCodePoint &&
+  return Array.from(emojiUnicode)[0].codePointAt(0) === horseRacingCodePoint &&
     isSkinToneComboEmoji(emojiUnicode);
 }
 
@@ -42,7 +40,7 @@ const personEndCodePoint = 128105; // parseInt('1F469', 16)
 function isPersonZwjEmoji(emojiUnicode) {
   let hasPersonEmoji = false;
   let hasZwj = false;
-  spreadString(emojiUnicode).forEach((character) => {
+  Array.from(emojiUnicode).forEach((character) => {
     const cp = character.codePointAt(0);
     if (cp === zwj) {
       hasZwj = true;

app/assets/javascripts/behaviors/gl_emoji/spread_string.js

-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt#Fixing_charCodeAt()_to_handle_non-Basic-Multilingual-Plane_characters_if_their_presence_earlier_in_the_string_is_known
-function knownCharCodeAt(givenString, index) {
-  const str = `${givenString}`;
-  const end = str.length;
-
-  const surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
-  let idx = index;
-  while ((surrogatePairs.exec(str)) != null) {
-    const li = surrogatePairs.lastIndex;
-    if (li - 2 < idx) {
-      idx += 1;
-    } else {
-      break;
-    }
-  }
-
-  if (idx >= end || idx < 0) {
-    return NaN;
-  }
-
-  const code = str.charCodeAt(idx);
-
-  let high;
-  let low;
-  if (code >= 0xD800 && code <= 0xDBFF) {
-    high = code;
-    low = str.charCodeAt(idx + 1);
-    // Go one further, since one of the "characters" is part of a surrogate pair
-    return ((high - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
-  }
-  return code;
-}
-
-// See http://stackoverflow.com/a/38901550/796832
-// ES5/PhantomJS compatible version of spreading a string
-//
-// [...'foo'] -> ['f', 'o', 'o']
-// [...'🖐🏿'] -> ['🖐', '🏿']
-function spreadString(str) {
-  const arr = [];
-  let i = 0;
-  while (!isNaN(knownCharCodeAt(str, i))) {
-    const codePoint = knownCharCodeAt(str, i);
-    arr.push(String.fromCodePoint(codePoint));
-    i += 1;
-  }
-  return arr;
-}
-
-export default spreadString;

app/assets/javascripts/behaviors/toggler_behavior.js

@@ -18,7 +18,7 @@
     // Button does not change visibility. If button has icon - it changes chevron style.
     //
     // %div.js-toggle-container
-    //   %a.js-toggle-button
+    //   %button.js-toggle-button
     //   %div.js-toggle-content
     //
     $('body').on('click', '.js-toggle-button', function(e) {

app/assets/javascripts/blob/3d_viewer/index.js

+import * as THREE from 'three/build/three.module';
+import STLLoaderClass from 'three-stl-loader';
+import OrbitControlsClass from 'three-orbit-controls';
+import MeshObject from './mesh_object';
+
+const STLLoader = STLLoaderClass(THREE);
+const OrbitControls = OrbitControlsClass(THREE);
+
+export default class Renderer {
+  constructor(container) {
+    this.renderWrapper = this.render.bind(this);
+    this.objects = [];
+
+    this.container = container;
+    this.width = this.container.offsetWidth;
+    this.height = 500;
+
+    this.loader = new STLLoader();
+
+    this.fov = 45;
+    this.camera = new THREE.PerspectiveCamera(
+      this.fov,
+      this.width / this.height,
+      1,
+      1000,
+    );
+
+    this.scene = new THREE.Scene();
+
+    this.scene.add(this.camera);
+
+    // Setup the viewer
+    this.setupRenderer();
+    this.setupGrid();
+    this.setupLight();
+
+    // Setup OrbitControls
+    this.controls = new OrbitControls(
+      this.camera,
+      this.renderer.domElement,
+    );
+    this.controls.minDistance = 5;
+    this.controls.maxDistance = 30;
+    this.controls.enableKeys = false;
+
+    this.loadFile();
+  }
+
+  setupRenderer() {
+    this.renderer = new THREE.WebGLRenderer({
+      antialias: true,
+    });
+
+    this.renderer.setClearColor(0xFFFFFF);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.setSize(
+      this.width,
+      this.height,
+    );
+  }
+
+  setupLight() {
+    // Point light illuminates the object
+    const pointLight = new THREE.PointLight(
+      0xFFFFFF,
+      2,
+      0,
+    );
+
+    pointLight.castShadow = true;
+
+    this.camera.add(pointLight);
+
+    // Ambient light illuminates the scene
+    const ambientLight = new THREE.AmbientLight(
+      0xFFFFFF,
+      1,
+    );
+    this.scene.add(ambientLight);
+  }
+
+  setupGrid() {
+    this.grid = new THREE.GridHelper(
+      20,
+      20,
+      0x000000,
+      0x000000,
+    );
+
+    this.scene.add(this.grid);
+  }
+
+  loadFile() {
+    this.loader.load(this.container.dataset.endpoint, (geo) => {
+      const obj = new MeshObject(geo);
+
+      this.objects.push(obj);
+      this.scene.add(obj);
+
+      this.start();
+      this.setDefaultCameraPosition();
+    });
+  }
+
+  start() {
+    // Empty the container first
+    this.container.innerHTML = '';
+
+    // Add to DOM
+    this.container.appendChild(this.renderer.domElement);
+
+    // Make controls visible
+    this.container.parentNode.classList.remove('is-stl-loading');
+
+    this.render();
+  }
+
+  render() {
+    this.renderer.render(
+      this.scene,
+      this.camera,
+    );
+
+    requestAnimationFrame(this.renderWrapper);
+  }
+
+  changeObjectMaterials(type) {
+    this.objects.forEach((obj) => {
+      obj.changeMaterial(type);
+    });
+  }
+
+  setDefaultCameraPosition() {
+    const obj = this.objects[0];
+    const radius = (obj.geometry.boundingSphere.radius / 1.5);
+    const dist = radius / (Math.sin((this.fov * (Math.PI / 180)) / 2));
+
+    this.camera.position.set(
+      0,
+      dist + 1,
+      dist,
+    );
+
+    this.camera.lookAt(this.grid);
+    this.controls.update();
+  }
+}

app/assets/javascripts/blob/3d_viewer/mesh_object.js

+import {
+  Matrix4,
+  MeshLambertMaterial,
+  Mesh,
+} from 'three/build/three.module';
+
+const defaultColor = 0xE24329;
+const materials = {
+  default: new MeshLambertMaterial({
+    color: defaultColor,
+  }),
+  wireframe: new MeshLambertMaterial({
+    color: defaultColor,
+    wireframe: true,
+  }),
+};
+
+export default class MeshObject extends Mesh {
+  constructor(geo) {
+    super(
+      geo,
+      materials.default,
+    );
+
+    this.geometry.computeBoundingSphere();
+
+    this.rotation.set(-Math.PI / 2, 0, 0);
+
+    if (this.geometry.boundingSphere.radius > 4) {
+      const scale = 4 / this.geometry.boundingSphere.radius;
+
+      this.geometry.applyMatrix(
+        new Matrix4().makeScale(
+          scale,
+          scale,
+          scale,
+        ),
+      );
+      this.geometry.computeBoundingSphere();
+
+      this.position.x = -this.geometry.boundingSphere.center.x;
+      this.position.z = this.geometry.boundingSphere.center.y;
+    }
+  }
+
+  changeMaterial(type) {
+    this.material = materials[type];
+  }
+}

app/assets/javascripts/blob/blob_fork_suggestion.js

+function BlobForkSuggestion(openButton, cancelButton, suggestionSection) {
+  if (openButton) {
+    openButton.addEventListener('click', () => {
+      suggestionSection.classList.remove('hidden');
+    });
+  }
+
+  if (cancelButton) {
+    cancelButton.addEventListener('click', () => {
+      suggestionSection.classList.add('hidden');
+    });
+  }
+}
+
+export default BlobForkSuggestion;

app/assets/javascripts/blob/file_template_mediator.js

+/* eslint-disable class-methods-use-this */
+/* global Flash */
+
+import FileTemplateTypeSelector from './template_selectors/type_selector';
+import BlobCiYamlSelector from './template_selectors/ci_yaml_selector';
+import DockerfileSelector from './template_selectors/dockerfile_selector';
+import GitignoreSelector from './template_selectors/gitignore_selector';
+import LicenseSelector from './template_selectors/license_selector';
+
+export default class FileTemplateMediator {
+  constructor({ editor, currentAction }) {
+    this.editor = editor;
+    this.currentAction = currentAction;
+
+    this.initTemplateSelectors();
+    this.initTemplateTypeSelector();
+    this.initDomElements();
+    this.initDropdowns();
+    this.initPageEvents();
+  }
+
+  initTemplateSelectors() {
+    // Order dictates template type dropdown item order
+    this.templateSelectors = [
+      GitignoreSelector,
+      BlobCiYamlSelector,
+      DockerfileSelector,
+      LicenseSelector,
+    ].map(TemplateSelectorClass => new TemplateSelectorClass({ mediator: this }));
+  }
+
+  initTemplateTypeSelector() {
+    this.typeSelector = new FileTemplateTypeSelector({
+      mediator: this,
+      dropdownData: this.templateSelectors
+        .map((templateSelector) => {
+          const cfg = templateSelector.config;
+
+          return {
+            name: cfg.name,
+            key: cfg.key,
+          };
+        }),
+    });
+  }
+
+  initDomElements() {
+    const $templatesMenu = $('.template-selectors-menu');
+    const $undoMenu = $templatesMenu.find('.template-selectors-undo-menu');
+    const $fileEditor = $('.file-editor');
+
+    this.$templatesMenu = $templatesMenu;
+    this.$undoMenu = $undoMenu;
+    this.$undoBtn = $undoMenu.find('button');
+    this.$templateSelectors = $templatesMenu.find('.template-selector-dropdowns-wrap');
+    this.$filenameInput = $fileEditor.find('.js-file-path-name-input');
+    this.$fileContent = $fileEditor.find('#file-content');
+    this.$commitForm = $fileEditor.find('form');
+    this.$navLinks = $fileEditor.find('.nav-links');
+  }
+
+  initDropdowns() {
+    if (this.currentAction === 'create') {
+      this.typeSelector.show();
+    } else {
+      this.hideTemplateSelectorMenu();
+    }
+
+    this.displayMatchedTemplateSelector();
+  }
+
+  initPageEvents() {
+    this.listenForFilenameInput();
+    this.prepFileContentForSubmit();
+    this.listenForPreviewMode();
+  }
+
+  listenForFilenameInput() {
+    this.$filenameInput.on('keyup blur', () => {
+      this.displayMatchedTemplateSelector();
+    });
+  }
+
+  prepFileContentForSubmit() {
+    this.$commitForm.submit(() => {
+      this.$fileContent.val(this.editor.getValue());
+    });
+  }
+
+  listenForPreviewMode() {
+    this.$navLinks.on('click', 'a', (e) => {
+      const urlPieces = e.target.href.split('#');
+      const hash = urlPieces[1];
+      if (hash === 'preview') {
+        this.hideTemplateSelectorMenu();
+      } else if (hash === 'editor') {
+        this.showTemplateSelectorMenu();
+      }
+    });
+  }
+
+  selectTemplateType(item, el, e) {
+    if (e) {
+      e.preventDefault();
+    }
+
+    this.templateSelectors.forEach((selector) => {
+      if (selector.config.key === item.key) {
+        selector.show();
+      } else {
+        selector.hide();
+      }
+    });
+
+    this.typeSelector.setToggleText(item.name);
+
+    this.cacheToggleText();
+  }
+
+  selectTemplateFile(selector, query, data) {
+    selector.renderLoading();
+    // in case undo menu is already already there
+    this.destroyUndoMenu();
+    this.fetchFileTemplate(selector.config.endpoint, query, data)
+      .then((file) => {
+        this.showUndoMenu();
+        this.setEditorContent(file);
+        this.setFilename(selector.config.name);
+        selector.renderLoaded();
+      })
+      .catch(err => new Flash(`An error occurred while fetching the template: ${err}`));
+  }
+
+  displayMatchedTemplateSelector() {
+    const currentInput = this.getFilename();
+    this.templateSelectors.forEach((selector) => {
+      const match = selector.config.pattern.test(currentInput);
+
+      if (match) {
+        this.typeSelector.show();
+        this.selectTemplateType(selector.config);
+        this.showTemplateSelectorMenu();
+      }
+    });
+  }
+
+  fetchFileTemplate(apiCall, query, data) {
+    return new Promise((resolve) => {
+      const resolveFile = file => resolve(file);
+
+      if (!data) {
+        apiCall(query, resolveFile);
+      } else {
+        apiCall(query, data, resolveFile);
+      }
+    });
+  }
+
+  setEditorContent(file) {
+    if (!file && file !== '') return;
+
+    const newValue = file.content || file;
+
+    this.editor.setValue(newValue, 1);
+
+    this.editor.focus();
+
+    this.editor.navigateFileStart();
+  }
+
+  findTemplateSelectorByKey(key) {
+    return this.templateSelectors.find(selector => selector.config.key === key);
+  }
+
+  showUndoMenu() {
+    this.$undoMenu.removeClass('hidden');
+
+    this.$undoBtn.on('click', () => {
+      this.restoreFromCache();
+      this.destroyUndoMenu();
+    });
+  }
+
+  destroyUndoMenu() {
+    this.cacheFileContents();
+    this.cacheToggleText();
+    this.$undoMenu.addClass('hidden');
+    this.$undoBtn.off('click');
+  }
+
+  hideTemplateSelectorMenu() {
+    this.$templatesMenu.hide();
+  }
+
+  showTemplateSelectorMenu() {
+    this.$templatesMenu.show();
+  }
+
+  cacheToggleText() {
+    this.cachedToggleText = this.getTemplateSelectorToggleText();
+  }
+
+  cacheFileContents() {
+    this.cachedContent = this.editor.getValue();
+    this.cachedFilename = this.getFilename();
+  }
+
+  restoreFromCache() {
+    this.setEditorContent(this.cachedContent);
+    this.setFilename(this.cachedFilename);
+    this.setTemplateSelectorToggleText();
+  }
+
+  getTemplateSelectorToggleText() {
+    return this.$templateSelectors
+      .find('.js-template-selector-wrap:visible .dropdown-toggle-text')
+      .text();
+  }
+
+  setTemplateSelectorToggleText() {
+    return this.$templateSelectors
+      .find('.js-template-selector-wrap:visible .dropdown-toggle-text')
+      .text(this.cachedToggleText);
+  }
+
+  getTypeSelectorToggleText() {
+    return this.typeSelector.getToggleText();
+  }
+
+  getFilename() {
+    return this.$filenameInput.val();
+  }
+
+  setFilename(name) {
+    this.$filenameInput.val(name);
+  }
+
+  getSelected() {
+    return this.templateSelectors.find(selector => selector.selected);
+  }
+}

app/assets/javascripts/blob/file_template_selector.js

+/* global Api */
+
+export default class FileTemplateSelector {
+  constructor(mediator) {
+    this.mediator = mediator;
+    this.$dropdown = null;
+    this.$wrapper = null;
+  }
+
+  init() {
+    const cfg = this.config;
+
+    this.$dropdown = $(cfg.dropdown);
+    this.$wrapper = $(cfg.wrapper);
+    this.$loadingIcon = this.$wrapper.find('.fa-chevron-down');
+    this.$dropdownToggleText = this.$wrapper.find('.dropdown-toggle-text');
+
+    this.initDropdown();
+  }
+
+  show() {
+    if (this.$dropdown === null) {
+      this.init();
+    }
+
+    this.$wrapper.removeClass('hidden');
+  }
+
+  hide() {
+    if (this.$dropdown !== null) {
+      this.$wrapper.addClass('hidden');
+    }
+  }
+
+  getToggleText() {
+    return this.$dropdownToggleText.text();
+  }
+
+  setToggleText(text) {
+    this.$dropdownToggleText.text(text);
+  }
+
+  renderLoading() {
+    this.$loadingIcon
+      .addClass('fa-spinner fa-spin')
+      .removeClass('fa-chevron-down');
+  }
+
+  renderLoaded() {
+    this.$loadingIcon
+      .addClass('fa-chevron-down')
+      .removeClass('fa-spinner fa-spin');
+  }
+
+  reportSelection(query, el, e, data) {
+    e.preventDefault();
+    return this.mediator.selectTemplateFile(this, query, data);
+  }
+}
+

app/assets/javascripts/blob/notebook/index.js

+/* eslint-disable no-new */
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import NotebookLab from 'vendor/notebooklab';
+
+Vue.use(VueResource);
+Vue.use(NotebookLab);
+
+export default () => {
+  const el = document.getElementById('js-notebook-viewer');
+
+  new Vue({
+    el,
+    data() {
+      return {
+        error: false,
+        loadError: false,
+        loading: true,
+        json: {},
+      };
+    },
+    template: `
+      <div class="container-fluid md prepend-top-default append-bottom-default">
+        <div
+          class="text-center loading"
+          v-if="loading && !error">
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true"
+            aria-label="iPython notebook loading">
+          </i>
+        </div>
+        <notebook-lab
+          v-if="!loading && !error"
+          :notebook="json"
+          code-css-class="code white" />
+        <p
+          class="text-center"
+          v-if="error">
+          <span v-if="loadError">
+            An error occured whilst loading the file. Please try again later.
+          </span>
+          <span v-else>
+            An error occured whilst parsing the file.
+          </span>
+        </p>
+      </div>
+    `,
+    methods: {
+      loadFile() {
+        this.$http.get(el.dataset.endpoint)
+          .then((res) => {
+            this.json = res.json();
+            this.loading = false;
+          })
+          .catch((e) => {
+            if (e.status) {
+              this.loadError = true;
+            }
+
+            this.error = true;
+          });
+      },
+    },
+    mounted() {
+      if (gon.katex_css_url) {
+        const katexStyles = document.createElement('link');
+        katexStyles.setAttribute('rel', 'stylesheet');
+        katexStyles.setAttribute('href', gon.katex_css_url);
+        document.head.appendChild(katexStyles);
+      }
+
+      if (gon.katex_js_url) {
+        const katexScript = document.createElement('script');
+        katexScript.addEventListener('load', () => {
+          this.loadFile();
+        });
+        katexScript.setAttribute('src', gon.katex_js_url);
+        document.head.appendChild(katexScript);
+      } else {
+        this.loadFile();
+      }
+    },
+  });
+};

app/assets/javascripts/blob/notebook_viewer.js

+import renderNotebook from './notebook';
+
+document.addEventListener('DOMContentLoaded', renderNotebook);

app/assets/javascripts/blob/pdf/index.js

+/* eslint-disable no-new */
+import Vue from 'vue';
+import PDFLab from 'vendor/pdflab';
+import workerSrc from 'vendor/pdf.worker';
+
+Vue.use(PDFLab, {
+  workerSrc,
+});
+
+export default () => {
+  const el = document.getElementById('js-pdf-viewer');
+
+  return new Vue({
+    el,
+    data() {
+      return {
+        error: false,
+        loadError: false,
+        loading: true,
+        pdf: el.dataset.endpoint,
+      };
+    },
+    methods: {
+      onLoad() {
+        this.loading = false;
+      },
+      onError(error) {
+        this.loading = false;
+        this.loadError = true;
+        this.error = error;
+      },
+    },
+    template: `
+      <div class="container-fluid md prepend-top-default append-bottom-default">
+        <div
+          class="text-center loading"
+          v-if="loading && !error">
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true"
+            aria-label="PDF loading">
+          </i>
+        </div>
+        <pdf-lab
+          v-if="!loadError"
+          :pdf="pdf"
+          @pdflabload="onLoad"
+          @pdflaberror="onError" />
+        <p
+          class="text-center"
+          v-if="error">
+          <span v-if="loadError">
+            An error occured whilst loading the file. Please try again later.
+          </span>
+          <span v-else>
+            An error occured whilst decoding the file.
+          </span>
+        </p>
+      </div>
+    `,
+  });
+};

app/assets/javascripts/blob/pdf_viewer.js

+import renderPDF from './pdf';
+
+document.addEventListener('DOMContentLoaded', renderPDF);

app/assets/javascripts/blob/sketch/index.js

+import JSZip from 'jszip';
+import JSZipUtils from 'jszip-utils';
+
+export default class SketchLoader {
+  constructor(container) {
+    this.container = container;
+    this.loadingIcon = this.container.querySelector('.js-loading-icon');
+
+    this.load();
+  }
+
+  load() {
+    return this.getZipFile()
+      .then(data => JSZip.loadAsync(data))
+      .then(asyncResult => asyncResult.files['previews/preview.png'].async('uint8array'))
+      .then((content) => {
+        const url = window.URL || window.webkitURL;
+        const blob = new Blob([new Uint8Array(content)], {
+          type: 'image/png',
+        });
+        const previewUrl = url.createObjectURL(blob);
+
+        this.render(previewUrl);
+      })
+      .catch(this.error.bind(this));
+  }
+
+  getZipFile() {
+    return new JSZip.external.Promise((resolve, reject) => {
+      JSZipUtils.getBinaryContent(this.container.dataset.endpoint, (err, data) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(data);
+        }
+      });
+    });
+  }
+
+  render(previewUrl) {
+    const previewLink = document.createElement('a');
+    const previewImage = document.createElement('img');
+
+    previewLink.href = previewUrl;
+    previewLink.target = '_blank';
+    previewImage.src = previewUrl;
+    previewImage.className = 'img-responsive';
+
+    previewLink.appendChild(previewImage);
+    this.container.appendChild(previewLink);
+
+    this.removeLoadingIcon();
+  }
+
+  error() {
+    const errorMsg = document.createElement('p');
+
+    errorMsg.className = 'prepend-top-default append-bottom-default text-center';
+    errorMsg.textContent = `
+      Cannot show preview. For previews on sketch files, they must have the file format
+      introduced by Sketch version 43 and above.
+    `;
+    this.container.appendChild(errorMsg);
+
+    this.removeLoadingIcon();
+  }
+
+  removeLoadingIcon() {
+    if (this.loadingIcon) {
+      this.loadingIcon.remove();
+    }
+  }
+}

app/assets/javascripts/blob/sketch_viewer.js

+/* eslint-disable no-new */
+import SketchLoader from './sketch';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('js-sketch-viewer');
+
+  new SketchLoader(el);
+});

app/assets/javascripts/blob/stl_viewer.js

+import Renderer from './3d_viewer';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const viewer = new Renderer(document.getElementById('js-stl-viewer'));
+
+  [].slice.call(document.querySelectorAll('.js-material-changer')).forEach((el) => {
+    el.addEventListener('click', (e) => {
+      const target = e.target;
+
+      e.preventDefault();
+
+      document.querySelector('.js-material-changer.active').classList.remove('active');
+      target.classList.add('active');
+      target.blur();
+
+      viewer.changeObjectMaterials(target.dataset.type);
+    });
+  });
+});

app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selector.js

-/* global Api */
-
-import TemplateSelector from './template_selector';
-
-export default class BlobCiYamlSelector extends TemplateSelector {
-  requestFile(query) {
-    return Api.gitlabCiYml(query.name, (file, config) => this.setEditorContent(file, config));
-  }
-}

app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selectors.js

-/* global Api */
-
-import BlobCiYamlSelector from './blob_ci_yaml_selector';
-
-export default class BlobCiYamlSelectors {
-  constructor({ editor, $dropdowns }) {
-    this.$dropdowns = $dropdowns || $('.js-gitlab-ci-yml-selector');
-    this.initSelectors(editor);
-  }
-
-  initSelectors(editor) {
-    this.$dropdowns.each((i, dropdown) => {
-      const $dropdown = $(dropdown);
-      return new BlobCiYamlSelector({
-        editor,
-        pattern: /(.gitlab-ci.yml)/,
-        data: $dropdown.data('data'),
-        wrapper: $dropdown.closest('.js-gitlab-ci-yml-selector-wrap'),
-        dropdown: $dropdown,
-      });
-    });
-  }
-}

app/assets/javascripts/blob/template_selectors/blob_dockerfile_selector.js

-/* global Api */
-
-import TemplateSelector from './template_selector';
-
-export default class BlobDockerfileSelector extends TemplateSelector {
-  requestFile(query) {
-    return Api.dockerfileYml(query.name, (file, config) => this.setEditorContent(file, config));
-  }
-}

app/assets/javascripts/blob/template_selectors/blob_dockerfile_selectors.js

-import BlobDockerfileSelector from './blob_dockerfile_selector';
-
-export default class BlobDockerfileSelectors {
-  constructor({ editor, $dropdowns }) {
-    this.editor = editor;
-    this.$dropdowns = $dropdowns || $('.js-dockerfile-selector');
-    this.initSelectors();
-  }
-
-  initSelectors() {
-    const editor = this.editor;
-    this.$dropdowns.each((i, dropdown) => {
-      const $dropdown = $(dropdown);
-      return new BlobDockerfileSelector({
-        editor,
-        pattern: /(Dockerfile)/,
-        data: $dropdown.data('data'),
-        wrapper: $dropdown.closest('.js-dockerfile-selector-wrap'),
-        dropdown: $dropdown,
-      });
-    });
-  }
-}

app/assets/javascripts/blob/template_selectors/blob_gitignore_selector.js

-/* global Api */
-
-import TemplateSelector from './template_selector';
-
-export default class BlobGitignoreSelector extends TemplateSelector {
-  requestFile(query) {
-    return Api.gitignoreText(query.name, (file, config) => this.setEditorContent(file, config));
-  }
-}

app/assets/javascripts/blob/template_selectors/blob_gitignore_selectors.js

-import BlobGitignoreSelector from './blob_gitignore_selector';
-
-export default class BlobGitignoreSelectors {
-  constructor({ editor, $dropdowns }) {
-    this.$dropdowns = $dropdowns || $('.js-gitignore-selector');
-    this.editor = editor;
-    this.initSelectors();
-  }
-
-  initSelectors() {
-    this.$dropdowns.each((i, dropdown) => {
-      const $dropdown = $(dropdown);
-
-      return new BlobGitignoreSelector({
-        pattern: /(.gitignore)/,
-        data: $dropdown.data('data'),
-        wrapper: $dropdown.closest('.js-gitignore-selector-wrap'),
-        dropdown: $dropdown,
-        editor: this.editor,
-      });
-    });
-  }
-}

app/assets/javascripts/blob/template_selectors/blob_license_selector.js

-/* global Api */
-
-import TemplateSelector from './template_selector';
-
-export default class BlobLicenseSelector extends TemplateSelector {
-  requestFile(query) {
-    const data = {
-      project: this.dropdown.data('project'),
-      fullname: this.dropdown.data('fullname'),
-    };
-    return Api.licenseText(query.id, data, (file, config) => this.setEditorContent(file, config));
-  }
-}

app/assets/javascripts/blob/template_selectors/blob_license_selectors.js

-/* eslint-disable no-unused-vars, no-param-reassign */
-
-import BlobLicenseSelector from './blob_license_selector';
-
-export default class BlobLicenseSelectors {
-  constructor({ $dropdowns, editor }) {
-    this.$dropdowns = $dropdowns || $('.js-license-selector');
-    this.initSelectors(editor);
-  }
-
-  initSelectors(editor) {
-    this.$dropdowns.each((i, dropdown) => {
-      const $dropdown = $(dropdown);
-
-      return new BlobLicenseSelector({
-        editor,
-        pattern: /^(.+\/)?(licen[sc]e|copying)($|\.)/i,
-        data: $dropdown.data('data'),
-        wrapper: $dropdown.closest('.js-license-selector-wrap'),
-        dropdown: $dropdown,
-      });
-    });
-  }
-}

app/assets/javascripts/blob/template_selectors/ci_yaml_selector.js

+/* global Api */
+
+import FileTemplateSelector from '../file_template_selector';
+
+export default class BlobCiYamlSelector extends FileTemplateSelector {
+  constructor({ mediator }) {
+    super(mediator);
+    this.config = {
+      key: 'gitlab-ci-yaml',
+      name: '.gitlab-ci.yml',
+      pattern: /(.gitlab-ci.yml)/,
+      endpoint: Api.gitlabCiYml,
+      dropdown: '.js-gitlab-ci-yml-selector',
+      wrapper: '.js-gitlab-ci-yml-selector-wrap',
+    };
+  }
+
+  initDropdown() {
+    // maybe move to super class as well
+    this.$dropdown.glDropdown({
+      data: this.$dropdown.data('data'),
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: (query, el, e) => this.reportSelection(query.name, el, e),
+      text: item => item.name,
+    });
+  }
+}

app/assets/javascripts/blob/template_selectors/dockerfile_selector.js

+/* global Api */
+
+import FileTemplateSelector from '../file_template_selector';
+
+export default class DockerfileSelector extends FileTemplateSelector {
+  constructor({ mediator }) {
+    super(mediator);
+    this.config = {
+      key: 'dockerfile',
+      name: 'Dockerfile',
+      pattern: /(Dockerfile)/,
+      endpoint: Api.dockerfileYml,
+      dropdown: '.js-dockerfile-selector',
+      wrapper: '.js-dockerfile-selector-wrap',
+    };
+  }
+
+  initDropdown() {
+    // maybe move to super class as well
+    this.$dropdown.glDropdown({
+      data: this.$dropdown.data('data'),
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: (query, el, e) => this.reportSelection(query.name, el, e),
+      text: item => item.name,
+    });
+  }
+}

app/assets/javascripts/blob/template_selectors/gitignore_selector.js

+/* global Api */
+
+import FileTemplateSelector from '../file_template_selector';
+
+export default class BlobGitignoreSelector extends FileTemplateSelector {
+  constructor({ mediator }) {
+    super(mediator);
+    this.config = {
+      key: 'gitignore',
+      name: '.gitignore',
+      pattern: /(.gitignore)/,
+      endpoint: Api.gitignoreText,
+      dropdown: '.js-gitignore-selector',
+      wrapper: '.js-gitignore-selector-wrap',
+    };
+  }
+
+  initDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.$dropdown.data('data'),
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: (query, el, e) => this.reportSelection(query.name, el, e),
+      text: item => item.name,
+    });
+  }
+}

app/assets/javascripts/blob/template_selectors/license_selector.js

+/* global Api */
+
+import FileTemplateSelector from '../file_template_selector';
+
+export default class BlobLicenseSelector extends FileTemplateSelector {
+  constructor({ mediator }) {
+    super(mediator);
+    this.config = {
+      key: 'license',
+      name: 'LICENSE',
+      pattern: /^(.+\/)?(licen[sc]e|copying)($|\.)/i,
+      endpoint: Api.licenseText,
+      dropdown: '.js-license-selector',
+      wrapper: '.js-license-selector-wrap',
+    };
+  }
+
+  initDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.$dropdown.data('data'),
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: (query, el, e) => {
+        const data = {
+          project: this.$dropdown.data('project'),
+          fullname: this.$dropdown.data('fullname'),
+        };
+
+        this.reportSelection(query.id, el, e, data);
+      },
+      text: item => item.name,
+    });
+  }
+}

app/assets/javascripts/blob/template_selectors/type_selector.js

+import FileTemplateSelector from '../file_template_selector';
+
+export default class FileTemplateTypeSelector extends FileTemplateSelector {
+  constructor({ mediator, dropdownData }) {
+    super(mediator);
+    this.mediator = mediator;
+    this.config = {
+      dropdown: '.js-template-type-selector',
+      wrapper: '.js-template-type-selector-wrap',
+      dropdownData,
+    };
+  }
+
+  initDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.config.dropdownData,
+      filterable: false,
+      selectable: true,
+      toggleLabel: item => item.name,
+      clicked: (item, el, e) => this.mediator.selectTemplateType(item, el, e),
+      text: item => item.name,
+    });
+  }
+
+}

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -13,8 +13,9 @@ $(() => {
     const urlRoot = editBlobForm.data('relative-url-root');
     const assetsPath = editBlobForm.data('assets-prefix');
     const blobLanguage = editBlobForm.data('blob-language');
+    const currentAction = $('.js-file-title').data('current-action');
 
-    new EditBlob(`${urlRoot}${assetsPath}`, blobLanguage);
+    new EditBlob(`${urlRoot}${assetsPath}`, blobLanguage, currentAction);
     new NewCommitForm(editBlobForm);
   }
 

app/assets/javascripts/blob_edit/edit_blob.js

 /* global ace */
 
-import BlobLicenseSelectors from '../blob/template_selectors/blob_license_selectors';
-import BlobGitignoreSelectors from '../blob/template_selectors/blob_gitignore_selectors';
-import BlobCiYamlSelectors from '../blob/template_selectors/blob_ci_yaml_selectors';
-import BlobDockerfileSelectors from '../blob/template_selectors/blob_dockerfile_selectors';
+import TemplateSelectorMediator from '../blob/file_template_mediator';
 
 export default class EditBlob {
-  constructor(assetsPath, aceMode) {
+  constructor(assetsPath, aceMode, currentAction) {
     this.configureAceEditor(aceMode, assetsPath);
-    this.prepFileContentForSubmit();
     this.initModePanesAndLinks();
     this.initSoftWrap();
-    this.initFileSelectors();
+    this.initFileSelectors(currentAction);
   }
 
   configureAceEditor(aceMode, assetsPath) {
@@ -19,6 +15,10 @@ export default class EditBlob {
     ace.config.loadModule('ace/ext/searchbox');
 
     this.editor = ace.edit('editor');
+
+    // This prevents warnings re: automatic scrolling being logged
+    this.editor.$blockScrolling = Infinity;
+
     this.editor.focus();
 
     if (aceMode) {
@@ -26,29 +26,13 @@ export default class EditBlob {
     }
   }
 
-  prepFileContentForSubmit() {
-    $('form').submit(() => {
-      $('#file-content').val(this.editor.getValue());
+  initFileSelectors(currentAction) {
+    this.fileTemplateMediator = new TemplateSelectorMediator({
+      currentAction,
+      editor: this.editor,
     });
   }
 
-  initFileSelectors() {
-    this.blobTemplateSelectors = [
-      new BlobLicenseSelectors({
-        editor: this.editor,
-      }),
-      new BlobGitignoreSelectors({
-        editor: this.editor,
-      }),
-      new BlobCiYamlSelectors({
-        editor: this.editor,
-      }),
-      new BlobDockerfileSelectors({
-        editor: this.editor,
-      }),
-    ];
-  }
-
   initModePanesAndLinks() {
     this.$editModePanes = $('.js-edit-mode-pane');
     this.$editModeLinks = $('.js-edit-mode a');

app/assets/javascripts/boards/boards_bundle.js

@@ -78,6 +78,7 @@ $(() => {
       }
 
       gl.boardService = new BoardService(this.endpoint, this.bulkUpdatePath, this.boardId);
+      Store.rootPath = this.endpoint;
 
       this.filterManager = new FilteredSearchBoards(Store.filter, true, [(this.milestoneTitle ? 'milestone' : null)]);
 

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

 /* eslint-disable comma-dangle, space-before-function-paren, one-var */
 /* global Sortable */
-
 import Vue from 'vue';
+import boardList from './board_list';
 import boardBlankState from './board_blank_state';
 
 require('./board_delete');
@@ -16,7 +16,7 @@ require('./board_list');
   gl.issueBoards.Board = Vue.extend({
     template: '#js-board-template',
     components: {
-      'board-list': gl.issueBoards.BoardList,
+      boardList,
       'board-delete': gl.issueBoards.BoardDelete,
       boardBlankState,
     },

app/assets/javascripts/boards/components/board_card.js

@@ -50,9 +50,7 @@ export default {
       this.showDetail = false;
     },
     showIssue(e) {
-      const targetTagName = e.target.tagName.toLowerCase();
-
-      if (targetTagName === 'a' || targetTagName === 'button') return;
+      if (e.target.classList.contains('js-no-trigger')) return;
 
       if (this.showDetail) {
         this.showDetail = false;

app/assets/javascripts/boards/components/board_list.js

-/* eslint-disable comma-dangle, space-before-function-paren, max-len */
 /* global Sortable */
-
-import Vue from 'vue';
 import boardNewIssue from './board_new_issue';
 import boardCard from './board_card';
+import eventHub from '../eventhub';
 
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
+const Store = gl.issueBoards.BoardsStore;
 
-  gl.issueBoards.BoardList = Vue.extend({
-    template: '#js-board-list-template',
-    components: {
-      boardCard,
-      boardNewIssue,
+export default {
+  name: 'BoardList',
+  props: {
+    disabled: {
+      type: Boolean,
+      required: true,
     },
-    props: {
-      disabled: Boolean,
-      list: Object,
-      issues: Array,
-      loading: Boolean,
-      issueLinkBase: String,
-      rootPath: String,
+    list: {
+      type: Object,
+      required: true,
     },
-    data () {
-      return {
-        scrollOffset: 250,
-        filters: Store.state.filters,
-        showCount: false,
-        showIssueForm: false
-      };
+    issues: {
+      type: Array,
+      required: true,
     },
-    watch: {
-      filters: {
-        handler () {
-          this.list.loadingMore = false;
-          this.$refs.list.scrollTop = 0;
-        },
-        deep: true
-      },
-      issues () {
-        this.$nextTick(() => {
-          if (this.scrollHeight() <= this.listHeight() && this.list.issuesSize > this.list.issues.length) {
-            this.list.page += 1;
-            this.list.getIssues(false);
-          }
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+    issueLinkBase: {
+      type: String,
+      required: true,
+    },
+    rootPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      scrollOffset: 250,
+      filters: Store.state.filters,
+      showCount: false,
+      showIssueForm: false,
+    };
+  },
+  components: {
+    boardCard,
+    boardNewIssue,
+  },
+  methods: {
+    listHeight() {
+      return this.$refs.list.getBoundingClientRect().height;
+    },
+    scrollHeight() {
+      return this.$refs.list.scrollHeight;
+    },
+    scrollTop() {
+      return this.$refs.list.scrollTop + this.listHeight();
+    },
+    loadNextPage() {
+      const getIssues = this.list.nextPage();
 
-          if (this.scrollHeight() > Math.ceil(this.listHeight())) {
-            this.showCount = true;
-          } else {
-            this.showCount = false;
-          }
+      if (getIssues) {
+        this.list.loadingMore = true;
+        getIssues.then(() => {
+          this.list.loadingMore = false;
         });
       }
     },
-    methods: {
-      listHeight () {
-        return this.$refs.list.getBoundingClientRect().height;
-      },
-      scrollHeight () {
-        return this.$refs.list.scrollHeight;
-      },
-      scrollTop () {
-        return this.$refs.list.scrollTop + this.listHeight();
+    toggleForm() {
+      this.showIssueForm = !this.showIssueForm;
+    },
+    onScroll() {
+      if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.list.loadingMore) {
+        this.loadNextPage();
+      }
+    },
+  },
+  watch: {
+    filters: {
+      handler() {
+        this.list.loadingMore = false;
+        this.$refs.list.scrollTop = 0;
       },
-      loadNextPage () {
-        const getIssues = this.list.nextPage();
+      deep: true,
+    },
+    issues() {
+      this.$nextTick(() => {
+        if (this.scrollHeight() <= this.listHeight() &&
+          this.list.issuesSize > this.list.issues.length) {
+          this.list.page += 1;
+          this.list.getIssues(false);
+        }
 
-        if (getIssues) {
-          this.list.loadingMore = true;
-          getIssues.then(() => {
-            this.list.loadingMore = false;
-          });
+        if (this.scrollHeight() > Math.ceil(this.listHeight())) {
+          this.showCount = true;
+        } else {
+          this.showCount = false;
         }
-      },
-      toggleForm() {
-        this.showIssueForm = !this.showIssueForm;
-      },
-    },
-    created() {
-      gl.IssueBoardsApp.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
+      });
     },
-    mounted () {
-      const options = gl.issueBoards.getBoardSortableDefaultOptions({
-        scroll: document.querySelectorAll('.boards-list')[0],
-        group: 'issues',
-        disabled: this.disabled,
-        filter: '.board-list-count, .is-disabled',
-        dataIdAttr: 'data-issue-id',
-        onStart: (e) => {
-          const card = this.$refs.issue[e.oldIndex];
+  },
+  created() {
+    eventHub.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
+  },
+  mounted() {
+    const options = gl.issueBoards.getBoardSortableDefaultOptions({
+      scroll: document.querySelectorAll('.boards-list')[0],
+      group: 'issues',
+      disabled: this.disabled,
+      filter: '.board-list-count, .is-disabled',
+      dataIdAttr: 'data-issue-id',
+      onStart: (e) => {
+        const card = this.$refs.issue[e.oldIndex];
 
-          card.showDetail = false;
-          Store.moving.list = card.list;
-          Store.moving.issue = Store.moving.list.findIssue(+e.item.dataset.issueId);
+        card.showDetail = false;
+        Store.moving.list = card.list;
+        Store.moving.issue = Store.moving.list.findIssue(+e.item.dataset.issueId);
 
-          gl.issueBoards.onStart();
-        },
-        onAdd: (e) => {
-          gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue, e.newIndex);
+        gl.issueBoards.onStart();
+      },
+      onAdd: (e) => {
+        gl.issueBoards.BoardsStore
+          .moveIssueToList(Store.moving.list, this.list, Store.moving.issue, e.newIndex);
 
-          this.$nextTick(() => {
-            e.item.remove();
-          });
-        },
-        onUpdate: (e) => {
-          const sortedArray = this.sortable.toArray().filter(id => id !== '-1');
-          gl.issueBoards.BoardsStore.moveIssueInList(this.list, Store.moving.issue, e.oldIndex, e.newIndex, sortedArray);
-        },
-        onMove(e) {
-          return !e.related.classList.contains('board-list-count');
-        }
-      });
+        this.$nextTick(() => {
+          e.item.remove();
+        });
+      },
+      onUpdate: (e) => {
+        const sortedArray = this.sortable.toArray().filter(id => id !== '-1');
+        gl.issueBoards.BoardsStore
+          .moveIssueInList(this.list, Store.moving.issue, e.oldIndex, e.newIndex, sortedArray);
+      },
+      onMove(e) {
+        return !e.related.classList.contains('board-list-count');
+      },
+    });
 
-      this.sortable = Sortable.create(this.$refs.list, options);
+    this.sortable = Sortable.create(this.$refs.list, options);
 
-      // Scroll event on list to load more
-      this.$refs.list.onscroll = () => {
-        if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.list.loadingMore) {
-          this.loadNextPage();
-        }
-      };
-    },
-    beforeDestroy() {
-      gl.IssueBoardsApp.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
-    },
-  });
-})();
+    // Scroll event on list to load more
+    this.$refs.list.addEventListener('scroll', this.onScroll);
+  },
+  beforeDestroy() {
+    eventHub.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
+    this.$refs.list.removeEventListener('scroll', this.onScroll);
+  },
+  template: `
+    <div class="board-list-component">
+      <div
+        class="board-list-loading text-center"
+        aria-label="Loading issues"
+        v-if="loading">
+        <i
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true">
+        </i>
+      </div>
+      <board-new-issue
+        :list="list"
+        v-if="list.type !== 'closed' && showIssueForm"/>
+      <ul
+        class="board-list"
+        v-show="!loading"
+        ref="list"
+        :data-board="list.id"
+        :class="{ 'is-smaller': showIssueForm }">
+        <board-card
+          v-for="(issue, index) in issues"
+          ref="issue"
+          :index="index"
+          :list="list"
+          :issue="issue"
+          :issue-link-base="issueLinkBase"
+          :root-path="rootPath"
+          :disabled="disabled"
+          :key="issue.id" />
+        <li
+          class="board-list-count text-center"
+          v-if="showCount"
+          data-id="-1">
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-label="Loading more issues"
+            aria-hidden="true"
+            v-show="list.loadingMore">
+          </i>
+          <span v-if="list.issues.length === list.issuesSize">
+            Showing all issues
+          </span>
+          <span v-else>
+            Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
+          </span>
+        </li>
+      </ul>
+    </div>
+  `,
+};

app/assets/javascripts/boards/components/board_new_form.js

@@ -81,7 +81,7 @@ const extraMilestones = require('../mixins/extra_milestones');
       },
       submit() {
         gl.boardService.createBoard(this.board)
-          .then(() => {
+          .then((resp) => {
             if (this.currentBoard && this.currentPage !== 'new') {
               this.currentBoard.name = this.board.name;
 
@@ -89,14 +89,17 @@ const extraMilestones = require('../mixins/extra_milestones');
                 // We reload the page to make sure the store & state of the app are correct
                 this.refreshPage();
               }
-            }
 
-            // Enable the button thanks to our jQuery disabling it
-            $(this.$refs.submitBtn).enable();
+              // Enable the button thanks to our jQuery disabling it
+              $(this.$refs.submitBtn).enable();
 
-            // Reset the selectors current page
-            Store.state.currentPage = '';
-            Store.state.reload = true;
+              // Reset the selectors current page
+              Store.state.currentPage = '';
+              Store.state.reload = true;
+            } else if (this.currentPage === 'new') {
+              const data = resp.json();
+              gl.utils.visitUrl(`${Store.rootPath}/${data.id}`);
+            }
           });
       },
       cancel() {

app/assets/javascripts/boards/components/board_new_issue.js

 /* global ListIssue */
+import eventHub from '../eventhub';
+
 const Store = gl.issueBoards.BoardsStore;
 
 export default {
@@ -53,7 +55,7 @@ export default {
     },
     cancel() {
       this.title = '';
-      gl.IssueBoardsApp.$emit(`hide-issue-form-${this.list.id}`);
+      eventHub.$emit(`hide-issue-form-${this.list.id}`);
     },
   },
   mounted() {

app/assets/javascripts/boards/components/boards_selector.js

@@ -57,8 +57,10 @@ require('./board_new_form');
         return this.boards.length > 1;
       },
       title() {
-        if (this.currentPage === 'edit' || this.currentPage === 'milestone') {
-          return 'Edit board';
+        if (this.currentPage === 'edit') {
+          return 'Edit board name';
+        } else if (this.currentPage === 'milestone') {
+          return 'Edit board milestone';
         } else if (this.currentPage === 'new') {
           return 'Create new board';
         } else if (this.currentPage === 'delete') {

app/assets/javascripts/boards/components/issue_card_inner.js

@@ -84,20 +84,20 @@ import eventHub from '../eventhub';
             #{{ issue.id }}
           </span>
           <a
-            class="card-assignee has-tooltip"
+            class="card-assignee has-tooltip js-no-trigger"
             :href="rootPath + issue.assignee.username"
             :title="'Assigned to ' + issue.assignee.name"
             v-if="issue.assignee"
             data-container="body">
             <img
-              class="avatar avatar-inline s20"
+              class="avatar avatar-inline s20 js-no-trigger"
               :src="issue.assignee.avatar"
               width="20"
               height="20"
               :alt="'Avatar for ' + issue.assignee.name" />
           </a>
           <button
-            class="label color-label has-tooltip"
+            class="label color-label has-tooltip js-no-trigger"
             v-for="label in issue.labels"
             type="button"
             v-if="showLabel(label)"

app/assets/javascripts/build.js

@@ -88,6 +88,7 @@ window.Build = (function() {
       dataType: 'json',
       success: function(buildData) {
         $('.js-build-output').html(buildData.trace_html);
+        gl.utils.setCiStatusFavicon(`${this.pageUrl}/status.json`);
         if (window.location.hash === DOWN_BUILD_TRACE) {
           $("html,body").scrollTop(this.$buildTrace.height());
         }

app/assets/javascripts/burndown_chart/index.js

+import Cookies from 'js-cookie';
+import BurndownChart from './burndown_chart';
+
+$(() => {
+  // handle hint dismissal
+  const hint = $('.burndown-hint');
+  hint.on('click', '.dismiss-icon', () => {
+    hint.hide();
+    Cookies.set('hide_burndown_message', 'true');
+  });
+
+  // generate burndown chart (if data available)
+  const container = '.burndown-chart';
+  const $chartElm = $(container);
+
+  if ($chartElm.length) {
+    const startDate = $chartElm.data('startDate');
+    const dueDate = $chartElm.data('dueDate');
+    const chartData = $chartElm.data('chartData');
+    const openIssuesCount = chartData.map(d => [d[0], d[1]]);
+    const openIssuesWeight = chartData.map(d => [d[0], d[2]]);
+
+    const chart = new BurndownChart({ container, startDate, dueDate });
+
+    let currentView = 'count';
+    chart.setData(openIssuesCount, { label: 'Open issues', animate: true });
+
+    $('.js-burndown-data-selector').on('click', 'button', function switchData() {
+      const $this = $(this);
+      const show = $this.data('show');
+      if (currentView !== show) {
+        currentView = show;
+        $this.addClass('active').siblings().removeClass('active');
+        switch (show) {
+          case 'count':
+            chart.setData(openIssuesCount, { label: 'Open issues', animate: true });
+            break;
+          case 'weight':
+            chart.setData(openIssuesWeight, { label: 'Open issue weight', animate: true });
+            break;
+          default:
+            break;
+        }
+      }
+    });
+
+    window.addEventListener('resize', () => chart.animateResize(1));
+    $(document).on('click', '.js-sidebar-toggle', () => chart.animateResize(2));
+  }
+});

app/assets/javascripts/commit/pipelines/pipelines_table.js

@@ -33,12 +33,11 @@ export default Vue.component('pipelines-table', {
    * @return {Object}
    */
   data() {
-    const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
     const store = new PipelineStore();
 
     return {
-      endpoint: pipelinesTableData.endpoint,
-      helpPagePath: pipelinesTableData.helpPagePath,
+      endpoint: null,
+      helpPagePath: null,
       store,
       state: store.state,
       isLoading: false,
@@ -65,6 +64,8 @@ export default Vue.component('pipelines-table', {
    *
    */
   beforeMount() {
+    this.endpoint = this.$el.dataset.endpoint;
+    this.helpPagePath = this.$el.dataset.helpPagePath;
     this.service = new PipelinesService(this.endpoint);
 
     this.fetchPipelines();

app/assets/javascripts/copy_to_clipboard.js

 /* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, prefer-arrow-callback, max-len */
 
-import Clipboard from 'vendor/clipboard';
+import Clipboard from 'clipboard';
 
 var genericError, genericSuccess, showTooltip;
 

app/assets/javascripts/dispatcher.js

@@ -45,9 +45,12 @@ import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
 import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
 import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
+import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
+import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
 
 import GeoNodes from './geo_nodes';
+import ServiceDeskRoot from './projects/settings_service_desk/service_desk_root';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 
@@ -90,6 +93,12 @@ const ShortcutsBlob = require('./shortcuts_blob');
           skipResetBindings: true,
           fileBlobPermalinkUrl,
         });
+
+        new BlobForkSuggestion(
+          document.querySelector('.js-edit-blob-link-fork-toggler'),
+          document.querySelector('.js-cancel-fork-suggestion'),
+          document.querySelector('.js-file-fork-suggestion-section'),
+        );
       }
 
       switch (page) {
@@ -221,6 +230,13 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:activity':
           shortcut_handler = new ShortcutsNavigation();
           break;
+        case 'projects:edit':
+          const el = document.querySelector('.js-service-desk-setting-root');
+          if (el) {
+            const serviceDeskRoot = new ServiceDeskRoot(el);
+            serviceDeskRoot.init();
+          }
+          break;
         case 'projects:show':
           shortcut_handler = new ShortcutsNavigation();
           new NotificationsForm();
@@ -231,9 +247,11 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:pipelines:builds':
         case 'projects:pipelines:show':
           const { controllerAction } = document.querySelector('.js-pipeline-container').dataset;
+          const pipelineStatusUrl = `${document.querySelector('.js-pipeline-tab-link a').getAttribute('href')}/status.json`;
 
           new gl.Pipelines({
             initTabs: true,
+            pipelineStatusUrl,
             tabsOptions: {
               action: controllerAction,
               defaultAction: 'pipelines',
@@ -333,8 +351,13 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new AdminEmailSelect();
           break;
         case 'projects:repository:show':
+          // Initialize Protected Branch Settings
           new gl.ProtectedBranchCreate();
           new gl.ProtectedBranchEditList();
+          new UsersSelect();
+          // Initialize Protected Tag Settings
+          new ProtectedTagCreate();
+          new ProtectedTagEditList();
           break;
         case 'projects:ci_cd:show':
           new gl.ProjectVariables();

app/assets/javascripts/environments/components/deploy_board_component.js

-/* eslint-disable no-new */
+/* eslint-disable no-new, no-undef */
 /* global Flash */
 /**
  * Renders a deploy board.
@@ -67,47 +67,68 @@ export default {
   },
 
   created() {
-    this.isLoading = true;
+    this.getDeployBoard();
+  },
+
+  updated() {
+    // While board is not complete we need to request new data from the server.
+    // Let's make sure we are not making any request at the moment
+    // and that we only make this request if the latest response was not 204.
+    if (!this.isLoading &&
+      !this.hasError &&
+      this.deployBoardData.completion &&
+      this.deployBoardData.completion < 100) {
+      // let's wait 1s and make the request again
+      setTimeout(() => {
+        this.getDeployBoard();
+      }, 3000);
+    }
+  },
+
+  methods: {
+    getDeployBoard() {
+      this.isLoading = true;
 
-    const maxNumberOfRequests = 3;
+      const maxNumberOfRequests = 3;
 
-    // If the response is 204, we make 3 more requests.
-    gl.utils.backOff((next, stop) => {
-      this.service.getDeployBoard(this.endpoint)
-        .then((resp) => {
-          if (resp.status === statusCodes.NO_CONTENT) {
-            this.backOffRequestCounter = this.backOffRequestCounter += 1;
+      // If the response is 204, we make 3 more requests.
+      gl.utils.backOff((next, stop) => {
+        this.service.getDeployBoard(this.endpoint)
+          .then((resp) => {
+            if (resp.status === statusCodes.NO_CONTENT) {
+              this.backOffRequestCounter = this.backOffRequestCounter += 1;
 
-            if (this.backOffRequestCounter < maxNumberOfRequests) {
-              next();
+              if (this.backOffRequestCounter < maxNumberOfRequests) {
+                next();
+              } else {
+                stop(resp);
+              }
             } else {
               stop(resp);
             }
-          } else {
-            stop(resp);
-          }
-        })
-        .catch(stop);
-    })
-    .then((resp) => {
-      if (resp.status === statusCodes.NO_CONTENT) {
-        this.hasError = true;
-        return resp;
-      }
-
-      return resp.json();
-    })
-    .then((response) => {
-      this.store.storeDeployBoard(this.environmentID, response);
-      return response;
-    })
-    .then(() => {
-      this.isLoading = false;
-    })
-    .catch(() => {
-      this.isLoading = false;
-      new Flash('An error occurred while fetching the deploy board.', 'alert');
-    });
+          })
+          .catch(stop);
+      })
+      .then((resp) => {
+        if (resp.status === statusCodes.NO_CONTENT) {
+          this.hasError = true;
+          return resp;
+        }
+
+        return resp.json();
+      })
+      .then((response) => {
+        this.store.storeDeployBoard(this.environmentID, response);
+        return response;
+      })
+      .then(() => {
+        this.isLoading = false;
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occurred while fetching the deploy board.', 'alert');
+      });
+    },
   },
 
   computed: {
@@ -163,7 +184,8 @@ export default {
             <template v-for="instance in deployBoardData.instances">
               <instance-component
                 :status="instance.status"
-                :tooltipText="instance.tooltip"/>
+                :tooltip-text="instance.tooltip"
+                :stable="instance.stable" />
             </template>
           </div>
         </section>

app/assets/javascripts/environments/components/deploy_board_instance_component.js

@@ -7,6 +7,9 @@
  * see more information about this in
  * https://gitlab.com/gitlab-org/gitlab-ee/uploads/5fff049fd88336d9ee0c6ef77b1ba7e3/monitoring__deployboard--key.png
  *
+ * An instance can represent a normal deploy or a canary deploy. In the latter we need to provide
+ * this information in the tooltip and the colors.
+ * Mockup is https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1551#note_26595150
  */
 
 export default {
@@ -28,11 +31,23 @@ export default {
       required: false,
       default: '',
     },
+
+    stable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
 
   computed: {
     cssClass() {
-      return `deploy-board-instance-${this.status}`;
+      let cssClassName = `deploy-board-instance-${this.status}`;
+
+      if (!this.stable) {
+        cssClassName = `${cssClassName} deploy-board-instance-canary`;
+      }
+
+      return cssClassName;
     },
   },
 

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

@@ -25,6 +25,7 @@ export default Vue.component('environment-component', {
       state: store.state,
       visibility: 'available',
       isLoading: false,
+      isLoadingFolderContent: false,
       cssContainerClass: environmentsData.cssClass,
       endpoint: environmentsData.environmentsDataEndpoint,
       canCreateDeployment: environmentsData.canCreateDeployment,
@@ -79,10 +80,12 @@ export default Vue.component('environment-component', {
     this.fetchEnvironments();
 
     eventHub.$on('refreshEnvironments', this.fetchEnvironments);
+    eventHub.$on('toggleFolder', this.toggleFolder);
   },
 
   beforeDestroyed() {
     eventHub.$off('refreshEnvironments');
+    eventHub.$off('toggleFolder');
   },
 
   methods: {
@@ -97,6 +100,14 @@ export default Vue.component('environment-component', {
       return this.store.toggleDeployBoard(model.id);
     },
 
+    toggleFolder(folder, folderUrl) {
+      this.store.toggleFolder(folder);
+
+      if (!folder.isOpen) {
+        this.fetchChildEnvironments(folder, folderUrl);
+      }
+    },
+
     /**
      * Will change the page number and update the URL.
      *
@@ -135,6 +146,21 @@ export default Vue.component('environment-component', {
           new Flash('An error occurred while fetching the environments.');
         });
     },
+
+    fetchChildEnvironments(folder, folderUrl) {
+      this.isLoadingFolderContent = true;
+
+      this.service.getFolderContent(folderUrl)
+        .then(resp => resp.json())
+        .then((response) => {
+          this.store.setfolderContent(folder, response.environments);
+          this.isLoadingFolderContent = false;
+        })
+        .catch(() => {
+          this.isLoadingFolderContent = false;
+          new Flash('An error occurred while fetching the environments.');
+        });
+    },
   },
 
   template: `
@@ -199,7 +225,8 @@ export default Vue.component('environment-component', {
             :can-read-environment="canReadEnvironmentParsed"
             :toggleDeployBoard="toggleDeployBoard"
             :store="store"
-            :service="service"/>
+            :service="service"
+            :is-loading-folder-content="isLoadingFolderContent" />
         </div>
 
         <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"

app/assets/javascripts/environments/components/environment_actions.js

@@ -26,6 +26,12 @@ export default {
     };
   },
 
+  computed: {
+    title() {
+      return 'Deploy to...';
+    },
+  },
+
   methods: {
     onClickAction(endpoint) {
       this.isLoading = true;
@@ -40,25 +46,46 @@ export default {
         new Flash('An error occured while making the request.');
       });
     },
+
+    isActionDisabled(action) {
+      if (action.playable === undefined) {
+        return false;
+      }
+
+      return !action.playable;
+    },
   },
 
   template: `
     <div class="btn-group" role="group">
       <button
-        class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container"
+        type="button"
+        class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
+        data-container="body"
         data-toggle="dropdown"
+        :title="title"
+        :aria-label="title"
         :disabled="isLoading">
         <span>
           <span v-html="playIconSvg"></span>
-          <i class="fa fa-caret-down" aria-hidden="true"></i>
-          <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+          <i
+            class="fa fa-caret-down"
+            aria-hidden="true"/>
+          <i
+            v-if="isLoading"
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true"/>
         </span>
+      </button>
 
       <ul class="dropdown-menu dropdown-menu-align-right">
         <li v-for="action in actions">
           <button
+            type="button"
+            class="js-manual-action-link no-btn btn"
             @click="onClickAction(action.play_path)"
-            class="js-manual-action-link no-btn">
+            :class="{ 'disabled': isActionDisabled(action) }"
+            :disabled="isActionDisabled(action)">
             ${playIconSvg}
             <span>
               {{action.name}}
@@ -66,7 +93,6 @@ export default {
           </button>
         </li>
       </ul>
-    </button>
   </div>
   `,
 };

app/assets/javascripts/environments/components/environment_external_url.js

@@ -9,13 +9,21 @@ export default {
     },
   },
 
+  computed: {
+    title() {
+      return 'Open';
+    },
+  },
+
   template: `
     <a
-      class="btn external_url"
+      class="btn external-url has-tooltip"
+      data-container="body"
       :href="externalUrl"
       target="_blank"
-      rel="noopener noreferrer"
-      title="Environment external URL">
+      rel="noopener noreferrer nofollow"
+      :title="title"
+      :aria-label="title">
       <i class="fa fa-external-link" aria-hidden="true"></i>
     </a>
   `,

app/assets/javascripts/environments/components/environment_item.js

@@ -11,7 +11,9 @@ import ExternalUrlComponent from './environment_external_url';
 import StopComponent from './environment_stop';
 import RollbackComponent from './environment_rollback';
 import TerminalButtonComponent from './environment_terminal_button';
+import MonitoringButtonComponent from './environment_monitoring';
 import CommitComponent from '../../vue_shared/components/commit';
+import eventHub from '../event_hub';
 
 const timeagoInstance = new Timeago();
 
@@ -23,6 +25,7 @@ export default {
     'stop-component': StopComponent,
     'rollback-component': RollbackComponent,
     'terminal-button-component': TerminalButtonComponent,
+    'monitoring-button-component': MonitoringButtonComponent,
   },
 
   props: {
@@ -146,6 +149,7 @@ export default {
           const parsedAction = {
             name: gl.text.humanize(action.name),
             play_path: action.play_path,
+            playable: action.playable,
           };
           return parsedAction;
         });
@@ -399,6 +403,14 @@ export default {
       return '';
     },
 
+    monitoringUrl() {
+      if (this.model && this.model.metrics_path) {
+        return this.model.metrics_path;
+      }
+
+      return '';
+    },
+
     /**
      * Constructs folder URL based on the current location and the folder id.
      *
@@ -424,8 +436,14 @@ export default {
     return true;
   },
 
+  methods: {
+    onClickFolder() {
+      eventHub.$emit('toggleFolder', this.model, this.folderUrl);
+    },
+  },
+
   template: `
-    <tr>
+    <tr :class="{ 'js-child-row': model.isChildren }">
       <td>
         <span class="deploy-board-icon"
           v-if="model.hasDeployBoard"
@@ -433,22 +451,38 @@ export default {
 
           <i v-show="!model.isDeployBoardVisible"
             class="fa fa-caret-right"
-            aria-hidden="true">
-          </i>
+            aria-hidden="true" />
+
 
           <i v-show="model.isDeployBoardVisible"
             class="fa fa-caret-down"
-            aria-hidden="true">
-          </i>
+            aria-hidden="true" />
+
         </span>
 
         <a v-if="!model.isFolder"
           class="environment-name"
+          :class="{ 'prepend-left-default': model.isChildren }"
           :href="environmentPath">
           {{model.name}}
         </a>
 
-        <a v-else class="folder-name" :href="folderUrl">
+        <span v-if="model.isFolder"
+          class="folder-name"
+          @click="onClickFolder"
+          role="button">
+
+          <span class="folder-icon">
+            <i
+              v-show="model.isOpen"
+              class="fa fa-caret-down"
+              aria-hidden="true" />
+            <i
+              v-show="!model.isOpen"
+              class="fa fa-caret-right"
+              aria-hidden="true"/>
+          </span>
+
           <span class="folder-icon">
             <i class="fa fa-folder" aria-hidden="true"></i>
           </span>
@@ -460,7 +494,7 @@ export default {
           <span class="badge">
             {{model.size}}
           </span>
-        </a>
+        </span>
       </td>
 
       <td class="deployment-column">
@@ -518,13 +552,16 @@ export default {
           <external-url-component v-if="externalURL && canReadEnvironment"
             :external-url="externalURL"/>
 
-          <stop-component v-if="hasStopAction && canCreateDeployment"
-            :stop-url="model.stop_path"
-            :service="service"/>
+          <monitoring-button-component v-if="monitoringUrl && canReadEnvironment"
+            :monitoring-url="monitoringUrl"/>
 
           <terminal-button-component v-if="model && model.terminal_path"
             :terminal-path="model.terminal_path"/>
 
+          <stop-component v-if="hasStopAction && canCreateDeployment"
+            :stop-url="model.stop_path"
+            :service="service"/>
+
           <rollback-component v-if="canRetry && canCreateDeployment"
             :is-last-deployment="isLastDeployment"
             :retry-url="retryUrl"

app/assets/javascripts/environments/components/environment_monitoring.js

+/**
+ * Renders the Monitoring (Metrics) link in environments table.
+ */
+export default {
+  props: {
+    monitoringUrl: {
+      type: String,
+      default: '',
+      required: true,
+    },
+  },
+
+  computed: {
+    title() {
+      return 'Monitoring';
+    },
+  },
+
+  template: `
+    <a
+      class="btn monitoring-url has-tooltip"
+      data-container="body"
+      :href="monitoringUrl"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      :title="title"
+      :aria-label="title">
+      <i class="fa fa-area-chart" aria-hidden="true"></i>
+    </a>
+  `,
+};

app/assets/javascripts/environments/components/environment_stop.js

@@ -26,6 +26,12 @@ export default {
     };
   },
 
+  computed: {
+    title() {
+      return 'Stop';
+    },
+  },
+
   methods: {
     onClick() {
       if (confirm('Are you sure you want to stop this environment?')) {
@@ -46,10 +52,12 @@ export default {
 
   template: `
     <button type="button"
-      class="btn stop-env-link"
+      class="btn stop-env-link has-tooltip"
+      data-container="body"
       @click="onClick"
       :disabled="isLoading"
-      title="Stop Environment">
+      :title="title"
+      :aria-label="title">
       <i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
       <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
     </button>

app/assets/javascripts/environments/components/environment_terminal_button.js

@@ -14,12 +14,22 @@ export default {
   },
 
   data() {
-    return { terminalIconSvg };
+    return {
+      terminalIconSvg,
+    };
+  },
+
+  computed: {
+    title() {
+      return 'Terminal';
+    },
   },
 
   template: `
-    <a class="btn terminal-button"
-      title="Open web terminal"
+    <a class="btn terminal-button has-tooltip"
+      data-container="body"
+      :title="title"
+      :aria-label="title"
       :href="terminalPath">
       ${terminalIconSvg}
     </a>

app/assets/javascripts/environments/components/environments_table.js

@@ -49,6 +49,18 @@ export default {
       required: true,
       default: () => ({}),
     },
+
+    isLoadingFolderContent: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  methods: {
+    folderUrl(model) {
+      return `${window.location.pathname}/folders/${model.folderName}`;
+    },
   },
 
   template: `
@@ -85,6 +97,31 @@ export default {
               </deploy-board>
             </td>
           </tr>
+
+          <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
+            <tr v-if="isLoadingFolderContent">
+              <td colspan="6" class="text-center">
+                <i class="fa fa-spin fa-spinner fa-2x" aria-hidden="true"/>
+              </td>
+            </tr>
+
+            <template v-else>
+              <tr is="environment-item"
+                v-for="children in model.children"
+                :model="children"
+                :can-create-deployment="canCreateDeployment"
+                :can-read-environment="canReadEnvironment"
+                :service="service"></tr>
+
+              <tr>
+                <td colspan="6" class="text-center">
+                  <a :href="folderUrl(model)" class="btn btn-default">
+                    Show all
+                  </a>
+                </td>
+              </tr>
+            </template>
+          </template>
         </template>
       </tbody>
     </table>

app/assets/javascripts/environments/services/environments_service.js

@@ -7,6 +7,7 @@ Vue.use(VueResource);
 export default class EnvironmentsService {
   constructor(endpoint) {
     this.environments = Vue.resource(endpoint);
+    this.folderResults = 3;
   }
 
   get(scope, page) {
@@ -20,4 +21,8 @@ export default class EnvironmentsService {
   postAction(endpoint) {
     return Vue.http.post(endpoint, {}, { emulateJSON: true });
   }
+
+  getFolderContent(folderUrl) {
+    return Vue.http.get(`${folderUrl}.json?per_page=${this.folderResults}`);
+  }
 }

app/assets/javascripts/environments/stores/environments_store.js

@@ -45,23 +45,29 @@ export default class EnvironmentsStore {
     const filteredEnvironments = environments.map((env) => {
       let filtered = {};
 
+      if (env.size > 1) {
+        filtered = Object.assign({}, env, {
+          isFolder: true,
+          folderName: env.name,
+          isOpen: false,
+          children: [],
+        });
+      }
+
       if (env.latest) {
-        filtered = Object.assign({}, env, env.latest);
+        filtered = Object.assign(filtered, env, env.latest);
         delete filtered.latest;
       } else {
-        filtered = Object.assign({}, env);
+        filtered = Object.assign(filtered, env);
       }
 
-      if (filtered.size > 1) {
-        filtered = Object.assign(filtered, env, { isFolder: true, folderName: env.name });
-      } else if (filtered.size === 1 && filtered.rollout_status_path) {
-        filtered = Object.assign({}, env, filtered, {
+      if (filtered.size === 1 && filtered.rollout_status_path) {
+        filtered = Object.assign({}, filtered, {
           hasDeployBoard: true,
           isDeployBoardVisible: false,
           deployBoardData: {},
         });
       }
-
       return filtered;
     });
 
@@ -155,4 +161,66 @@ export default class EnvironmentsStore {
     });
     return this.state.environments;
   }
+
+  /*
+    * Toggles folder open property for the given folder.
+    *
+    * @param  {Object} folder
+    * @return {Array}
+    */
+  toggleFolder(folder) {
+    return this.updateFolder(folder, 'isOpen', !folder.isOpen);
+  }
+
+  /**
+   * Updates the folder with the received environments.
+   *
+   *
+   * @param  {Object} folder       Folder to update
+   * @param  {Array} environments Received environments
+   * @return {Object}
+   */
+  setfolderContent(folder, environments) {
+    const updatedEnvironments = environments.map((env) => {
+      let updated = env;
+
+      if (env.latest) {
+        updated = Object.assign({}, env, env.latest);
+        delete updated.latest;
+      } else {
+        updated = env;
+      }
+
+      updated.isChildren = true;
+
+      return updated;
+    });
+
+    return this.updateFolder(folder, 'children', updatedEnvironments);
+  }
+
+  /**
+   * Given a folder a prop and a new value updates the correct folder.
+   *
+   * @param  {Object} folder
+   * @param  {String} prop
+   * @param  {String|Boolean|Object|Array} newValue
+   * @return {Array}
+   */
+  updateFolder(folder, prop, newValue) {
+    const environments = this.state.environments;
+
+    const updatedEnvironments = environments.map((env) => {
+      const updateEnv = Object.assign({}, env);
+      if (env.isFolder && env.id === folder.id) {
+        updateEnv[prop] = newValue;
+      }
+
+      return updateEnv;
+    });
+
+    this.state.environments = updatedEnvironments;
+
+    return updatedEnvironments;
+  }
 }

app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.js

+import eventHub from '../event_hub';
+
+export default {
+  name: 'RecentSearchesDropdownContent',
+
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  computed: {
+    processedItems() {
+      return this.items.map((item) => {
+        const { tokens, searchToken }
+          = gl.FilteredSearchTokenizer.processTokens(item);
+
+        const resultantTokens = tokens.map(token => ({
+          prefix: `${token.key}:`,
+          suffix: `${token.symbol}${token.value}`,
+        }));
+
+        return {
+          text: item,
+          tokens: resultantTokens,
+          searchToken,
+        };
+      });
+    },
+    hasItems() {
+      return this.items.length > 0;
+    },
+  },
+
+  methods: {
+    onItemActivated(text) {
+      eventHub.$emit('recentSearchesItemSelected', text);
+    },
+    onRequestClearRecentSearches(e) {
+      // Stop the dropdown from closing
+      e.stopPropagation();
+
+      eventHub.$emit('requestClearRecentSearches');
+    },
+  },
+
+  template: `
+    <div>
+      <ul v-if="hasItems">
+        <li
+          v-for="(item, index) in processedItems"
+          :key="index">
+          <button
+            type="button"
+            class="filtered-search-history-dropdown-item"
+            @click="onItemActivated(item.text)">
+            <span>
+              <span
+                v-for="(token, tokenIndex) in item.tokens"
+                class="filtered-search-history-dropdown-token">
+                <span class="name">{{ token.prefix }}</span><span class="value">{{ token.suffix }}</span>
+              </span>
+            </span>
+            <span class="filtered-search-history-dropdown-search-token">
+              {{ item.searchToken }}
+            </span>
+          </button>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <button
+            type="button"
+            class="filtered-search-history-clear-button"
+            @click="onRequestClearRecentSearches($event)">
+            Clear recent searches
+          </button>
+        </li>
+      </ul>
+      <div
+        v-else
+        class="dropdown-info-note">
+        You don't have any recent searches
+      </div>
+    </div>
+  `,
+};

app/assets/javascripts/filtered_search/dropdown_hint.js

@@ -56,7 +56,7 @@ require('./filtered_search_dropdown');
     renderContent() {
       const dropdownData = [];
 
-      [].forEach.call(this.input.closest('.filtered-search-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
+      [].forEach.call(this.input.closest('.filtered-search-box-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
         const { icon, hint, tag, type } = dropdownMenu.dataset;
         if (icon && hint && tag) {
           dropdownData.push(

app/assets/javascripts/filtered_search/dropdown_utils.js

@@ -129,7 +129,9 @@ import FilteredSearchContainer from './container';
         }
       });
 
-      return values.join(' ');
+      return values
+        .map(value => value.trim())
+        .join(' ');
     }
 
     static getSearchInput(filteredSearchInput) {

app/assets/javascripts/filtered_search/event_hub.js

+import Vue from 'vue';
+
+export default new Vue();

app/assets/javascripts/filtered_search/filtered_search_manager.js

+/* global Flash */
+
 import FilteredSearchContainer from './container';
+import RecentSearchesRoot from './recent_searches_root';
+import RecentSearchesStore from './stores/recent_searches_store';
+import RecentSearchesService from './services/recent_searches_service';
+import eventHub from './event_hub';
 
 (() => {
   class FilteredSearchManager {
     constructor(page) {
       this.container = FilteredSearchContainer.container;
       this.filteredSearchInput = this.container.querySelector('.filtered-search');
+      this.filteredSearchInputForm = this.filteredSearchInput.form;
       this.clearSearchButton = this.container.querySelector('.clear-search');
       this.tokensContainer = this.container.querySelector('.tokens-container');
       this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
@@ -13,10 +20,41 @@ import FilteredSearchContainer from './container';
         this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeysWithWeights;
       }
 
+      this.recentSearchesStore = new RecentSearchesStore();
+      let recentSearchesKey = 'issue-recent-searches';
+      if (page === 'merge_requests') {
+        recentSearchesKey = 'merge-request-recent-searches';
+      }
+      this.recentSearchesService = new RecentSearchesService(recentSearchesKey);
+
+      // Fetch recent searches from localStorage
+      this.fetchingRecentSearchesPromise = this.recentSearchesService.fetch()
+        .catch(() => {
+          // eslint-disable-next-line no-new
+          new Flash('An error occured while parsing recent searches');
+          // Gracefully fail to empty array
+          return [];
+        })
+        .then((searches) => {
+          // Put any searches that may have come in before
+          // we fetched the saved searches ahead of the already saved ones
+          const resultantSearches = this.recentSearchesStore.setRecentSearches(
+            this.recentSearchesStore.state.recentSearches.concat(searches),
+          );
+          this.recentSearchesService.save(resultantSearches);
+        });
+
       if (this.filteredSearchInput) {
         this.tokenizer = gl.FilteredSearchTokenizer;
         this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
 
+        this.recentSearchesRoot = new RecentSearchesRoot(
+          this.recentSearchesStore,
+          this.recentSearchesService,
+          document.querySelector('.js-filtered-search-history-dropdown'),
+        );
+        this.recentSearchesRoot.init();
+
         this.bindEvents();
         this.loadSearchParamsFromURL();
         this.dropdownManager.setDropdown();
@@ -29,6 +67,10 @@ import FilteredSearchContainer from './container';
     cleanup() {
       this.unbindEvents();
       document.removeEventListener('beforeunload', this.cleanupWrapper);
+
+      if (this.recentSearchesRoot) {
+        this.recentSearchesRoot.destroy();
+      }
     }
 
     bindEvents() {
@@ -38,7 +80,7 @@ import FilteredSearchContainer from './container';
       this.handleInputPlaceholderWrapper = this.handleInputPlaceholder.bind(this);
       this.handleInputVisualTokenWrapper = this.handleInputVisualToken.bind(this);
       this.checkForEnterWrapper = this.checkForEnter.bind(this);
-      this.clearSearchWrapper = this.clearSearch.bind(this);
+      this.onClearSearchWrapper = this.onClearSearch.bind(this);
       this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
       this.removeSelectedTokenWrapper = this.removeSelectedToken.bind(this);
       this.unselectEditTokensWrapper = this.unselectEditTokens.bind(this);
@@ -46,8 +88,8 @@ import FilteredSearchContainer from './container';
       this.tokenChange = this.tokenChange.bind(this);
       this.addInputContainerFocusWrapper = this.addInputContainerFocus.bind(this);
       this.removeInputContainerFocusWrapper = this.removeInputContainerFocus.bind(this);
+      this.onrecentSearchesItemSelectedWrapper = this.onrecentSearchesItemSelected.bind(this);
 
-      this.filteredSearchInputForm = this.filteredSearchInput.form;
       this.filteredSearchInputForm.addEventListener('submit', this.handleFormSubmit);
       this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
       this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
@@ -60,11 +102,12 @@ import FilteredSearchContainer from './container';
       this.filteredSearchInput.addEventListener('focus', this.addInputContainerFocusWrapper);
       this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
       this.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
-      this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
+      this.clearSearchButton.addEventListener('click', this.onClearSearchWrapper);
       document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
       document.addEventListener('click', this.unselectEditTokensWrapper);
       document.addEventListener('click', this.removeInputContainerFocusWrapper);
       document.addEventListener('keydown', this.removeSelectedTokenWrapper);
+      eventHub.$on('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
     }
 
     unbindEvents() {
@@ -80,11 +123,12 @@ import FilteredSearchContainer from './container';
       this.filteredSearchInput.removeEventListener('focus', this.addInputContainerFocusWrapper);
       this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
       this.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
-      this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
+      this.clearSearchButton.removeEventListener('click', this.onClearSearchWrapper);
       document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
       document.removeEventListener('click', this.unselectEditTokensWrapper);
       document.removeEventListener('click', this.removeInputContainerFocusWrapper);
       document.removeEventListener('keydown', this.removeSelectedTokenWrapper);
+      eventHub.$off('recentSearchesItemSelected', this.onrecentSearchesItemSelectedWrapper);
     }
 
     checkForBackspace(e) {
@@ -137,7 +181,7 @@ import FilteredSearchContainer from './container';
     }
 
     addInputContainerFocus() {
-      const inputContainer = this.filteredSearchInput.closest('.filtered-search-input-container');
+      const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
 
       if (inputContainer) {
         inputContainer.classList.add('focus');
@@ -145,7 +189,7 @@ import FilteredSearchContainer from './container';
     }
 
     removeInputContainerFocus(e) {
-      const inputContainer = this.filteredSearchInput.closest('.filtered-search-input-container');
+      const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
       const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
       const isElementInDynamicFilterDropdown = e.target.closest('.filter-dropdown') !== null;
       const isElementInStaticFilterDropdown = e.target.closest('ul[data-dropdown]') !== null;
@@ -167,7 +211,7 @@ import FilteredSearchContainer from './container';
     }
 
     unselectEditTokens(e) {
-      const inputContainer = this.container.querySelector('.filtered-search-input-container');
+      const inputContainer = this.container.querySelector('.filtered-search-box');
       const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
       const isElementInFilterDropdown = e.target.closest('.filter-dropdown') !== null;
       const isElementTokensContainer = e.target.classList.contains('tokens-container');
@@ -223,9 +267,12 @@ import FilteredSearchContainer from './container';
       }
     }
 
-    clearSearch(e) {
+    onClearSearch(e) {
       e.preventDefault();
+      this.clearSearch();
+    }
 
+    clearSearch() {
       this.filteredSearchInput.value = '';
 
       const removeElements = [];
@@ -299,6 +346,17 @@ import FilteredSearchContainer from './container';
       this.search();
     }
 
+    saveCurrentSearchQuery() {
+      // Don't save before we have fetched the already saved searches
+      this.fetchingRecentSearchesPromise.then(() => {
+        const searchQuery = gl.DropdownUtils.getSearchQuery();
+        if (searchQuery.length > 0) {
+          const resultantSearches = this.recentSearchesStore.addRecentSearch(searchQuery);
+          this.recentSearchesService.save(resultantSearches);
+        }
+      });
+    }
+
     loadSearchParamsFromURL() {
       const params = gl.utils.getUrlParamsArray();
       const usernameParams = this.getUsernameParams();
@@ -353,6 +411,8 @@ import FilteredSearchContainer from './container';
         }
       });
 
+      this.saveCurrentSearchQuery();
+
       if (hasFilteredSearch) {
         this.clearSearchButton.classList.remove('hidden');
         this.handleInputPlaceholder();
@@ -361,8 +421,12 @@ import FilteredSearchContainer from './container';
 
     search() {
       const paths = [];
+      const searchQuery = gl.DropdownUtils.getSearchQuery();
+
+      this.saveCurrentSearchQuery();
+
       const { tokens, searchToken }
-        = this.tokenizer.processTokens(gl.DropdownUtils.getSearchQuery());
+        = this.tokenizer.processTokens(searchQuery);
       const currentState = gl.utils.getParameterByName('state') || 'opened';
       paths.push(`state=${currentState}`);
 
@@ -426,6 +490,13 @@ import FilteredSearchContainer from './container';
         currentDropdownRef.dispatchInputEvent();
       }
     }
+
+    onrecentSearchesItemSelected(text) {
+      this.clearSearch();
+      this.filteredSearchInput.value = text;
+      this.filteredSearchInput.dispatchEvent(new CustomEvent('input'));
+      this.search();
+    }
   }
 
   window.gl = window.gl || {};

app/assets/javascripts/filtered_search/filtered_search_tokenizer.js

@@ -8,21 +8,31 @@ require('./filtered_search_token_keys');
       // Values that start with a double quote must end in a double quote (same for single)
       const tokenRegex = new RegExp(`(${allowedKeys.join('|')}):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\\S+))`, 'g');
       const tokens = [];
+      const tokenIndexes = []; // stores key+value for simple search
       let lastToken = null;
       const searchToken = input.replace(tokenRegex, (match, key, symbol, v1, v2, v3) => {
         let tokenValue = v1 || v2 || v3;
         let tokenSymbol = symbol;
+        let tokenIndex = '';
 
         if (tokenValue === '~' || tokenValue === '%' || tokenValue === '@') {
           tokenSymbol = tokenValue;
           tokenValue = '';
         }
 
-        tokens.push({
-          key,
-          value: tokenValue || '',
-          symbol: tokenSymbol || '',
-        });
+        tokenIndex = `${key}:${tokenValue}`;
+
+        // Prevent adding duplicates
+        if (tokenIndexes.indexOf(tokenIndex) === -1) {
+          tokenIndexes.push(tokenIndex);
+
+          tokens.push({
+            key,
+            value: tokenValue || '',
+            symbol: tokenSymbol || '',
+          });
+        }
+
         return '';
       }).replace(/\s{2,}/g, ' ').trim() || '';
 

app/assets/javascripts/filtered_search/recent_searches_root.js

+import Vue from 'vue';
+import RecentSearchesDropdownContent from './components/recent_searches_dropdown_content';
+import eventHub from './event_hub';
+
+class RecentSearchesRoot {
+  constructor(
+    recentSearchesStore,
+    recentSearchesService,
+    wrapperElement,
+  ) {
+    this.store = recentSearchesStore;
+    this.service = recentSearchesService;
+    this.wrapperElement = wrapperElement;
+  }
+
+  init() {
+    this.bindEvents();
+    this.render();
+  }
+
+  bindEvents() {
+    this.onRequestClearRecentSearchesWrapper = this.onRequestClearRecentSearches.bind(this);
+
+    eventHub.$on('requestClearRecentSearches', this.onRequestClearRecentSearchesWrapper);
+  }
+
+  unbindEvents() {
+    eventHub.$off('requestClearRecentSearches', this.onRequestClearRecentSearchesWrapper);
+  }
+
+  render() {
+    this.vm = new Vue({
+      el: this.wrapperElement,
+      data: this.store.state,
+      template: `
+        <recent-searches-dropdown-content
+          :items="recentSearches" />
+      `,
+      components: {
+        'recent-searches-dropdown-content': RecentSearchesDropdownContent,
+      },
+    });
+  }
+
+  onRequestClearRecentSearches() {
+    const resultantSearches = this.store.setRecentSearches([]);
+    this.service.save(resultantSearches);
+  }
+
+  destroy() {
+    this.unbindEvents();
+    if (this.vm) {
+      this.vm.$destroy();
+    }
+  }
+
+}
+
+export default RecentSearchesRoot;

app/assets/javascripts/filtered_search/services/recent_searches_service.js

+class RecentSearchesService {
+  constructor(localStorageKey = 'issuable-recent-searches') {
+    this.localStorageKey = localStorageKey;
+  }
+
+  fetch() {
+    const input = window.localStorage.getItem(this.localStorageKey);
+
+    let searches = [];
+    if (input && input.length > 0) {
+      try {
+        searches = JSON.parse(input);
+      } catch (err) {
+        return Promise.reject(err);
+      }
+    }
+
+    return Promise.resolve(searches);
+  }
+
+  save(searches = []) {
+    window.localStorage.setItem(this.localStorageKey, JSON.stringify(searches));
+  }
+}
+
+export default RecentSearchesService;

app/assets/javascripts/filtered_search/stores/recent_searches_store.js

+import _ from 'underscore';
+
+class RecentSearchesStore {
+  constructor(initialState = {}) {
+    this.state = Object.assign({
+      recentSearches: [],
+    }, initialState);
+  }
+
+  addRecentSearch(newSearch) {
+    this.setRecentSearches([newSearch].concat(this.state.recentSearches));
+
+    return this.state.recentSearches;
+  }
+
+  setRecentSearches(searches = []) {
+    const trimmedSearches = searches.map(search => search.trim());
+    this.state.recentSearches = _.uniq(trimmedSearches).slice(0, 5);
+    return this.state.recentSearches;
+  }
+}
+
+export default RecentSearchesStore;

app/assets/javascripts/geo_nodes.js

@@ -12,6 +12,7 @@ class GeoNodeStatus {
     this.$repositoriesSynced = $('.js-repositories-synced', this.$status);
     this.$repositoriesFailed = $('.js-repositories-failed', this.$status);
     this.$lfsObjectsSynced = $('.js-lfs-objects-synced', this.$status);
+    this.$attachmentsSynced = $('.js-attachments-synced', this.$status);
     this.$health = $('.js-health', this.$status);
     this.endpoint = this.$el.data('status-url');
 
@@ -31,6 +32,7 @@ class GeoNodeStatus {
       this.$repositoriesSynced.html(`${status.repositories_synced_count}/${status.repositories_count} (${status.repositories_synced_in_percentage})`);
       this.$repositoriesFailed.html(status.repositories_failed_count);
       this.$lfsObjectsSynced.html(`${status.lfs_objects_synced_count}/${status.lfs_objects_count} (${status.lfs_objects_synced_in_percentage})`);
+      this.$attachmentsSynced.html(`${status.attachments_synced_count}/${status.attachments_count} (${status.attachments_synced_in_percentage})`);
       this.$health.html(status.health);
 
       this.$status.show();

app/assets/javascripts/groups_select.js

@@ -6,23 +6,60 @@ var slice = [].slice;
 window.GroupsSelect = (function() {
   function GroupsSelect() {
     $('.ajax-groups-select').each((function(_this) {
+      const self = _this;
+
       return function(i, select) {
         var all_available, skip_groups;
-        all_available = $(select).data('all-available');
-        skip_groups = $(select).data('skip-groups') || [];
-        return $(select).select2({
+        const $select = $(select);
+        all_available = $select.data('all-available');
+        skip_groups = $select.data('skip-groups') || [];
+
+        $select.select2({
           placeholder: "Search for a group",
-          multiple: $(select).hasClass('multiselect'),
+          multiple: $select.hasClass('multiselect'),
           minimumInputLength: 0,
-          query: function(query) {
-            var options = { all_available: all_available, skip_groups: skip_groups };
-            return Api.groups(query.term, options, function(groups) {
-              var data;
-              data = {
-                results: groups
+          ajax: {
+            url: Api.buildUrl(Api.groupsPath),
+            dataType: 'json',
+            quietMillis: 250,
+            transport: function (params) {
+              $.ajax(params).then((data, status, xhr) => {
+                const results = data || [];
+
+                const headers = gl.utils.normalizeCRLFHeaders(xhr.getAllResponseHeaders());
+                const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
+                const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
+                const more = currentPage < totalPages;
+
+                return {
+                  results,
+                  pagination: {
+                    more,
+                  },
+                };
+              }).then(params.success).fail(params.error);
+            },
+            data: function (search, page) {
+              return {
+                search,
+                page,
+                per_page: GroupsSelect.PER_PAGE,
+                all_available,
+              };
+            },
+            results: function (data, page) {
+              if (data.length) return { results: [] };
+
+              const groups = data.length ? data : data.results || [];
+              const more = data.pagination ? data.pagination.more : false;
+              const results = groups.filter(group => skip_groups.indexOf(group.id) === -1);
+
+              return {
+                results,
+                page,
+                more,
               };
-              return query.callback(data);
-            });
+            },
           },
           initSelection: function(element, callback) {
             var id;
@@ -34,19 +71,23 @@ window.GroupsSelect = (function() {
           formatResult: function() {
             var args;
             args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-            return _this.formatResult.apply(_this, args);
+            return self.formatResult.apply(self, args);
           },
           formatSelection: function() {
             var args;
             args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-            return _this.formatSelection.apply(_this, args);
+            return self.formatSelection.apply(self, args);
           },
-          dropdownCssClass: "ajax-groups-dropdown",
+          dropdownCssClass: "ajax-groups-dropdown select2-infinite",
           // we do not want to escape markup since we are displaying html in results
           escapeMarkup: function(m) {
             return m;
           }
         });
+
+        self.dropdown = document.querySelector('.select2-infinite .select2-results');
+
+        $select.on('select2-loaded', self.forceOverflow.bind(self));
       };
     })(this));
   }
@@ -65,5 +106,12 @@ window.GroupsSelect = (function() {
     return group.full_name;
   };
 
+  GroupsSelect.prototype.forceOverflow = function (e) {
+    const itemHeight = this.dropdown.querySelector('.select2-result:first-child').clientHeight;
+    this.dropdown.style.height = `${Math.floor(this.dropdown.scrollHeight - (itemHeight * 0.9))}px`;
+  };
+
+  GroupsSelect.PER_PAGE = 20;
+
   return GroupsSelect;
 })();

app/assets/javascripts/header.js

 /* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var */
 
 $(document).on('todo:toggle', function(e, count) {
-  var $todoPendingCount = $('.todos-pending-count');
+  var $todoPendingCount = $('.todos-count');
   $todoPendingCount.text(gl.text.highCountTrim(count));
   $todoPendingCount.toggleClass('hidden', count === 0);
 });

app/assets/javascripts/issue_show/index.js

+import Vue from 'vue';
+import IssueTitle from './issue_title';
+import '../vue_shared/vue_resource_interceptor';
+
+const vueOptions = () => ({
+  el: '.issue-title-entrypoint',
+  components: {
+    IssueTitle,
+  },
+  data() {
+    const issueTitleData = document.querySelector('.issue-title-data').dataset;
+
+    return {
+      initialTitle: issueTitleData.initialTitle,
+      endpoint: issueTitleData.endpoint,
+    };
+  },
+  template: `
+    <IssueTitle
+      :initialTitle="initialTitle"
+      :endpoint="endpoint"
+    />
+  `,
+});
+
+(() => new Vue(vueOptions()))();

app/assets/javascripts/issue_show/issue_title.js

+import Visibility from 'visibilityjs';
+import Poll from './../lib/utils/poll';
+import Service from './services/index';
+
+export default {
+  props: {
+    initialTitle: { required: true, type: String },
+    endpoint: { required: true, type: String },
+  },
+  data() {
+    const resource = new Service(this.$http, this.endpoint);
+
+    const poll = new Poll({
+      resource,
+      method: 'getTitle',
+      successCallback: (res) => {
+        this.renderResponse(res);
+      },
+      errorCallback: (err) => {
+        if (process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.error('ISSUE SHOW TITLE REALTIME ERROR', err);
+        } else {
+          throw new Error(err);
+        }
+      },
+    });
+
+    return {
+      poll,
+      timeoutId: null,
+      title: this.initialTitle,
+    };
+  },
+  methods: {
+    fetch() {
+      this.poll.makeRequest();
+
+      Visibility.change(() => {
+        if (!Visibility.hidden()) {
+          this.poll.restart();
+        } else {
+          this.poll.stop();
+        }
+      });
+    },
+    renderResponse(res) {
+      const body = JSON.parse(res.body);
+      this.triggerAnimation(body);
+    },
+    triggerAnimation(body) {
+      const { title } = body;
+
+      /**
+      * since opacity is changed, even if there is no diff for Vue to update
+      * we must check the title even on a 304 to ensure no visual change
+      */
+      if (this.title === title) return;
+
+      this.$el.style.opacity = 0;
+
+      this.timeoutId = setTimeout(() => {
+        this.title = title;
+
+        this.$el.style.transition = 'opacity 0.2s ease';
+        this.$el.style.opacity = 1;
+
+        clearTimeout(this.timeoutId);
+      }, 100);
+    },
+  },
+  created() {
+    this.fetch();
+  },
+  template: `
+    <h2 class='title' v-html='title'></h2>
+  `,
+};

app/assets/javascripts/issue_show/services/index.js

+export default class Service {
+  constructor(resource, endpoint) {
+    this.resource = resource;
+    this.endpoint = endpoint;
+  }
+
+  getTitle() {
+    return this.resource.get(this.endpoint);
+  }
+}

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

@@ -2,6 +2,8 @@
 (function() {
   (function(w) {
     var base;
+    const faviconEl = document.getElementById('favicon');
+    const originalFavicon = faviconEl ? faviconEl.getAttribute('href') : null;
     w.gl || (w.gl = {});
     (base = w.gl).utils || (base.utils = {});
     w.gl.utils.isInGroupsPage = function() {
@@ -231,6 +233,22 @@
       return upperCaseHeaders;
     };
 
+    /**
+      this will take in the getAllResponseHeaders result and normalize them
+      this way we don't run into production issues when nginx gives us lowercased header keys
+    */
+    w.gl.utils.normalizeCRLFHeaders = (headers) => {
+      const headersObject = {};
+      const headersArray = headers.split('\n');
+
+      headersArray.forEach((header) => {
+        const keyValue = header.split(': ');
+        headersObject[keyValue[0]] = keyValue[1];
+      });
+
+      return w.gl.utils.normalizeHeaders(headersObject);
+    };
+
     /**
      * Parses pagination object string values into numbers.
      *
@@ -247,7 +265,7 @@
     });
 
     /**
-     * Updates the search parameter of a URL given the parameter and values provided.
+     * Updates the search parameter of a URL given the parameter and value provided.
      *
      * If no search params are present we'll add it.
      * If param for page is already present, we'll update it
@@ -262,17 +280,24 @@
       let search;
       const locationSearch = window.location.search;
 
-      if (locationSearch.length === 0) {
-        search = `?${param}=${value}`;
-      }
+      if (locationSearch.length) {
+        const parameters = locationSearch.substring(1, locationSearch.length)
+          .split('&')
+          .reduce((acc, element) => {
+            const val = element.split('=');
+            acc[val[0]] = decodeURIComponent(val[1]);
+            return acc;
+          }, {});
 
-      if (locationSearch.indexOf(param) !== -1) {
-        const regex = new RegExp(param + '=\\d');
-        search = locationSearch.replace(regex, `${param}=${value}`);
-      }
+        parameters[param] = value;
+
+        const toString = Object.keys(parameters)
+          .map(val => `${val}=${encodeURIComponent(parameters[val])}`)
+          .join('&');
 
-      if (locationSearch.length && locationSearch.indexOf(param) === -1) {
-        search = `${locationSearch}&${param}=${value}`;
+        search = `?${toString}`;
+      } else {
+        search = `?${param}=${value}`;
       }
 
       return search;
@@ -338,5 +363,34 @@
         fn(next, stop);
       });
     };
+
+    w.gl.utils.setFavicon = (iconName) => {
+      if (faviconEl && iconName) {
+        faviconEl.setAttribute('href', `/assets/${iconName}.ico`);
+      }
+    };
+
+    w.gl.utils.resetFavicon = () => {
+      if (faviconEl) {
+        faviconEl.setAttribute('href', originalFavicon);
+      }
+    };
+
+    w.gl.utils.setCiStatusFavicon = (pageUrl) => {
+      $.ajax({
+        url: pageUrl,
+        dataType: 'json',
+        success: function(data) {
+          if (data && data.icon) {
+            gl.utils.setFavicon(`ci_favicons/${data.icon}`);
+          } else {
+            gl.utils.resetFavicon();
+          }
+        },
+        error: function() {
+          gl.utils.resetFavicon();
+        }
+      });
+    };
   })(window);
 }).call(window);

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

+/* eslint-disable import/prefer-default-export */
+
+/**
+ * Function that allows a number with an X amount of decimals
+ * to be formatted in the following fashion:
+ * * For 1 digit to the left of the decimal point and X digits to the right of it
+ * * * Show 3 digits to the right
+ * * For 2 digits to the left of the decimal point and X digits to the right of it
+ * * * Show 2 digits to the right
+*/
+export function formatRelevantDigits(number) {
+  let digitsLeft = '';
+  let relevantDigits = 0;
+  let formattedNumber = '';
+  if (!isNaN(Number(number))) {
+    digitsLeft = number.split('.')[0];
+    switch (digitsLeft.length) {
+      case 1:
+        relevantDigits = 3;
+        break;
+      case 2:
+        relevantDigits = 2;
+        break;
+      case 3:
+        relevantDigits = 1;
+        break;
+      default:
+        relevantDigits = 4;
+        break;
+    }
+    formattedNumber = Number(number).toFixed(relevantDigits);
+  }
+  return formattedNumber;
+}

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

@@ -5,23 +5,37 @@ import httpStatusCodes from './http_status';
  * Service for vue resouce and method need to be provided as props
  *
  * @example
- * new poll({
+ * new Poll({
  *   resource: resource,
  *   method: 'name',
- *   data: {page: 1, scope: 'all'},
+ *   data: {page: 1, scope: 'all'}, // optional
  *   successCallback: () => {},
  *   errorCallback: () => {},
+ *   notificationCallback: () => {}, // optional
  * }).makeRequest();
  *
- * this.service = new BoardsService(endpoint);
- * new poll({
- *   resource: this.service,
- *   method: 'get',
- *   data: {page: 1, scope: 'all'},
- *   successCallback: () => {},
- *   errorCallback: () => {},
- * }).makeRequest();
+ * Usage in pipelines table with visibility lib:
  *
+ * const poll = new Poll({
+ *  resource: this.service,
+ *  method: 'getPipelines',
+ *  data: { page: pageNumber, scope },
+ *  successCallback: this.successCallback,
+ *  errorCallback: this.errorCallback,
+ *  notificationCallback: this.updateLoading,
+ * });
+ *
+ * if (!Visibility.hidden()) {
+ *  poll.makeRequest();
+ *  }
+ *
+ * Visibility.change(() => {
+ *  if (!Visibility.hidden()) {
+ *   poll.restart();
+ *  } else {
+ *   poll.stop();
+ *  }
+* });
  *
  * 1. Checks for response and headers before start polling
  * 2. Interval is provided by `Poll-Interval` header.
@@ -34,6 +48,8 @@ export default class Poll {
   constructor(options = {}) {
     this.options = options;
     this.options.data = options.data || {};
+    this.options.notificationCallback = options.notificationCallback ||
+      function notificationCallback() {};
 
     this.intervalHeader = 'POLL-INTERVAL';
     this.timeoutID = null;
@@ -42,7 +58,7 @@ export default class Poll {
 
   checkConditions(response) {
     const headers = gl.utils.normalizeHeaders(response.headers);
-    const pollInterval = headers[this.intervalHeader];
+    const pollInterval = parseInt(headers[this.intervalHeader], 10);
 
     if (pollInterval > 0 && response.status === httpStatusCodes.OK && this.canPoll) {
       this.timeoutID = setTimeout(() => {
@@ -54,11 +70,14 @@ export default class Poll {
   }
 
   makeRequest() {
-    const { resource, method, data, errorCallback } = this.options;
+    const { resource, method, data, errorCallback, notificationCallback } = this.options;
+
+    // It's called everytime a new request is made. Useful to update the status.
+    notificationCallback(true);
 
     return resource[method](data)
-    .then(response => this.checkConditions(response))
-    .catch(error => errorCallback(error));
+      .then(response => this.checkConditions(response))
+      .catch(error => errorCallback(error));
   }
 
   /**
@@ -70,4 +89,12 @@ export default class Poll {
     this.canPoll = false;
     clearTimeout(this.timeoutID);
   }
+
+  /**
+   * Restarts polling after it has been stoped
+   */
+  restart() {
+    this.canPoll = true;
+    this.makeRequest();
+  }
 }

app/assets/javascripts/main.js

@@ -195,6 +195,9 @@ require('./ldap_groups_select');
 require('./path_locks');
 require('./weight_select');
 
+// eslint-disable-next-line global-require
+if (process.env.NODE_ENV !== 'production') require('./test_utils/');
+
 document.addEventListener('beforeunload', function () {
   // Unbind scroll events
   $(document).off('scroll');

app/assets/javascripts/merge_request_tabs.js

@@ -4,8 +4,10 @@
 
 import Cookies from 'js-cookie';
 
-require('./breakpoints');
-require('./flash');
+import CommitPipelinesTable from './commit/pipelines/pipelines_table';
+
+import './breakpoints';
+import './flash';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -97,6 +99,13 @@ require('./flash');
         .off('click', this.clickTab);
     }
 
+    destroy() {
+      this.unbindEvents();
+      if (this.commitPipelinesTable) {
+        this.commitPipelinesTable.$destroy();
+      }
+    }
+
     showTab(e) {
       e.preventDefault();
       this.activateTab($(e.target).data('action'));
@@ -128,12 +137,8 @@ require('./flash');
           this.expandViewContainer();
         }
       } else if (action === 'pipelines') {
-        if (this.pipelinesLoaded) {
-          return;
-        }
-        const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-        gl.commits.pipelines.PipelinesTableBundle.$mount(pipelineTableViewEl);
-        this.pipelinesLoaded = true;
+        this.resetViewContainer();
+        this.loadPipelines();
       } else {
         this.expandView();
         this.resetViewContainer();
@@ -222,6 +227,18 @@ require('./flash');
       });
     }
 
+    loadPipelines() {
+      if (this.pipelinesLoaded) {
+        return;
+      }
+      const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
+      // Could already be mounted from the `pipelines_bundle`
+      if (pipelineTableViewEl) {
+        this.commitPipelinesTable = new CommitPipelinesTable().$mount(pipelineTableViewEl);
+      }
+      this.pipelinesLoaded = true;
+    }
+
     loadDiff(source) {
       if (this.diffsLoaded) {
         return;