Merge branch 'master' into tc-fix-unplayable-build-action-404

* master: (525 commits)
  Introduce "polling_interval_multiplier" as application setting
  fix spelling CI_REPOSITORY_URL (line:355) gitab-ci-token to gitlab-ci-token.
  Pass Gitaly Repository messages to workhorse
  Use gitaly 0.5.0
  Fix specs
  Improve specs examples
  Minor refactor
  Fix BrachFormatter for removed users
  Changelog
  Fix specs
  One more change to the branch names to preserve metadata
  Prefixes source branch name with short SHA to avoid collision
  Fix GitHub importer for PRs of deleted forked repositories
  Change order of specs
  Clean history after every test that changes history
  Clean history state after each test
  Fixes method not replacing URL parameters correctly
  Fix a transient failure caused by FFaker
  Remove unnecessary ORDER BY clause when updating todos
  Add a wait_for_ajax call to ensure Todos page cleans up properly
  ...

.babelrc

+{
+  "presets": [
+    ["latest", { "es2015": { "modules": false } }],
+    "stage-2"
+  ],
+  "env": {
+    "coverage": {
+      "plugins": [
+        ["istanbul", {
+          "exclude": [
+            "app/assets/javascripts/droplab/**/*",
+            "spec/javascripts/**/*"
+          ]
+        }],
+        ["transform-define", {
+          "process.env.BABEL_ENV": "coverage"
+        }]
+      ]
+    }
+  }
+}

.gitlab-ci.yml

@@ -14,13 +14,15 @@ variables:
   GIT_DEPTH: "20"
   PHANTOMJS_VERSION: "2.1.1"
   GET_SOURCES_ATTEMPTS: "3"
+  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
 
 before_script:
   - source ./scripts/prepare_build.sh
   - cp config/gitlab.yml.example config/gitlab.yml
   - bundle --version
-  - '[ "$USE_BUNDLE_INSTALL" != "true" ] || retry bundle install --without postgres production --jobs $(nproc) $FLAGS'
-  - retry gem install knapsack
+  - '[ "$USE_BUNDLE_INSTALL" != "true" ] || retry bundle install --without postgres production --jobs $(nproc) --clean $FLAGS'
+  - retry gem install knapsack fog-aws mime-types
   - '[ "$SETUP_DB" != "true" ] || bundle exec rake db:drop db:create db:schema:load db:migrate add_limits_mysql'
 
 stages:
@@ -39,14 +41,15 @@ stages:
   variables:
     SETUP_DB: "false"
     USE_BUNDLE_INSTALL: "false"
+    KNAPSACK_S3_BUCKET: "gitlab-ce-cache"
   cache:
     key: "knapsack"
     paths:
-    - knapsack/
+      - knapsack/
   artifacts:
     expire_in: 31d
     paths:
-    - knapsack/
+      - knapsack/
 
 .use-db: &use-db
   services:
@@ -61,17 +64,17 @@ stages:
     - JOB_NAME=( $CI_JOB_NAME )
     - export CI_NODE_INDEX=${JOB_NAME[1]}
     - export CI_NODE_TOTAL=${JOB_NAME[2]}
-    - export KNAPSACK_REPORT_PATH=knapsack/rspec_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json
+    - export KNAPSACK_REPORT_PATH=knapsack/${CI_PROJECT_NAME}/${JOB_NAME[0]}_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json
     - export KNAPSACK_GENERATE_REPORT=true
-    - cp knapsack/rspec_report.json ${KNAPSACK_REPORT_PATH}
+    - cp ${KNAPSACK_RSPEC_SUITE_REPORT_PATH} ${KNAPSACK_REPORT_PATH}
     - knapsack rspec "--color --format documentation"
   artifacts:
     expire_in: 31d
     when: always
     paths:
-    - coverage/
-    - knapsack/
-    - tmp/capybara/
+      - coverage/
+      - knapsack/
+      - tmp/capybara/
 
 .spinach-knapsack: &spinach-knapsack
   stage: test
@@ -81,28 +84,44 @@ stages:
     - JOB_NAME=( $CI_JOB_NAME )
     - export CI_NODE_INDEX=${JOB_NAME[1]}
     - export CI_NODE_TOTAL=${JOB_NAME[2]}
-    - export KNAPSACK_REPORT_PATH=knapsack/spinach_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json
+    - export KNAPSACK_REPORT_PATH=knapsack/${CI_PROJECT_NAME}/${JOB_NAME[0]}_node_${CI_NODE_INDEX}_${CI_NODE_TOTAL}_report.json
     - export KNAPSACK_GENERATE_REPORT=true
-    - cp knapsack/spinach_report.json ${KNAPSACK_REPORT_PATH}
+    - cp ${KNAPSACK_SPINACH_SUITE_REPORT_PATH} ${KNAPSACK_REPORT_PATH}
     - knapsack spinach "-r rerun" || retry '[[ -e tmp/spinach-rerun.txt ]] && bundle exec spinach -r rerun $(cat tmp/spinach-rerun.txt)'
   artifacts:
     expire_in: 31d
     when: always
     paths:
-    - coverage/
-    - knapsack/
-    - tmp/capybara/
+      - coverage/
+      - knapsack/
+      - tmp/capybara/
 
 # Prepare and merge knapsack tests
-
 knapsack:
   <<: *knapsack-state
   <<: *dedicated-runner
   stage: prepare
   script:
-    - mkdir -p knapsack/
-    - '[[ -f knapsack/rspec_report.json ]] || echo "{}" > knapsack/rspec_report.json'
-    - '[[ -f knapsack/spinach_report.json ]] || echo "{}" > knapsack/spinach_report.json'
+    - mkdir -p knapsack/${CI_PROJECT_NAME}/
+    - wget -O $KNAPSACK_RSPEC_SUITE_REPORT_PATH http://${KNAPSACK_S3_BUCKET}.s3.amazonaws.com/$KNAPSACK_RSPEC_SUITE_REPORT_PATH || rm $KNAPSACK_RSPEC_SUITE_REPORT_PATH
+    - wget -O $KNAPSACK_SPINACH_SUITE_REPORT_PATH http://${KNAPSACK_S3_BUCKET}.s3.amazonaws.com/$KNAPSACK_SPINACH_SUITE_REPORT_PATH || rm $KNAPSACK_SPINACH_SUITE_REPORT_PATH
+    - '[[ -f $KNAPSACK_RSPEC_SUITE_REPORT_PATH ]] || echo "{}" > ${KNAPSACK_RSPEC_SUITE_REPORT_PATH}'
+    - '[[ -f $KNAPSACK_SPINACH_SUITE_REPORT_PATH ]] || echo "{}" > ${KNAPSACK_SPINACH_SUITE_REPORT_PATH}'
+
+update-knapsack:
+  <<: *knapsack-state
+  <<: *dedicated-runner
+  stage: post-test
+  script:
+    - scripts/merge-reports ${KNAPSACK_RSPEC_SUITE_REPORT_PATH} knapsack/${CI_PROJECT_NAME}/rspec_node_*.json
+    - scripts/merge-reports ${KNAPSACK_SPINACH_SUITE_REPORT_PATH} knapsack/${CI_PROJECT_NAME}/spinach_node_*.json
+    - '[[ -z ${KNAPSACK_S3_BUCKET} ]] || scripts/sync-reports put $KNAPSACK_S3_BUCKET $KNAPSACK_RSPEC_SUITE_REPORT_PATH $KNAPSACK_SPINACH_SUITE_REPORT_PATH'
+    - rm -f knapsack/${CI_PROJECT_NAME}/*_node_*.json
+  only:
+    - master@gitlab-org/gitlab-ce
+    - master@gitlab-org/gitlab-ee
+    - master@gitlab/gitlabhq
+    - master@gitlab/gitlab-ee
 
 setup-test-env:
   <<: *use-db
@@ -122,20 +141,6 @@ setup-test-env:
       - public/assets
       - tmp/tests
 
-update-knapsack:
-  <<: *knapsack-state
-  <<: *dedicated-runner
-  stage: post-test
-  script:
-    - scripts/merge-reports knapsack/rspec_report.json knapsack/rspec_node_*.json
-    - scripts/merge-reports knapsack/spinach_report.json knapsack/spinach_node_*.json
-    - rm -f knapsack/*_node_*.json
-  only:
-    - master@gitlab-org/gitlab-ce
-    - master@gitlab-org/gitlab-ee
-    - master@gitlab/gitlabhq
-    - master@gitlab/gitlab-ee
-
 rspec 0 20: *rspec-knapsack
 rspec 1 20: *rspec-knapsack
 rspec 2 20: *rspec-knapsack
@@ -206,10 +211,9 @@ rake ee_compat_check:
     - /^[\d-]+-stable(-ee)?$/
   allow_failure: yes
   cache:
-    key: "ruby233-ee_compat_check_repo"
+    key: "ee_compat_check_repo"
     paths:
-      - ee_compat_check/repo/
-      - vendor/ruby
+      - ee_compat_check/ee-repo/
   artifacts:
     name: "${CI_JOB_NAME}_${CI_COMIT_REF_NAME}_${CI_COMMIT_SHA}"
     when: on_failure
@@ -277,22 +281,46 @@ rake karma:
   stage: test
   <<: *use-db
   <<: *dedicated-runner
+  variables:
+    BABEL_ENV: "coverage"
   script:
     - bundle exec rake karma
+  coverage: '/^Statements *: (\d+\.\d+%)/'
   artifacts:
     name: coverage-javascript
     expire_in: 31d
     paths:
     - coverage-javascript/
 
-lint-doc:
+docs:check:apilint:
+  image: "phusion/baseimage"
   stage: test
   <<: *dedicated-runner
-  image: "phusion/baseimage:latest"
+  variables:
+    GIT_DEPTH: "3"
+  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
+  variables:
+    GIT_DEPTH: "3"
+  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
@@ -310,7 +338,7 @@ bundler:audit:
     - master@gitlab/gitlabhq
     - master@gitlab/gitlab-ee
   script:
-    - "bundle exec bundle-audit check --update"
+    - "bundle exec bundle-audit check --update --ignore CVE-2016-4658"
 
 migration paths:
   stage: test
@@ -331,6 +359,7 @@ migration paths:
     - bundle install --without postgres production --jobs $(nproc) $FLAGS --retry=3
     - bundle exec rake db:drop db:create db:schema:load db:seed_fu
     - git checkout $CI_COMMIT_SHA
+    - bundle install --without postgres production --jobs $(nproc) $FLAGS --retry=3
     - source scripts/prepare_build.sh
     - bundle exec rake db:migrate
 
@@ -343,6 +372,7 @@ coverage:
     USE_BUNDLE_INSTALL: "true"
   script:
     - bundle exec scripts/merge-simplecov
+  coverage: '/LOC \((\d+\.\d+%)\) covered.$/'
   artifacts:
     name: coverage
     expire_in: 31d
@@ -389,9 +419,11 @@ trigger_docs:
   cache: {}
   artifacts: {}
   script:
-    - "curl -X POST -F token=${DOCS_TRIGGER_TOKEN} -F ref=master -F variables[PROJECT]=ce https://gitlab.com/api/v3/projects/1794617/trigger/builds"
+    - "HTTP_STATUS=$(curl -X POST -F token=${DOCS_TRIGGER_TOKEN} -F ref=master -F variables[PROJECT]=${CI_PROJECT_NAME} --silent --output curl.log --write-out '%{http_code}' https://gitlab.com/api/v3/projects/1794617/trigger/builds)"
+    - if [ "${HTTP_STATUS}" -ne "201" ]; then echo "Error ${HTTP_STATUS}"; cat curl.log; echo; exit 1; fi
   only:
     - master@gitlab-org/gitlab-ce
+    - master@gitlab-org/gitlab-ee
 
 # Notify slack in the end
 notify:slack:

CONTRIBUTING.md

@@ -82,7 +82,7 @@ If a contributor is no longer actively working on a submitted merge request
 we can decide that the merge request will be finished by one of our
 [Merge request coaches][team] or close the merge request. We make this decision
 based on how important the change is for our product vision. If a Merge request
-coach is going to finish the merge request we assign the 
+coach is going to finish the merge request we assign the
 ~"coach will finish" label.
 
 ## Helping others
@@ -314,9 +314,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 +379,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
@@ -479,8 +482,7 @@ merge request:
 1.  [Rails](https://github.com/bbatsov/rails-style-guide)
 1.  [Newlines styleguide][newlines-styleguide]
 1.  [Testing](doc/development/testing.md)
-1.  [JavaScript (ES6)](https://github.com/airbnb/javascript)
-1.  [JavaScript (ES5)](https://github.com/airbnb/javascript/tree/es5-deprecated/es5)
+1.  [JavaScript styleguide][js-styleguide]
 1.  [SCSS styleguide][scss-styleguide]
 1.  [Shell commands](doc/development/shell_commands.md) created by GitLab
     contributors to enhance security
@@ -549,13 +551,13 @@ available at [http://contributor-covenant.org/version/1/1/0/](http://contributor
 [rss-naming]: https://github.com/bbatsov/ruby-style-guide/blob/master/README.md#naming
 [changelog]: doc/development/changelog.md "Generate a changelog entry"
 [doc-styleguide]: doc/development/doc_styleguide.md "Documentation styleguide"
-[scss-styleguide]: doc/development/scss_styleguide.md "SCSS styleguide"
+[js-styleguide]: doc/development/fe_guide/style_guide_js.md "JavaScript styleguide"
+[scss-styleguide]: doc/development/fe_guide/style_guide_scss.md "SCSS styleguide"
 [newlines-styleguide]: doc/development/newlines_styleguide.md "Newlines styleguide"
 [UX Guide for GitLab]: http://docs.gitlab.com/ce/development/ux_guide/
 [license-finder-doc]: doc/development/licensing.md
 [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.3.0
+0.4.0

GITLAB_SHELL_VERSION

-5.0.0
+5.0.2

GITLAB_WORKHORSE_VERSION

-1.4.1
+1.4.2

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'
@@ -63,7 +63,7 @@ gem 'gitlab_omniauth-ldap', '~> 1.2.1', require: 'omniauth-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'
@@ -244,7 +244,7 @@ gem 'net-ssh', '~> 3.0.1'
 gem 'base32', '~> 0.3.0'
 
 # Sentry integration
-gem 'sentry-raven', '~> 2.0.0'
+gem 'sentry-raven', '~> 2.4.0'
 
 gem 'premailer-rails', '~> 1.9.0'
 
@@ -257,15 +257,14 @@ end
 
 group :development do
   gem 'foreman', '~> 0.78.0'
-  gem 'brakeman', '~> 3.4.0', require: false
+  gem 'brakeman', '~> 3.6.0', require: false
 
   gem 'letter_opener_web', '~> 1.3.0'
-  gem 'bullet', '~> 5.2.0', require: false
+  gem 'bullet', '~> 5.5.0', require: false
   gem 'rblineprof', '~> 0.3.6', platform: :mri, require: false
-  gem 'web-console', '~> 2.0'
 
   # Better errors handler
-  gem 'better_errors', '~> 1.0.1'
+  gem 'better_errors', '~> 2.1.0'
   gem 'binding_of_caller', '~> 0.7.2'
 
   # thin instead webrick
@@ -297,7 +296,7 @@ group :development, :test do
   gem 'capybara-screenshot', '~> 1.0.0'
   gem 'poltergeist', '~> 1.9.0'
 
-  gem 'spring', '~> 1.7.0'
+  gem 'spring', '~> 2.0.0'
   gem 'spring-commands-rspec', '~> 1.0.4'
   gem 'spring-commands-spinach', '~> 1.1.0'
 
@@ -305,8 +304,8 @@ group :development, :test do
   gem 'rubocop-rspec', '~> 1.12.0', require: false
   gem 'scss_lint', '~> 0.47.0', require: false
   gem 'haml_lint', '~> 0.21.0', require: false
-  gem 'simplecov', '0.12.0', require: false
-  gem 'flay', '~> 2.6.1', require: false
+  gem 'simplecov', '~> 0.14.0', require: false
+  gem 'flay', '~> 2.8.0', require: false
   gem 'bundler-audit', '~> 0.5.0', require: false
 
   gem 'benchmark-ips', '~> 2.3.0', require: false
@@ -323,10 +322,11 @@ group :test do
   gem 'shoulda-matchers', '~> 2.8.0', require: false
   gem 'email_spec', '~> 1.6.0'
   gem 'json-schema', '~> 2.6.2'
-  gem 'webmock', '~> 1.21.0'
+  gem 'webmock', '~> 1.24.0'
   gem 'test_after_commit', '~> 1.1'
   gem 'sham_rack', '~> 1.3.6'
   gem 'timecop', '~> 0.8.0'
+  gem 'concurrent-ruby', '~> 1.0.5'
 end
 
 gem 'octokit', '~> 4.6.2'
@@ -352,4 +352,4 @@ gem 'vmstat', '~> 2.3.0'
 gem 'sys-filesystem', '~> 1.1.6'
 
 # Gitaly GRPC client
-gem 'gitaly', '~> 0.2.1'
+gem 'gitaly', '~> 0.5.0'

Gemfile.lock

@@ -75,19 +75,20 @@ GEM
     base32 (0.3.2)
     bcrypt (3.1.11)
     benchmark-ips (2.3.0)
-    better_errors (1.0.1)
+    better_errors (2.1.1)
       coderay (>= 1.0.0)
       erubis (>= 2.6.6)
+      rack (>= 0.9.0)
     bindata (2.3.5)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
     bootstrap-sass (3.3.6)
       autoprefixer-rails (>= 5.2.1)
       sass (>= 3.3.4)
-    brakeman (3.4.1)
+    brakeman (3.6.1)
     browser (2.2.0)
     builder (3.2.3)
-    bullet (5.2.0)
+    bullet (5.5.1)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.10.0)
     bundler-audit (0.5.0)
@@ -101,7 +102,7 @@ GEM
       rack (>= 1.0.0)
       rack-test (>= 0.5.4)
       xpath (~> 2.0)
-    capybara-screenshot (1.0.11)
+    capybara-screenshot (1.0.14)
       capybara (>= 1.0, < 3)
       launchy
     carrierwave (0.11.2)
@@ -117,7 +118,7 @@ GEM
       numerizer (~> 0.1.1)
     chunky_png (1.3.5)
     cliver (0.3.2)
-    coderay (1.1.0)
+    coderay (1.1.1)
     coercible (1.0.0)
       descendants_tracker (~> 0.0.1)
     coffee-rails (4.1.1)
@@ -128,7 +129,7 @@ GEM
       execjs
     coffee-script-source (1.10.0)
     colorize (0.7.7)
-    concurrent-ruby (1.0.4)
+    concurrent-ruby (1.0.5)
     connection_pool (2.2.1)
     crack (0.4.3)
       safe_yaml (~> 1.0.0)
@@ -200,7 +201,9 @@ GEM
       multi_json
     ffaker (2.4.0)
     ffi (1.9.10)
-    flay (2.6.1)
+    flay (2.8.1)
+      erubis (~> 2.7.0)
+      path_expander (~> 1.0)
       ruby_parser (~> 3.0)
       sexp_processor (~> 4.0)
     flowdock (0.7.1)
@@ -250,7 +253,7 @@ GEM
       json
     get_process_mem (0.2.0)
     gherkin-ruby (0.3.2)
-    gitaly (0.2.1)
+    gitaly (0.5.0)
       google-protobuf (~> 3.1)
       grpc (~> 1.0)
     github-linguist (4.7.6)
@@ -285,9 +288,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
@@ -304,7 +307,7 @@ GEM
       multi_json (~> 1.10)
       retriable (~> 1.4)
       signet (~> 0.6)
-    google-protobuf (3.2.0)
+    google-protobuf (3.2.0.2)
     googleauth (0.5.1)
       faraday (~> 0.9)
       jwt (~> 1.4)
@@ -340,6 +343,7 @@ GEM
       temple (~> 0.7.6)
       thor
       tilt
+    hashdiff (0.3.2)
     hashie (3.5.5)
     health_check (2.6.0)
       rails (>= 4.0)
@@ -518,6 +522,7 @@ GEM
       activerecord (>= 4.0, < 5.1)
     parser (2.4.0.0)
       ast (~> 2.2)
+    path_expander (1.0.1)
     pg (0.18.4)
     poltergeist (1.9.0)
       capybara (~> 2.1)
@@ -532,14 +537,14 @@ GEM
     premailer-rails (1.9.2)
       actionmailer (>= 3, < 6)
       premailer (~> 1.7, >= 1.7.9)
-    pry (0.10.3)
+    pry (0.10.4)
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
       slop (~> 3.4)
-    pry-byebug (3.4.1)
+    pry-byebug (3.4.2)
       byebug (~> 9.0)
       pry (~> 0.10)
-    pry-rails (0.3.4)
+    pry-rails (0.3.5)
       pry (>= 0.9.10)
     pyu-ruby-sasl (0.0.3.3)
     rack (1.6.5)
@@ -671,13 +676,13 @@ GEM
     ruby-progressbar (1.8.1)
     ruby-saml (1.4.1)
       nokogiri (>= 1.5.10)
-    ruby_parser (3.8.2)
+    ruby_parser (3.8.4)
       sexp_processor (~> 4.1)
     rubyntlm (0.5.2)
     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)
@@ -700,10 +705,10 @@ GEM
       activesupport (>= 3.1)
     select2-rails (3.5.9.3)
       thor (~> 0.14)
-    sentry-raven (2.0.2)
-      faraday (>= 0.7.6, < 0.10.x)
+    sentry-raven (2.4.0)
+      faraday (>= 0.7.6, < 1.0)
     settingslogic (2.0.9)
-    sexp_processor (4.7.0)
+    sexp_processor (4.8.0)
     sham_rack (1.3.6)
       rack
     shoulda-matchers (2.8.0)
@@ -724,7 +729,7 @@ GEM
       faraday (~> 0.9)
       jwt (~> 1.5)
       multi_json (~> 1.10)
-    simplecov (0.12.0)
+    simplecov (0.14.1)
       docile (~> 1.1.0)
       json (>= 1.8, < 3)
       simplecov-html (~> 0.10.0)
@@ -741,7 +746,8 @@ GEM
       spinach (>= 0.4)
     spinach-rerun-reporter (0.0.2)
       spinach (~> 0.8)
-    spring (1.7.2)
+    spring (2.0.1)
+      activesupport (>= 4.2)
     spring-commands-rspec (1.0.4)
       spring (>= 0.9.1)
     spring-commands-spinach (1.1.0)
@@ -813,14 +819,10 @@ GEM
     vmstat (2.3.0)
     warden (1.2.6)
       rack (>= 1.0)
-    web-console (2.3.0)
-      activemodel (>= 4.0)
-      binding_of_caller (>= 0.7.2)
-      railties (>= 4.0)
-      sprockets-rails (>= 2.0, < 4.0)
-    webmock (1.21.0)
+    webmock (1.24.6)
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
+      hashdiff
     webpack-rails (0.9.9)
       rails (>= 3.2.0)
     websocket-driver (0.6.3)
@@ -854,12 +856,12 @@ DEPENDENCIES
   babosa (~> 1.0.2)
   base32 (~> 0.3.0)
   benchmark-ips (~> 2.3.0)
-  better_errors (~> 1.0.1)
+  better_errors (~> 2.1.0)
   binding_of_caller (~> 0.7.2)
   bootstrap-sass (~> 3.3.0)
-  brakeman (~> 3.4.0)
+  brakeman (~> 3.6.0)
   browser (~> 2.2)
-  bullet (~> 5.2.0)
+  bullet (~> 5.5.0)
   bundler-audit (~> 0.5.0)
   capybara (~> 2.6.2)
   capybara-screenshot (~> 1.0.0)
@@ -868,6 +870,7 @@ DEPENDENCIES
   chronic (~> 0.10.2)
   chronic_duration (~> 0.10.6)
   coffee-rails (~> 4.1.0)
+  concurrent-ruby (~> 1.0.5)
   connection_pool (~> 2.0)
   creole (~> 0.5.0)
   d3_rails (~> 3.5.0)
@@ -884,7 +887,7 @@ DEPENDENCIES
   email_spec (~> 1.6.0)
   factory_girl_rails (~> 4.7.0)
   ffaker (~> 2.4)
-  flay (~> 2.6.1)
+  flay (~> 2.8.0)
   fog-aws (~> 0.9)
   fog-core (~> 1.40)
   fog-google (~> 0.5)
@@ -896,13 +899,13 @@ DEPENDENCIES
   fuubar (~> 2.0.0)
   gemnasium-gitlab-service (~> 0.2)
   gemojione (~> 3.0)
-  gitaly (~> 0.2.1)
+  gitaly (~> 0.5.0)
   github-linguist (~> 4.7.0)
   gitlab-flowdock-git-hook (~> 1.0.1)
   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)
@@ -984,24 +987,24 @@ 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)
   seed-fu (~> 2.3.5)
   select2-rails (~> 3.5.9)
-  sentry-raven (~> 2.0.0)
+  sentry-raven (~> 2.4.0)
   settingslogic (~> 2.0.9)
   sham_rack (~> 1.3.6)
   shoulda-matchers (~> 2.8.0)
   sidekiq (~> 4.2.7)
   sidekiq-cron (~> 0.4.4)
   sidekiq-limit_fetch (~> 3.4)
-  simplecov (= 0.12.0)
+  simplecov (~> 0.14.0)
   slack-notifier (~> 1.5.1)
   spinach-rails (~> 0.2.1)
   spinach-rerun-reporter (~> 0.0.2)
-  spring (~> 1.7.0)
+  spring (~> 2.0.0)
   spring-commands-rspec (~> 1.0.4)
   spring-commands-spinach (~> 1.1.0)
   sprockets (~> 3.7.0)
@@ -1022,8 +1025,7 @@ DEPENDENCIES
   version_sorter (~> 2.1.0)
   virtus (~> 1.0.1)
   vmstat (~> 2.3.0)
-  web-console (~> 2.0)
-  webmock (~> 1.21.0)
+  webmock (~> 1.24.0)
   webpack-rails (~> 0.9.9)
   wikicloth (= 0.8.1)
 

README.md

 # GitLab
 
 [![Build status](https://gitlab.com/gitlab-org/gitlab-ce/badges/master/build.svg)](https://gitlab.com/gitlab-org/gitlab-ce/commits/master)
-[![CE coverage report](https://gitlab.com/gitlab-org/gitlab-ce/badges/master/coverage.svg?job=coverage)](https://gitlab-org.gitlab.io/gitlab-ce/coverage-ruby)
+[![Overall test coverage](https://gitlab.com/gitlab-org/gitlab-ce/badges/master/coverage.svg)](https://gitlab.com/gitlab-org/gitlab-ce/pipelines)
 [![Code Climate](https://codeclimate.com/github/gitlabhq/gitlabhq.svg)](https://codeclimate.com/github/gitlabhq/gitlabhq)
 [![Core Infrastructure Initiative Best Practices](https://bestpractices.coreinfrastructure.org/projects/42/badge)](https://bestpractices.coreinfrastructure.org/projects/42)
 
+## Test coverage
+
+- [![Ruby coverage](https://gitlab.com/gitlab-org/gitlab-ce/badges/master/coverage.svg?job=coverage)](https://gitlab-org.gitlab.io/gitlab-ce/coverage-ruby) Ruby
+- [![JavaScript coverage](https://gitlab.com/gitlab-org/gitlab-ce/badges/master/coverage.svg?job=rake+karma)](https://gitlab-org.gitlab.io/gitlab-ce/coverage-javascript) JavaScript
+
 ## Canonical source
 
 The canonical source of GitLab Community Edition is [hosted on GitLab.com](https://gitlab.com/gitlab-org/gitlab-ce/).

VERSION

-8.18.0-pre
+9.1.0-pre

app/assets/images/icon-merge-request-unmerged.svg

-<svg width="12" height="15" viewBox="0 0 12 15" xmlns="http://www.w3.org/2000/svg"><path d="M10.267 11.028V5.167c-.028-.728-.318-1.372-.878-1.923-.56-.55-1.194-.85-1.922-.877h-.934V.5l-2.8 2.8 2.8 2.8V4.233h.934a.976.976 0 0 1 .644.29.88.88 0 0 1 .289.644v5.861a1.86 1.86 0 0 0 .933 3.472 1.86 1.86 0 0 0 .934-3.472zM3.733 3.3a1.86 1.86 0 0 0-1.866-1.867 1.86 1.86 0 0 0-.934 3.472v6.123a1.86 1.86 0 0 0 .933 3.472 1.86 1.86 0 0 0 .934-3.472V4.905c.55-.317.933-.914.933-1.605z" fill-rule="nonzero"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m5 5.563v4.875c1.024.4 1.75 1.397 1.75 2.563 0 1.519-1.231 2.75-2.75 2.75-1.519 0-2.75-1.231-2.75-2.75 0-1.166.726-2.162 1.75-2.563v-4.875c-1.024-.4-1.75-1.397-1.75-2.563 0-1.519 1.231-2.75 2.75-2.75 1.519 0 2.75 1.231 2.75 2.75 0 1.166-.726 2.162-1.75 2.563m-1 8.687c.69 0 1.25-.56 1.25-1.25 0-.69-.56-1.25-1.25-1.25-.69 0-1.25.56-1.25 1.25 0 .69.56 1.25 1.25 1.25m0-10c.69 0 1.25-.56 1.25-1.25 0-.69-.56-1.25-1.25-1.25-.69 0-1.25.56-1.25 1.25 0 .69.56 1.25 1.25 1.25"/><path d="m10.501 2c1.381.001 2.499 1.125 2.499 2.506v5.931c1.024.4 1.75 1.397 1.75 2.563 0 1.519-1.231 2.75-2.75 2.75-1.519 0-2.75-1.231-2.75-2.75 0-1.166.726-2.162 1.75-2.563v-5.931c0-.279-.225-.506-.499-.506v.926c0 .346-.244.474-.569.271l-2.952-1.844c-.314-.196-.325-.507 0-.71l2.952-1.844c.314-.196.569-.081.569.271v.93m1.499 12.25c.69 0 1.25-.56 1.25-1.25 0-.69-.56-1.25-1.25-1.25-.69 0-1.25.56-1.25 1.25 0 .69.56 1.25 1.25 1.25"/></svg>
\ No newline at end of file

app/assets/javascripts/activities.js

 /* eslint-disable no-param-reassign, class-methods-use-this */
 /* global Pager */
-/* global Cookies */
+
+import Cookies from 'js-cookie';
 
 class Activities {
   constructor() {

app/assets/javascripts/awards_handler.js

-/* global Cookies */
+import Cookies from 'js-cookie';
 
 import emojiMap from 'emojis/digests.json';
 import emojiAliases from 'emojis/aliases.json';

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,13 +18,13 @@
     // 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) {
       toggleContainer($(this).closest('.js-toggle-container'));
 
-      const targetTag = e.target.tagName.toLowerCase();
+      const targetTag = e.currentTarget.tagName.toLowerCase();
       if (targetTag === 'a' || targetTag === 'button') {
         e.preventDefault();
       }

app/assets/javascripts/blob/blob_ci_yaml.js

-/* eslint-disable no-param-reassign, comma-dangle */
-/* global Api */
-
-require('./template_selector');
-
-((global) => {
-  class BlobCiYamlSelector extends gl.TemplateSelector {
-    requestFile(query) {
-      return Api.gitlabCiYml(query.name, this.requestFileSuccess.bind(this));
-    }
-
-    requestFileSuccess(file) {
-      return super.requestFileSuccess(file);
-    }
-  }
-
-  global.BlobCiYamlSelector = BlobCiYamlSelector;
-
-  class BlobCiYamlSelectors {
-    constructor({ editor, $dropdowns } = {}) {
-      this.editor = editor;
-      this.$dropdowns = $dropdowns || $('.js-gitlab-ci-yml-selector');
-      this.initSelectors();
-    }
-
-    initSelectors() {
-      const editor = this.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
-        });
-      });
-    }
-  }
-
-  global.BlobCiYamlSelectors = BlobCiYamlSelectors;
-})(window.gl || (window.gl = {}));

app/assets/javascripts/blob/blob_dockerfile_selector.js

-/* global Api */
-
-require('./template_selector');
-
-(() => {
-  const global = window.gl || (window.gl = {});
-
-  class BlobDockerfileSelector extends gl.TemplateSelector {
-    requestFile(query) {
-      return Api.dockerfileYml(query.name, this.requestFileSuccess.bind(this));
-    }
-
-    requestFileSuccess(file) {
-      return super.requestFileSuccess(file);
-    }
-  }
-
-  global.BlobDockerfileSelector = BlobDockerfileSelector;
-})();

app/assets/javascripts/blob/blob_dockerfile_selectors.js

-(() => {
-  const global = window.gl || (window.gl = {});
-
-  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 gl.BlobDockerfileSelector({
-          editor,
-          pattern: /(Dockerfile)/,
-          data: $dropdown.data('data'),
-          wrapper: $dropdown.closest('.js-dockerfile-selector-wrap'),
-          dropdown: $dropdown,
-        });
-      });
-    }
-  }
-
-  global.BlobDockerfileSelectors = BlobDockerfileSelectors;
-})();

app/assets/javascripts/blob/blob_file_dropzone.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, camelcase, object-shorthand, quotes, comma-dangle, prefer-arrow-callback, no-unused-vars, prefer-template, no-useless-escape, no-alert, max-len */
+/* eslint-disable func-names, object-shorthand, prefer-arrow-callback */
 /* global Dropzone */
 
-(function() {
-  this.BlobFileDropzone = (function() {
-    function BlobFileDropzone(form, method) {
-      var dropzone, form_dropzone, submitButton;
-      form_dropzone = form.find('.dropzone');
-      Dropzone.autoDiscover = false;
-      dropzone = form_dropzone.dropzone({
-        autoDiscover: false,
-        autoProcessQueue: false,
-        url: form.attr('action'),
-        // Rails uses a hidden input field for PUT
-        // http://stackoverflow.com/questions/21056482/how-to-set-method-put-in-form-tag-in-rails
-        method: method,
-        clickable: true,
-        uploadMultiple: false,
-        paramName: "file",
-        maxFilesize: gon.max_file_size || 10,
-        parallelUploads: 1,
-        maxFiles: 1,
-        addRemoveLinks: true,
-        previewsContainer: '.dropzone-previews',
-        headers: {
-          "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
-        },
-        init: function() {
-          this.on('addedfile', function(file) {
-            $('.dropzone-alerts').html('').hide();
-          });
-          this.on('success', function(header, response) {
-            window.location.href = response.filePath;
-          });
-          this.on('maxfilesexceeded', function(file) {
-            this.removeFile(file);
-          });
-          return this.on('sending', function(file, xhr, formData) {
-            formData.append('target_branch', form.find('input[name="target_branch"]').val());
-            formData.append('create_merge_request', form.find('.js-create-merge-request').val());
-            formData.append('commit_message', form.find('.js-commit-message').val());
-          });
-        },
-        // Override behavior of adding error underneath preview
-        error: function(file, errorMessage) {
-          var stripped;
-          stripped = $("<div/>").html(errorMessage).text();
-          $('.dropzone-alerts').html('Error uploading file: \"' + stripped + '\"').show();
+export default class BlobFileDropzone {
+  constructor(form, method) {
+    const formDropzone = form.find('.dropzone');
+    Dropzone.autoDiscover = false;
+
+    const dropzone = formDropzone.dropzone({
+      autoDiscover: false,
+      autoProcessQueue: false,
+      url: form.attr('action'),
+      // Rails uses a hidden input field for PUT
+      // http://stackoverflow.com/questions/21056482/how-to-set-method-put-in-form-tag-in-rails
+      method: method,
+      clickable: true,
+      uploadMultiple: false,
+      paramName: 'file',
+      maxFilesize: gon.max_file_size || 10,
+      parallelUploads: 1,
+      maxFiles: 1,
+      addRemoveLinks: true,
+      previewsContainer: '.dropzone-previews',
+      headers: {
+        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
+      },
+      init: function () {
+        this.on('addedfile', function () {
+          $('.dropzone-alerts').html('').hide();
+        });
+        this.on('success', function (header, response) {
+          window.location.href = response.filePath;
+        });
+        this.on('maxfilesexceeded', function (file) {
           this.removeFile(file);
-        }
-      });
-      submitButton = form.find('#submit-all')[0];
-      submitButton.addEventListener('click', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (dropzone[0].dropzone.getQueuedFiles().length === 0) {
-          alert("Please select a file");
-        }
-        dropzone[0].dropzone.processQueue();
-        return false;
-      });
-    }
+        });
+        this.on('sending', function (file, xhr, formData) {
+          formData.append('target_branch', form.find('input[name="target_branch"]').val());
+          formData.append('create_merge_request', form.find('.js-create-merge-request').val());
+          formData.append('commit_message', form.find('.js-commit-message').val());
+        });
+      },
+      // Override behavior of adding error underneath preview
+      error: function (file, errorMessage) {
+        const stripped = $('<div/>').html(errorMessage).text();
+        $('.dropzone-alerts').html(`Error uploading file: "${stripped}"`).show();
+        this.removeFile(file);
+      },
+    });
 
-    return BlobFileDropzone;
-  })();
-}).call(window);
+    const submitButton = form.find('#submit-all')[0];
+    submitButton.addEventListener('click', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (dropzone[0].dropzone.getQueuedFiles().length === 0) {
+        // eslint-disable-next-line no-alert
+        alert('Please select a file');
+      }
+      dropzone[0].dropzone.processQueue();
+      return false;
+    });
+  }
+}

app/assets/javascripts/blob/blob_gitignore_selector.js

-/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-rest-params */
-/* global Api */
-
-require('./template_selector');
-
-(function() {
-  var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
-    hasProp = {}.hasOwnProperty;
-
-  this.BlobGitignoreSelector = (function(superClass) {
-    extend(BlobGitignoreSelector, superClass);
-
-    function BlobGitignoreSelector() {
-      return BlobGitignoreSelector.__super__.constructor.apply(this, arguments);
-    }
-
-    BlobGitignoreSelector.prototype.requestFile = function(query) {
-      return Api.gitignoreText(query.name, this.requestFileSuccess.bind(this));
-    };
-
-    return BlobGitignoreSelector;
-  })(gl.TemplateSelector);
-}).call(window);

app/assets/javascripts/blob/blob_gitignore_selectors.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-unused-expressions, no-cond-assign, no-sequences, comma-dangle, max-len */
-/* global BlobGitignoreSelector */
-
-(function() {
-  this.BlobGitignoreSelectors = (function() {
-    function BlobGitignoreSelectors(opts) {
-      var ref;
-      this.$dropdowns = (ref = opts.$dropdowns) != null ? ref : $('.js-gitignore-selector'), this.editor = opts.editor;
-      this.$dropdowns.each((function(_this) {
-        return function(i, dropdown) {
-          var $dropdown;
-          $dropdown = $(dropdown);
-          return new BlobGitignoreSelector({
-            pattern: /(.gitignore)/,
-            data: $dropdown.data('data'),
-            wrapper: $dropdown.closest('.js-gitignore-selector-wrap'),
-            dropdown: $dropdown,
-            editor: _this.editor
-          });
-        };
-      })(this));
-    }
-
-    return BlobGitignoreSelectors;
-  })();
-}).call(window);

app/assets/javascripts/blob/blob_license_selector.js

-/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-rest-params, comma-dangle */
-/* global Api */
-
-require('./template_selector');
-
-(function() {
-  var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
-    hasProp = {}.hasOwnProperty;
-
-  this.BlobLicenseSelector = (function(superClass) {
-    extend(BlobLicenseSelector, superClass);
-
-    function BlobLicenseSelector() {
-      return BlobLicenseSelector.__super__.constructor.apply(this, arguments);
-    }
-
-    BlobLicenseSelector.prototype.requestFile = function(query) {
-      var data;
-      data = {
-        project: this.dropdown.data('project'),
-        fullname: this.dropdown.data('fullname')
-      };
-      return Api.licenseText(query.id, data, this.requestFileSuccess.bind(this));
-    };
-
-    return BlobLicenseSelector;
-  })(gl.TemplateSelector);
-}).call(window);

app/assets/javascripts/blob/blob_license_selectors.js

-/* eslint-disable no-unused-vars, no-param-reassign */
-/* global BlobLicenseSelector */
-
-((global) => {
-  class BlobLicenseSelectors {
-    constructor({ $dropdowns, editor }) {
-      this.$dropdowns = $('.js-license-selector');
-      this.editor = 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,
-        });
-      });
-    }
-  }
-
-  global.BlobLicenseSelectors = BlobLicenseSelectors;
-})(window.gl || (window.gl = {}));

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/template_selector.js

-/* eslint-disable comma-dangle, object-shorthand, func-names, space-before-function-paren, arrow-parens, no-unused-vars, class-methods-use-this, no-var, consistent-return, no-param-reassign, max-len */
-
-((global) => {
-  class TemplateSelector {
-    constructor({ dropdown, data, pattern, wrapper, editor, fileEndpoint, $input } = {}) {
-      this.onClick = this.onClick.bind(this);
-      this.dropdown = dropdown;
-      this.data = data;
-      this.pattern = pattern;
-      this.wrapper = wrapper;
-      this.editor = editor;
-      this.fileEndpoint = fileEndpoint;
-      this.$input = $input || $('#file_name');
-      this.dropdownIcon = $('.fa-chevron-down', this.dropdown);
-      this.buildDropdown();
-      this.bindEvents();
-      this.onFilenameUpdate();
-
-      this.autosizeUpdateEvent = document.createEvent('Event');
-      this.autosizeUpdateEvent.initEvent('autosize:update', true, false);
-    }
-
-    buildDropdown() {
-      return this.dropdown.glDropdown({
-        data: this.data,
-        filterable: true,
-        selectable: true,
-        toggleLabel: this.toggleLabel,
-        search: {
-          fields: ['name']
-        },
-        clicked: this.onClick,
-        text: function(item) {
-          return item.name;
-        }
-      });
-    }
-
-    bindEvents() {
-      return this.$input.on('keyup blur', (e) => this.onFilenameUpdate());
-    }
-
-    toggleLabel(item) {
-      return item.name;
-    }
-
-    onFilenameUpdate() {
-      var filenameMatches;
-      if (!this.$input.length) {
-        return;
-      }
-      filenameMatches = this.pattern.test(this.$input.val().trim());
-      if (!filenameMatches) {
-        this.wrapper.addClass('hidden');
-        return;
-      }
-      return this.wrapper.removeClass('hidden');
-    }
-
-    onClick(item, el, e) {
-      e.preventDefault();
-      return this.requestFile(item);
-    }
-
-    requestFile(item) {
-      // This `requestFile` method is an abstract method that should
-      // be added by all subclasses.
-    }
-
-    // To be implemented on the extending class
-    // e.g.
-    // Api.gitignoreText item.name, @requestFileSuccess.bind(@)
-    requestFileSuccess(file, { skipFocus } = {}) {
-      if (!file) return;
-
-      const oldValue = this.editor.getValue();
-      const newValue = file.content;
-
-      this.editor.setValue(newValue, 1);
-      if (!skipFocus) this.editor.focus();
-
-      if (this.editor instanceof jQuery) {
-        this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
-      }
-    }
-
-    startLoadingSpinner() {
-      this.dropdownIcon
-        .addClass('fa-spinner fa-spin')
-        .removeClass('fa-chevron-down');
-    }
-
-    stopLoadingSpinner() {
-      this.dropdownIcon
-        .addClass('fa-chevron-down')
-        .removeClass('fa-spinner fa-spin');
-    }
-  }
-
-  global.TemplateSelector = TemplateSelector;
-})(window.gl || (window.gl = {}));

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/template_selector.js

+/* eslint-disable class-methods-use-this, no-unused-vars */
+
+export default class TemplateSelector {
+  constructor({ dropdown, data, pattern, wrapper, editor, $input } = {}) {
+    this.pattern = pattern;
+    this.editor = editor;
+    this.dropdown = dropdown;
+    this.$dropdownContainer = wrapper;
+    this.$filenameInput = $input || $('#file_name');
+    this.$dropdownIcon = $('.fa-chevron-down', dropdown);
+
+    this.initDropdown(dropdown, data);
+    this.listenForFilenameInput();
+    this.renderMatchedDropdown();
+    this.initAutosizeUpdateEvent();
+  }
+
+  initDropdown(dropdown, data) {
+    return $(dropdown).glDropdown({
+      data,
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: (item, el, e) => this.fetchFileTemplate(item, el, e),
+      text: item => item.name,
+    });
+  }
+
+  initAutosizeUpdateEvent() {
+    this.autosizeUpdateEvent = document.createEvent('Event');
+    this.autosizeUpdateEvent.initEvent('autosize:update', true, false);
+  }
+
+  listenForFilenameInput() {
+    return this.$filenameInput.on('keyup blur', e => this.renderMatchedDropdown(e));
+  }
+
+  renderMatchedDropdown() {
+    if (!this.$filenameInput.length) {
+      return null;
+    }
+
+    const filenameMatches = this.pattern.test(this.$filenameInput.val().trim());
+
+    if (!filenameMatches) {
+      return this.$dropdownContainer.addClass('hidden');
+    }
+    return this.$dropdownContainer.removeClass('hidden');
+  }
+
+  fetchFileTemplate(item, el, e) {
+    e.preventDefault();
+    return this.requestFile(item);
+  }
+
+  requestFile(item) {
+    // This `requestFile` method is an abstract method that should
+    // be added by all subclasses.
+  }
+
+  // To be implemented on the extending class
+  // e.g. Api.gitlabCiYml(query.name, file => this.setEditorContent(file));
+
+  setEditorContent(file, { skipFocus } = {}) {
+    if (!file) return;
+
+    const newValue = file.content;
+
+    this.editor.setValue(newValue, 1);
+
+    if (!skipFocus) this.editor.focus();
+
+    if (this.editor instanceof jQuery) {
+      this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
+    }
+  }
+
+  startLoadingSpinner() {
+    this.$dropdownIcon
+      .addClass('fa-spinner fa-spin')
+      .removeClass('fa-chevron-down');
+  }
+
+  stopLoadingSpinner() {
+    this.$dropdownIcon
+      .addClass('fa-chevron-down')
+      .removeClass('fa-spinner fa-spin');
+  }
+}

app/assets/javascripts/blob_edit/blob_bundle.js

+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, vars-on-top, no-unused-vars, no-new, max-len */
+/* global EditBlob */
+/* global NewCommitForm */
+
+import EditBlob from './edit_blob';
+import BlobFileDropzone from '../blob/blob_file_dropzone';
+
+$(() => {
+  const editBlobForm = $('.js-edit-blob-form');
+  const uploadBlobForm = $('.js-upload-blob-form');
+
+  if (editBlobForm.length) {
+    const urlRoot = editBlobForm.data('relative-url-root');
+    const assetsPath = editBlobForm.data('assets-prefix');
+    const blobLanguage = editBlobForm.data('blob-language');
+
+    new EditBlob(`${urlRoot}${assetsPath}`, blobLanguage);
+    new NewCommitForm(editBlobForm);
+  }
+
+  if (uploadBlobForm.length) {
+    const method = uploadBlobForm.data('method');
+
+    new BlobFileDropzone(uploadBlobForm, method);
+    new NewCommitForm(uploadBlobForm);
+
+    window.gl.utils.disableButtonIfEmptyField(
+      uploadBlobForm.find('.js-commit-message'),
+      '.btn-upload-file',
+    );
+  }
+});

app/assets/javascripts/blob_edit/blob_edit_bundle.js

-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, vars-on-top, no-unused-vars, no-new, max-len */
-/* global EditBlob */
-/* global NewCommitForm */
-
-require('./edit_blob');
-
-(function() {
-  $(function() {
-    var url = $(".js-edit-blob-form").data("relative-url-root");
-    url += $(".js-edit-blob-form").data("assets-prefix");
-
-    var blob = new EditBlob(url, $('.js-edit-blob-form').data('blob-language'));
-    new NewCommitForm($('.js-edit-blob-form'));
-  });
-}).call(window);

app/assets/javascripts/blob_edit/edit_blob.js

-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, camelcase, no-param-reassign, quotes, prefer-template, no-new, comma-dangle, one-var, one-var-declaration-per-line, prefer-arrow-callback, no-else-return, no-unused-vars, max-len */
 /* global ace */
-/* global BlobGitignoreSelectors */
-
-(function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
-
-  this.EditBlob = (function() {
-    function EditBlob(assets_path, ace_mode) {
-      if (ace_mode == null) {
-        ace_mode = null;
-      }
-      this.editModeLinkClickHandler = bind(this.editModeLinkClickHandler, this);
-      ace.config.set("modePath", assets_path + "/ace");
-      ace.config.loadModule("ace/ext/searchbox");
-      this.editor = ace.edit("editor");
-      this.editor.focus();
-      if (ace_mode) {
-        this.editor.getSession().setMode("ace/mode/" + ace_mode);
-      }
-      $('form').submit((function(_this) {
-        return function() {
-          return $("#file-content").val(_this.editor.getValue());
-        };
-      // Before a form submission, move the content from the Ace editor into the
-      // submitted textarea
-      })(this));
-      this.initModePanesAndLinks();
-      this.initSoftWrap();
-      new gl.BlobLicenseSelectors({
-        editor: this.editor
-      });
+
+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';
+
+export default class EditBlob {
+  constructor(assetsPath, aceMode) {
+    this.configureAceEditor(aceMode, assetsPath);
+    this.prepFileContentForSubmit();
+    this.initModePanesAndLinks();
+    this.initSoftWrap();
+    this.initFileSelectors();
+  }
+
+  configureAceEditor(aceMode, assetsPath) {
+    ace.config.set('modePath', `${assetsPath}/ace`);
+    ace.config.loadModule('ace/ext/searchbox');
+
+    this.editor = ace.edit('editor');
+    this.editor.focus();
+
+    if (aceMode) {
+      this.editor.getSession().setMode(`ace/mode/${aceMode}`);
+    }
+  }
+
+  prepFileContentForSubmit() {
+    $('form').submit(() => {
+      $('#file-content').val(this.editor.getValue());
+    });
+  }
+
+  initFileSelectors() {
+    this.blobTemplateSelectors = [
+      new BlobLicenseSelectors({
+        editor: this.editor,
+      }),
       new BlobGitignoreSelectors({
-        editor: this.editor
-      });
-      new gl.BlobCiYamlSelectors({
-        editor: this.editor
-      });
-      new gl.BlobDockerfileSelectors({
-        editor: this.editor
+        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');
+    this.$editModeLinks.on('click', e => this.editModeLinkClickHandler(e));
+  }
+
+  editModeLinkClickHandler(e) {
+    e.preventDefault();
+
+    const currentLink = $(e.target);
+    const paneId = currentLink.attr('href');
+    const currentPane = this.$editModePanes.filter(paneId);
+
+    this.$editModeLinks.parent().removeClass('active hover');
+
+    currentLink.parent().addClass('active hover');
+
+    this.$editModePanes.hide();
+
+    currentPane.fadeIn(200);
+
+    if (paneId === '#preview') {
+      this.$toggleButton.hide();
+      return $.post(currentLink.data('preview-url'), {
+        content: this.editor.getValue(),
+      }, (response) => {
+        currentPane.empty().append(response);
+        return currentPane.renderGFM();
       });
     }
 
-    EditBlob.prototype.initModePanesAndLinks = function() {
-      this.$editModePanes = $(".js-edit-mode-pane");
-      this.$editModeLinks = $(".js-edit-mode a");
-      return this.$editModeLinks.click(this.editModeLinkClickHandler);
-    };
-
-    EditBlob.prototype.editModeLinkClickHandler = function(event) {
-      var currentLink, currentPane, paneId;
-      event.preventDefault();
-      currentLink = $(event.target);
-      paneId = currentLink.attr("href");
-      currentPane = this.$editModePanes.filter(paneId);
-      this.$editModeLinks.parent().removeClass("active hover");
-      currentLink.parent().addClass("active hover");
-      this.$editModePanes.hide();
-      currentPane.fadeIn(200);
-      if (paneId === "#preview") {
-        this.$toggleButton.hide();
-        return $.post(currentLink.data("preview-url"), {
-          content: this.editor.getValue()
-        }, function(response) {
-          currentPane.empty().append(response);
-          return currentPane.renderGFM();
-        });
-      } else {
-        this.$toggleButton.show();
-        return this.editor.focus();
-      }
-    };
-
-    EditBlob.prototype.initSoftWrap = function() {
-      this.isSoftWrapped = false;
-      this.$toggleButton = $('.soft-wrap-toggle');
-      this.$toggleButton.on('click', this.toggleSoftWrap.bind(this));
-    };
-
-    EditBlob.prototype.toggleSoftWrap = function(e) {
-      this.isSoftWrapped = !this.isSoftWrapped;
-      this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
-      this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
-    };
-
-    return EditBlob;
-  })();
-}).call(window);
+    this.$toggleButton.show();
+
+    return this.editor.focus();
+  }
+
+  initSoftWrap() {
+    this.isSoftWrapped = false;
+    this.$toggleButton = $('.soft-wrap-toggle');
+    this.$toggleButton.on('click', () => this.toggleSoftWrap());
+  }
+
+  toggleSoftWrap() {
+    this.isSoftWrapped = !this.isSoftWrapped;
+    this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
+    this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
+  }
+}

app/assets/javascripts/boards/boards_bundle.js

 /* eslint-disable one-var, quote-props, comma-dangle, space-before-function-paren */
-/* global Vue */
 /* global BoardService */
 
+import Vue from 'vue';
+import VueResource from 'vue-resource';
 import FilteredSearchBoards from './filtered_search_boards';
 import eventHub from './eventhub';
 
-window.Vue = require('vue');
-window.Vue.use(require('vue-resource'));
 require('./models/issue');
 require('./models/label');
 require('./models/list');
@@ -24,6 +23,8 @@ require('./components/new_list_dropdown');
 require('./components/modal/index');
 require('../vue_shared/vue_resource_interceptor');
 
+Vue.use(VueResource);
+
 $(() => {
   const $boardApp = document.getElementById('board-app');
   const Store = gl.issueBoards.BoardsStore;
@@ -78,7 +79,7 @@ $(() => {
           resp.json().forEach((board) => {
             const list = Store.addList(board);
 
-            if (list.type === 'done') {
+            if (list.type === 'closed') {
               list.position = Infinity;
             }
           });

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

 /* eslint-disable comma-dangle, space-before-function-paren, one-var */
-/* global Vue */
 /* global Sortable */
 
+import Vue from 'vue';
 import boardBlankState from './board_blank_state';
 
 require('./board_delete');

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

 /* global ListLabel */
-/* global Cookies */
+
+import Cookies from 'js-cookie';
+
 const Store = gl.issueBoards.BoardsStore;
 
 export default {

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

-/* global Vue */
 require('./issue_card_inner');
 
 const Store = gl.issueBoards.BoardsStore;
@@ -51,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_delete.js

 /* eslint-disable comma-dangle, space-before-function-paren, no-alert */
-/* global Vue */
+
+import Vue from 'vue';
 
 (() => {
   window.gl = window.gl || {};

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

 /* eslint-disable comma-dangle, space-before-function-paren, max-len */
-/* global Vue */
 /* global Sortable */
 
+import Vue from 'vue';
 import boardNewIssue from './board_new_issue';
 import boardCard from './board_card';
 
@@ -48,7 +48,7 @@ import boardCard from './board_card';
             this.list.getIssues(false);
           }
 
-          if (this.scrollHeight() > this.listHeight()) {
+          if (this.scrollHeight() > Math.ceil(this.listHeight())) {
             this.showCount = true;
           } else {
             this.showCount = false;

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

 /* eslint-disable comma-dangle, space-before-function-paren, no-new */
-/* global Vue */
 /* global IssuableContext */
 /* global MilestoneSelect */
 /* global LabelsSelect */
 /* global Sidebar */
 
+import Vue from 'vue';
+
 require('./sidebar/remove_issue');
 
 (() => {

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

-/* global Vue */
+import Vue from 'vue';
 import eventHub from '../eventhub';
 
 (() => {
@@ -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/boards/components/modal/empty_state.js

-/* global Vue */
+import Vue from 'vue';
+
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -30,7 +31,7 @@
         if (this.activeTab === 'selected') {
           obj.title = 'You haven\'t selected any issues yet';
           obj.content = `
-            Go back to <strong>All issues</strong> and select some issues
+            Go back to <strong>Open issues</strong> and select some issues
             to add to your board.
           `;
         }
@@ -59,7 +60,7 @@
                 class="btn btn-default"
                 @click="changeTab('all')"
                 v-if="activeTab === 'selected'">
-                All issues
+                Open issues
               </button>
             </div>
           </div>

app/assets/javascripts/boards/components/modal/filters.js

@@ -14,8 +14,10 @@ export default {
 
     this.filteredSearch = new FilteredSearchBoards(this.store);
     this.filteredSearch.removeTokens();
+    this.filteredSearch.handleInputPlaceholder();
+    this.filteredSearch.toggleClearSearchButton();
   },
-  beforeDestroy() {
+  destroyed() {
     this.filteredSearch.cleanup();
     FilteredSearchContainer.container = document;
     this.store.path = '';

app/assets/javascripts/boards/components/modal/footer.js

 /* eslint-disable no-new */
-/* global Vue */
 /* global Flash */
 
+import Vue from 'vue';
+
 require('./lists_dropdown');
 
 (() => {

app/assets/javascripts/boards/components/modal/index.js

-/* global Vue */
 /* global ListIssue */
+
+import Vue from 'vue';
 import queryData from '../../utils/query_data';
 
 require('./header');
@@ -64,7 +65,15 @@ require('./empty_state');
       },
       filter: {
         handler() {
-          this.loadIssues(true);
+          if (this.$el.tagName) {
+            this.page = 1;
+            this.filterLoading = true;
+
+            this.loadIssues(true)
+              .then(() => {
+                this.filterLoading = false;
+              });
+          }
         },
         deep: true,
       },
@@ -115,6 +124,9 @@ require('./empty_state');
         return this.activeTab === 'selected' && this.selectedIssues.length === 0;
       },
     },
+    created() {
+      this.page = 1;
+    },
     components: {
       'modal-header': gl.issueBoards.ModalHeader,
       'modal-list': gl.issueBoards.ModalList,
@@ -135,14 +147,14 @@ require('./empty_state');
             :image="blankStateImage"
             :issue-link-base="issueLinkBase"
             :root-path="rootPath"
-            v-if="!loading && showList"></modal-list>
+            v-if="!loading && showList && !filterLoading"></modal-list>
           <empty-state
             v-if="showEmptyState"
             :image="blankStateImage"
             :new-issue-path="newIssuePath"></empty-state>
           <section
             class="add-issues-list text-center"
-            v-if="loading">
+            v-if="loading || filterLoading">
             <div class="add-issues-list-loading">
               <i class="fa fa-spinner fa-spin"></i>
             </div>

app/assets/javascripts/boards/components/modal/list.js

-/* global Vue */
 /* global ListIssue */
 /* global bp */
+
+import Vue from 'vue';
+
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 

app/assets/javascripts/boards/components/modal/lists_dropdown.js

-/* global Vue */
+import Vue from 'vue';
+
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 

app/assets/javascripts/boards/components/modal/tabs.js

-/* global Vue */
+import Vue from 'vue';
+
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
@@ -23,7 +24,7 @@
               href="#"
               role="button"
               @click.prevent="changeTab('all')">
-              All issues
+              Open issues
               <span class="badge">
                 {{ issuesCount }}
               </span>

app/assets/javascripts/boards/components/sidebar/remove_issue.js

 /* eslint-disable no-new */
-/* global Vue */
 /* global Flash */
+
+import Vue from 'vue';
+
 (() => {
   const Store = gl.issueBoards.BoardsStore;
 
@@ -46,7 +48,7 @@
     template: `
       <div
         class="block list"
-        v-if="list.type !== 'done'">
+        v-if="list.type !== 'closed'">
         <button
           class="btn btn-default btn-block"
           type="button"

app/assets/javascripts/boards/filtered_search_boards.js

@@ -28,6 +28,8 @@ export default class FilteredSearchBoards extends gl.FilteredSearchManager {
     [].forEach.call(tokens, (el) => {
       el.parentNode.removeChild(el);
     });
+
+    this.filteredSearchInput.value = '';
   }
 
   updateTokens() {

app/assets/javascripts/boards/filters/due_date_filters.js

-/* global Vue */
 /* global dateFormat */
 
+import Vue from 'vue';
+
 Vue.filter('due-date', (value) => {
   const date = new Date(value);
   return dateFormat(date, 'mmm d, yyyy', true);

app/assets/javascripts/boards/models/issue.js

 /* eslint-disable no-unused-vars, space-before-function-paren, arrow-body-style, arrow-parens, comma-dangle, max-len */
-/* global Vue */
 /* global ListLabel */
 /* global ListMilestone */
 /* global ListUser */
 
+import Vue from 'vue';
+
 class ListIssue {
   constructor (obj) {
     this.globalId = obj.id;

app/assets/javascripts/boards/models/list.js

@@ -10,7 +10,7 @@ class List {
     this.position = obj.position;
     this.title = obj.title;
     this.type = obj.list_type;
-    this.preset = ['done', 'blank'].indexOf(this.type) > -1;
+    this.preset = ['closed', 'blank'].indexOf(this.type) > -1;
     this.page = 1;
     this.loading = true;
     this.loadingMore = false;

app/assets/javascripts/boards/services/board_service.js

 /* eslint-disable space-before-function-paren, comma-dangle, no-param-reassign, camelcase, max-len, no-unused-vars */
-/* global Vue */
+
+import Vue from 'vue';
 
 class BoardService {
   constructor (root, bulkUpdatePath, boardId) {

app/assets/javascripts/boards/stores/boards_store.js

 /* eslint-disable comma-dangle, space-before-function-paren, one-var, no-shadow, dot-notation, max-len */
-/* global Cookies */
 /* global List */
 
+import Cookies from 'js-cookie';
+
 (() => {
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
@@ -44,7 +45,7 @@
     },
     shouldAddBlankState () {
       // Decide whether to add the blank state
-      return !(this.state.lists.filter(list => list.type !== 'done')[0]);
+      return !(this.state.lists.filter(list => list.type !== 'closed')[0]);
     },
     addBlankState () {
       if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return;
@@ -97,7 +98,7 @@
         issueTo.removeLabel(listFrom.label);
       }
 
-      if (listTo.type === 'done') {
+      if (listTo.type === 'closed') {
         issueLists.forEach((list) => {
           list.removeIssue(issue);
         });

app/assets/javascripts/boards/stores/modal_store.js

@@ -15,6 +15,7 @@
         searchTerm: '',
         loading: false,
         loadingNewPage: false,
+        filterLoading: false,
         page: 1,
         perPage: 50,
         filter: {

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

-/* eslint-disable no-new, no-param-reassign */
-/* global Vue, CommitsPipelineStore, PipelinesService, Flash */
+/* eslint-disable no-param-reassign */
+
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import CommitPipelinesTable from './pipelines_table';
+
+Vue.use(VueResource);
 
-window.Vue = require('vue');
-require('./pipelines_table');
 /**
  * Commits View > Pipelines Tab > Pipelines Table.
  * Merge Request View > Pipelines Tab > Pipelines Table.
@@ -21,7 +24,7 @@ $(() => {
   }
 
   const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-  gl.commits.pipelines.PipelinesTableBundle = new gl.commits.pipelines.PipelinesTableView();
+  gl.commits.pipelines.PipelinesTableBundle = new CommitPipelinesTable();
 
   if (pipelineTableViewEl && pipelineTableViewEl.dataset.disableInitialization === undefined) {
     gl.commits.pipelines.PipelinesTableBundle.$mount(pipelineTableViewEl);

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

-/* globals Vue */
-/* eslint-disable no-unused-vars, no-param-reassign */
-
-/**
- * Pipelines service.
- *
- * Used to fetch the data used to render the pipelines table.
- * Uses Vue.Resource
- */
-class PipelinesService {
-
-  /**
-   * FIXME: The url provided to request the pipelines in the new merge request
-   * page already has `.json`.
-   * This should be fixed when the endpoint is improved.
-   *
-   * @param  {String} root
-   */
-  constructor(root) {
-    let endpoint;
-
-    if (root.indexOf('.json') === -1) {
-      endpoint = `${root}.json`;
-    } else {
-      endpoint = root;
-    }
-    this.pipelines = Vue.resource(endpoint);
-  }
-
-  /**
-   * Given the root param provided when the class is initialized, will
-   * make a GET request.
-   *
-   * @return {Promise}
-   */
-  all() {
-    return this.pipelines.get();
-  }
-}
-
-window.gl = window.gl || {};
-gl.commits = gl.commits || {};
-gl.commits.pipelines = gl.commits.pipelines || {};
-gl.commits.pipelines.PipelinesService = PipelinesService;

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

-/* eslint-disable no-new, no-param-reassign */
-/* global Vue, CommitsPipelineStore, PipelinesService, Flash */
-
-window.Vue = require('vue');
-window.Vue.use(require('vue-resource'));
-require('../../lib/utils/common_utils');
-require('../../vue_shared/vue_resource_interceptor');
-require('../../vue_shared/components/pipelines_table');
-require('./pipelines_service');
-const PipelineStore = require('./pipelines_store');
+import Vue from 'vue';
+import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
+import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
+import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
+import eventHub from '../../vue_pipelines_index/event_hub';
+import EmptyState from '../../vue_pipelines_index/components/empty_state';
+import ErrorState from '../../vue_pipelines_index/components/error_state';
+import '../../lib/utils/common_utils';
+import '../../vue_shared/vue_resource_interceptor';
 
 /**
  *
@@ -20,48 +19,74 @@ const PipelineStore = require('./pipelines_store');
  * as soon as we have Webpack and can load them directly into JS files.
  */
 
-(() => {
-  window.gl = window.gl || {};
-  gl.commits = gl.commits || {};
-  gl.commits.pipelines = gl.commits.pipelines || {};
+export default Vue.component('pipelines-table', {
+  components: {
+    'pipelines-table-component': PipelinesTableComponent,
+    'error-state': ErrorState,
+    'empty-state': EmptyState,
+  },
+
+  /**
+   * Accesses the DOM to provide the needed data.
+   * Returns the necessary props to render `pipelines-table-component` component.
+   *
+   * @return {Object}
+   */
+  data() {
+    const store = new PipelineStore();
 
-  gl.commits.pipelines.PipelinesTableView = Vue.component('pipelines-table', {
+    return {
+      endpoint: null,
+      helpPagePath: null,
+      store,
+      state: store.state,
+      isLoading: false,
+      hasError: false,
+    };
+  },
 
-    components: {
-      'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
+  computed: {
+    shouldRenderErrorState() {
+      return this.hasError && !this.isLoading;
     },
 
-    /**
-     * Accesses the DOM to provide the needed data.
-     * Returns the necessary props to render `pipelines-table-component` component.
-     *
-     * @return {Object}
-     */
-    data() {
-      const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
-      const store = new PipelineStore();
-
-      return {
-        endpoint: pipelinesTableData.endpoint,
-        store,
-        state: store.state,
-        isLoading: false,
-      };
+    shouldRenderEmptyState() {
+      return !this.state.pipelines.length && !this.isLoading;
     },
+  },
+
+  /**
+   * When the component is about to be mounted, tell the service to fetch the data
+   *
+   * A request to fetch the pipelines will be made.
+   * In case of a successfull response we will store the data in the provided
+   * store, in case of a failed response we need to warn the user.
+   *
+   */
+  beforeMount() {
+    this.endpoint = this.$el.dataset.endpoint;
+    this.helpPagePath = this.$el.dataset.helpPagePath;
+    this.service = new PipelinesService(this.endpoint);
+
+    this.fetchPipelines();
+
+    eventHub.$on('refreshPipelines', this.fetchPipelines);
+  },
 
-    /**
-     * When the component is about to be mounted, tell the service to fetch the data
-     *
-     * A request to fetch the pipelines will be made.
-     * In case of a successfull response we will store the data in the provided
-     * store, in case of a failed response we need to warn the user.
-     *
-     */
-    beforeMount() {
-      const pipelinesService = new gl.commits.pipelines.PipelinesService(this.endpoint);
+  beforeUpdate() {
+    if (this.state.pipelines.length && this.$children) {
+      this.store.startTimeAgoLoops.call(this, Vue);
+    }
+  },
 
+  beforeDestroyed() {
+    eventHub.$off('refreshPipelines');
+  },
+
+  methods: {
+    fetchPipelines() {
       this.isLoading = true;
-      return pipelinesService.all()
+      return this.service.getPipelines()
         .then(response => response.json())
         .then((json) => {
           // depending of the endpoint the response can either bring a `pipelines` key or not.
@@ -70,35 +95,30 @@ const PipelineStore = require('./pipelines_store');
           this.isLoading = false;
         })
         .catch(() => {
+          this.hasError = true;
           this.isLoading = false;
-          new Flash('An error occurred while fetching the pipelines, please reload the page again.', 'alert');
         });
     },
+  },
 
-    beforeUpdate() {
-      if (this.state.pipelines.length && this.$children) {
-        PipelineStore.startTimeAgoLoops.call(this, Vue);
-      }
-    },
+  template: `
+    <div class="content-list pipelines">
+      <div class="realtime-loading" v-if="isLoading">
+        <i class="fa fa-spinner fa-spin"></i>
+      </div>
+
+      <empty-state
+        v-if="shouldRenderEmptyState"
+        :help-page-path="helpPagePath" />
+
+      <error-state v-if="shouldRenderErrorState" />
 
-    template: `
-      <div class="pipelines">
-        <div class="realtime-loading" v-if="isLoading">
-          <i class="fa fa-spinner fa-spin"></i>
-        </div>
-
-        <div class="blank-state blank-state-no-icon"
-          v-if="!isLoading && state.pipelines.length === 0">
-          <h2 class="blank-state-title js-blank-state-title">
-            No pipelines to show
-          </h2>
-        </div>
-
-        <div class="table-holder pipelines"
-          v-if="!isLoading && state.pipelines.length > 0">
-          <pipelines-table-component :pipelines="state.pipelines"/>
-        </div>
+      <div class="table-holder"
+        v-if="!isLoading && state.pipelines.length > 0">
+        <pipelines-table-component
+          :pipelines="state.pipelines"
+          :service="service" />
       </div>
-    `,
-  });
-})();
+    </div>
+  `,
+});

app/assets/javascripts/commons/polyfills.js

 // ECMAScript polyfills
 import 'core-js/fn/array/find';
+import 'core-js/fn/array/from';
 import 'core-js/fn/object/assign';
 import 'core-js/fn/promise';
 import 'core-js/fn/string/code-point-at';
 import 'core-js/fn/string/from-code-point';
+import 'core-js/fn/symbol';
 
 // Browser polyfills
 import './polyfills/custom_event';

app/assets/javascripts/cycle_analytics/components/limit_warning_component.js

+export default {
+  props: {
+    count: {
+      type: Number,
+      required: true,
+    },
+  },
+  template: `
+    <span v-if="count === 50" class="events-info pull-right">
+      <i class="fa fa-warning has-tooltip"
+          aria-hidden="true"
+          title="Limited to showing 50 events at most"
+          data-placement="top"></i>
+      Showing 50 events
+    </span>
+  `,
+};

app/assets/javascripts/cycle_analytics/components/stage_code_component.js

 /* eslint-disable no-param-reassign */
-/* global Vue */
+
+import Vue from 'vue';
 
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
@@ -13,6 +14,7 @@
       <div>
         <div class="events-description">
           {{ stage.description }}
+          <limit-warning :count="items.length" />
         </div>
         <ul class="stage-event-list">
           <li v-for="mergeRequest in items" class="stage-event-item">

app/assets/javascripts/cycle_analytics/components/stage_issue_component.js

 /* eslint-disable no-param-reassign */
-/* global Vue */
+
+import Vue from 'vue';
 
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
@@ -13,6 +14,7 @@
       <div>
         <div class="events-description">
           {{ stage.description }}
+          <limit-warning :count="items.length" />
         </div>
         <ul class="stage-event-list">
           <li v-for="issue in items" class="stage-event-item">

app/assets/javascripts/cycle_analytics/components/stage_plan_component.js

@@ -19,12 +19,7 @@ import iconCommit from '../svg/icon_commit.svg';
       <div>
         <div class="events-description">
           {{ stage.description }}
-          <span v-if="items.length === 50" class="events-info pull-right">
-            <i class="fa fa-warning has-tooltip"
-              title="Limited to showing 50 events at most"
-              data-placement="top"></i>
-            Showing 50 events
-          </span>
+          <limit-warning :count="items.length" />
         </div>
         <ul class="stage-event-list">
           <li v-for="commit in items" class="stage-event-item">

app/assets/javascripts/cycle_analytics/components/stage_production_component.js

 /* eslint-disable no-param-reassign */
-/* global Vue */
+
+import Vue from 'vue';
 
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
@@ -13,6 +14,7 @@
       <div>
         <div class="events-description">
           {{ stage.description }}
+          <limit-warning :count="items.length" />
         </div>
         <ul class="stage-event-list">
           <li v-for="issue in items" class="stage-event-item">

app/assets/javascripts/cycle_analytics/components/stage_review_component.js

 /* eslint-disable no-param-reassign */
-/* global Vue */
+
+import Vue from 'vue';
 
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
@@ -13,6 +14,7 @@
       <div>
         <div class="events-description">
           {{ stage.description }}
+          <limit-warning :count="items.length" />
         </div>
         <ul class="stage-event-list">
           <li v-for="mergeRequest in items" class="stage-event-item">

app/assets/javascripts/cycle_analytics/components/stage_staging_component.js

@@ -17,6 +17,7 @@ import iconBranch from '../svg/icon_branch.svg';
       <div>
         <div class="events-description">
           {{ stage.description }}
+          <limit-warning :count="items.length" />
         </div>
         <ul class="stage-event-list">
           <li v-for="build in items" class="stage-event-item item-build-component">

app/assets/javascripts/cycle_analytics/components/stage_test_component.js

@@ -18,6 +18,7 @@ import iconBranch from '../svg/icon_branch.svg';
       <div>
         <div class="events-description">
           {{ stage.description }}
+          <limit-warning :count="items.length" />
         </div>
         <ul class="stage-event-list">
           <li v-for="build in items" class="stage-event-item item-build-component">

app/assets/javascripts/cycle_analytics/components/total_time_component.js

 /* eslint-disable no-param-reassign */
-/* global Vue */
+
+import Vue from 'vue';
 
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

-/* global Vue */
-/* global Cookies */
 /* global Flash */
 
-window.Vue = require('vue');
-window.Cookies = require('js-cookie');
+import Vue from 'vue';
+import Cookies from 'js-cookie';
+import LimitWarningComponent from './components/limit_warning_component';
+
 require('./components/stage_code_component');
 require('./components/stage_issue_component');
 require('./components/stage_plan_component');
@@ -131,5 +131,6 @@ $(() => {
   });
 
   // Register global components
+  Vue.component('limit-warning', LimitWarningComponent);
   Vue.component('total-time', gl.cycleAnalytics.TotalTimeComponent);
 });

app/assets/javascripts/diff.js

@@ -33,11 +33,7 @@ class Diff {
 
   handleClickUnfold(e) {
     const $target = $(e.target);
-    // current babel config relies on iterators implementation, so we cannot simply do:
-    // const [oldLineNumber, newLineNumber] = this.lineNumbers($target.parent());
-    const ref = this.lineNumbers($target.parent());
-    const oldLineNumber = ref[0];
-    const newLineNumber = ref[1];
+    const [oldLineNumber, newLineNumber] = this.lineNumbers($target.parent());
     const offset = newLineNumber - oldLineNumber;
     const bottom = $target.hasClass('js-unfold-bottom');
     let since;
@@ -105,10 +101,11 @@ class Diff {
   }
 
   lineNumbers(line) {
-    if (!line.children().length) {
+    const children = line.find('.diff-line-num').toArray();
+    if (children.length !== 2) {
       return [0, 0];
     }
-    return line.find('.diff-line-num').map((i, elm) => parseInt($(elm).data('linenumber'), 10));
+    return children.map(elm => parseInt($(elm).data('linenumber'), 10) || 0);
   }
 
   highlightSelectedLine() {

app/assets/javascripts/diff_notes/components/comment_resolve_btn.js

 /* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, quotes, no-lonely-if, max-len */
 /* global CommentsStore */
-const Vue = require('vue');
+
+import Vue from 'vue';
 
 (() => {
   const CommentAndResolveBtn = Vue.extend({

app/assets/javascripts/diff_notes/components/diff_note_avatars.js

-/* global CommentsStore Cookies notes */
+/* global CommentsStore */
+/* global notes */
+
 import Vue from 'vue';
 import collapseIcon from '../icons/collapse_icon.svg';
 
@@ -25,6 +27,7 @@ import collapseIcon from '../icons/collapse_icon.svg';
             role="button"
             data-container="body"
             data-placement="top"
+            data-html="true"
             :data-line-type="lineType"
             :title="note.authorName + ': ' + note.noteTruncated"
             :src="note.authorAvatar"

app/assets/javascripts/diff_notes/components/jump_to_discussion.js

 /* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, guard-for-in, no-restricted-syntax, one-var, space-before-function-paren, no-lonely-if, no-continue, brace-style, max-len, quotes */
 /* global DiscussionMixins */
 /* global CommentsStore */
-const Vue = require('vue');
+
+import Vue from 'vue';
 
 (() => {
   const JumpToDiscussion = Vue.extend({

app/assets/javascripts/diff_notes/components/new_issue_for_discussion.js

-/* global Vue */
 /* global CommentsStore */
 
+import Vue from 'vue';
+
 (() => {
   const NewIssueForDiscussion = Vue.extend({
     props: {

app/assets/javascripts/diff_notes/components/resolve_btn.js

@@ -2,7 +2,8 @@
 /* global CommentsStore */
 /* global ResolveService */
 /* global Flash */
-const Vue = require('vue');
+
+import Vue from 'vue';
 
 (() => {
   const ResolveBtn = Vue.extend({

app/assets/javascripts/diff_notes/components/resolve_count.js

 /* eslint-disable comma-dangle, object-shorthand, func-names, no-param-reassign */
 /* global DiscussionMixins */
 /* global CommentsStore */
-const Vue = require('vue');
+
+import Vue from 'vue';
 
 ((w) => {
   w.ResolveCount = Vue.extend({

app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js

@@ -2,7 +2,7 @@
 /* global CommentsStore */
 /* global ResolveService */
 
-const Vue = require('vue');
+import Vue from 'vue';
 
 (() => {
   const ResolveDiscussionBtn = Vue.extend({

app/assets/javascripts/diff_notes/diff_notes_bundle.js

 /* eslint-disable func-names, comma-dangle, new-cap, no-new, max-len */
-/* global Vue */
 /* global ResolveCount */
 
-const Vue = require('vue');
+import Vue from 'vue';
+
 require('./models/discussion');
 require('./models/note');
 require('./stores/comments');

app/assets/javascripts/diff_notes/models/discussion.js

 /* eslint-disable space-before-function-paren, camelcase, guard-for-in, no-restricted-syntax, no-unused-vars, max-len */
-/* global Vue */
 /* global NoteModel */
 
+import Vue from 'vue';
+
 class DiscussionModel {
   constructor (discussionId) {
     this.id = discussionId;

app/assets/javascripts/diff_notes/services/resolve.js

@@ -2,10 +2,13 @@
 /* global Flash */
 /* global CommentsStore */
 
-const Vue = window.Vue = require('vue');
-window.Vue.use(require('vue-resource'));
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
 require('../../vue_shared/vue_resource_interceptor');
 
+Vue.use(VueResource);
+
 (() => {
   window.gl = window.gl || {};
 

app/assets/javascripts/diff_notes/stores/comments.js

 /* eslint-disable object-shorthand, func-names, camelcase, no-restricted-syntax, guard-for-in, comma-dangle, max-len, no-param-reassign */
-/* global Vue */
 /* global DiscussionModel */
 
+import Vue from 'vue';
+
 ((w) => {
   w.CommentsStore = {
     state: {},

app/assets/javascripts/dispatcher.js

-import PrometheusGraph from './monitoring/prometheus_graph'; // TODO: Maybe Make this a bundle
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */
 /* global UsernameValidator */
 /* global ActiveTabMemoizer */
@@ -34,6 +33,8 @@ import PrometheusGraph from './monitoring/prometheus_graph'; // TODO: Maybe Make
 /* global ProjectShow */
 /* global Labels */
 /* global Shortcuts */
+/* global Sidebar */
+
 import Issue from './issue';
 
 import BindInOut from './behaviors/bind_in_out';
@@ -42,9 +43,9 @@ 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 UserCallout from './user_callout';
 
 const ShortcutsBlob = require('./shortcuts_blob');
-const UserCallout = require('./user_callout');
 
 (function() {
   var Dispatcher;
@@ -119,6 +120,7 @@ const UserCallout = require('./user_callout');
         case 'groups:milestones:show':
         case 'dashboard:milestones:show':
           new Milestone();
+          new Sidebar();
           break;
         case 'dashboard:todos:index':
           new gl.Todos();
@@ -329,8 +331,6 @@ const UserCallout = require('./user_callout');
         case 'ci:lints:show':
           new gl.CILintEditor();
           break;
-        case 'projects:environments:metrics':
-          new PrometheusGraph();
         case 'users:show':
           new UserCallout();
           break;

app/assets/javascripts/droplab/droplab_filter.js

@@ -56,10 +56,12 @@ require('../window')(function(w){
 
       this.hookInput = hookInput;
       this.hookInput.trigger.addEventListener('keyup.dl', this.keydownWrapper);
+      this.hookInput.trigger.addEventListener('mousedown.dl', this.keydownWrapper);
     },
 
     destroy: function destroy(){
       this.hookInput.trigger.removeEventListener('keyup.dl', this.keydownWrapper);
+      this.hookInput.trigger.removeEventListener('mousedown.dl', this.keydownWrapper);
     }
   };
 });

app/assets/javascripts/due_date_select.js

@@ -132,7 +132,7 @@ class DueDateSelect {
         const selectedDateValue = this.datePayload[this.abilityName].due_date;
         const displayedDateStyle = this.displayedDate !== 'No due date' ? 'bold' : 'no-value';
 
-        this.$loading.fadeIn();
+        this.$loading.removeClass('hidden').fadeIn();
 
         if (isDropdown) {
           this.$dropdown.trigger('loading.gl.dropdown');

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

-/* eslint-disable no-param-reassign, no-new */
+/* eslint-disable no-new */
 /* global Flash */
+import Vue from 'vue';
 import EnvironmentsService from '../services/environments_service';
 import EnvironmentTable from './environments_table';
 import EnvironmentsStore from '../stores/environments_store';
+import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import '../../lib/utils/common_utils';
 import eventHub from '../event_hub';
 
-const Vue = window.Vue = require('vue');
-window.Vue.use(require('vue-resource'));
-require('../../vue_shared/components/table_pagination');
-require('../../lib/utils/common_utils');
-require('../../vue_shared/vue_resource_interceptor');
-
 export default Vue.component('environment-component', {
 
   components: {
     'environment-table': EnvironmentTable,
-    'table-pagination': gl.VueGlPagination,
+    'table-pagination': TablePaginationComponent,
   },
 
   data() {
@@ -59,7 +56,6 @@ export default Vue.component('environment-component', {
     canCreateEnvironmentParsed() {
       return gl.utils.convertPermissionToBoolean(this.canCreateEnvironment);
     },
-
   },
 
   /**

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

@@ -25,6 +25,12 @@ export default {
     };
   },
 
+  computed: {
+    title() {
+      return 'Deploy to...';
+    },
+  },
+
   methods: {
     onClickAction(endpoint) {
       this.isLoading = true;
@@ -44,8 +50,11 @@ export default {
   template: `
     <div class="btn-group" role="group">
       <button
-        class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container"
+        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>

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

@@ -9,12 +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"
-      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

 import Timeago from 'timeago.js';
+import '../../lib/utils/text_utility';
 import ActionsComponent from './environment_actions';
 import ExternalUrlComponent from './environment_external_url';
 import StopComponent from './environment_stop';
 import RollbackComponent from './environment_rollback';
 import TerminalButtonComponent from './environment_terminal_button';
-import '../../lib/utils/text_utility';
-import '../../vue_shared/components/commit';
+import MonitoringButtonComponent from './environment_monitoring';
+import CommitComponent from '../../vue_shared/components/commit';
 
 /**
  * Envrionment Item Component
  *
  * Renders a table row for each environment.
  */
-
 const timeagoInstance = new Timeago();
 
 export default {
-
   components: {
-    'commit-component': gl.CommitComponent,
+    'commit-component': CommitComponent,
     'actions-component': ActionsComponent,
     'external-url-component': ExternalUrlComponent,
     'stop-component': StopComponent,
     'rollback-component': RollbackComponent,
     'terminal-button-component': TerminalButtonComponent,
+    'monitoring-button-component': MonitoringButtonComponent,
   },
 
   props: {
@@ -395,6 +395,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.
      *
@@ -499,13 +507,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

@@ -25,6 +25,12 @@ export default {
     };
   },
 
+  computed: {
+    title() {
+      return 'Stop';
+    },
+  },
+
   methods: {
     onClick() {
       if (confirm('Are you sure you want to stop this environment?')) {
@@ -45,10 +51,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

 /**
  * Render environments table.
  */
-import EnvironmentItem from './environment_item';
+import EnvironmentTableRowComponent from './environment_item';
 
 export default {
   components: {
-    'environment-item': EnvironmentItem,
+    'environment-item': EnvironmentTableRowComponent,
   },
 
   props: {