Merge branch 'master' into '18471-restrict-tag-pushes-protected-tags'

# Conflicts:
#   app/assets/javascripts/dispatcher.js
#   app/assets/stylesheets/pages/projects.scss

.gitlab-ci.yml

@@ -8,19 +8,22 @@ cache:
 variables:
   MYSQL_ALLOW_EMPTY_PASSWORD: "1"
   RAILS_ENV: "test"
+  NODE_ENV: "test"
   SIMPLECOV: "true"
   SETUP_DB: "true"
   USE_BUNDLE_INSTALL: "true"
   GIT_DEPTH: "20"
   PHANTOMJS_VERSION: "2.1.1"
   GET_SOURCES_ATTEMPTS: "3"
+  KNAPSACK_RSPEC_SUITE_REPORT_PATH: knapsack/${CI_PROJECT_NAME}/rspec_report-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 +42,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 +65,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 +85,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
@@ -110,9 +130,7 @@ setup-test-env:
   stage: prepare
   script:
     - node --version
-    - yarn --version
     - yarn install --pure-lockfile
-    - yarn check # ensure that yarn.lock matches package.json
     - bundle exec rake gitlab:assets:compile
     - bundle exec ruby -Ispec -e 'require "spec_helper" ; TestEnv.init'
   artifacts:
@@ -122,20 +140,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 +210,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
@@ -281,20 +284,38 @@ rake karma:
     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"
+  cache: {}
+  dependencies: []
   before_script: []
   script:
     - scripts/lint-doc.sh
 
+docs:check:links:
+  image: "registry.gitlab.com/gitlab-org/gitlab-build-images:nanoc-bootstrap-ruby-2.4-alpine"
+  stage: test
+  <<: *dedicated-runner
+  cache: {}
+  dependencies: []
+  before_script: []
+  script:
+    - mv doc/ /nanoc/content/
+    - cd /nanoc
+    # Build HTML from Markdown
+    - bundle exec nanoc
+    # Check the internal links
+    - bundle exec nanoc check internal_links
+
 bundler:check:
   stage: test
   <<: *dedicated-runner
@@ -312,7 +333,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
@@ -333,6 +354,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
 
@@ -345,6 +367,7 @@ coverage:
     USE_BUNDLE_INSTALL: "true"
   script:
     - bundle exec scripts/merge-simplecov
+  coverage: '/LOC \((\d+\.\d+%)\) covered.$/'
   artifacts:
     name: coverage
     expire_in: 31d

.rubocop.yml

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

.rubocop_todo.yml

@@ -226,11 +226,6 @@ Style/PredicateName:
 Style/PreferredHashMethods:
   Enabled: false
 
-# Offense count: 8
-# Cop supports --auto-correct.
-Style/Proc:
-  Enabled: false
-
 # Offense count: 62
 # Cop supports --auto-correct.
 # Configuration parameters: EnforcedStyle, SupportedStyles.

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.5.0

GITLAB_SHELL_VERSION

-5.0.0
+5.0.2

GITLAB_WORKHORSE_VERSION

-1.4.1
+1.4.3

Gemfile

@@ -15,7 +15,7 @@ gem 'default_value_for', '~> 3.0.0'
 gem 'mysql2', '~> 0.3.16', group: :mysql
 gem 'pg', '~> 0.18.2', group: :postgres
 
-gem 'rugged', '~> 0.24.0'
+gem 'rugged', '~> 0.25.1.1'
 
 # Authentication libraries
 gem 'devise', '~> 4.2'
@@ -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'
@@ -223,7 +223,7 @@ gem 'oj', '~> 2.17.4'
 gem 'chronic', '~> 0.10.2'
 gem 'chronic_duration', '~> 0.10.6'
 
-gem 'webpack-rails', '~> 0.9.9'
+gem 'webpack-rails', '~> 0.9.10'
 gem 'rack-proxy', '~> 0.6.0'
 
 gem 'sass-rails', '~> 5.0.6'
@@ -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,13 @@ 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 '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
@@ -273,6 +271,7 @@ group :development do
 end
 
 group :development, :test do
+  gem 'bullet', '~> 5.5.0', require: !!ENV['ENABLE_BULLET']
   gem 'pry-byebug', '~> 3.4.1', platform: :mri
   gem 'pry-rails', '~> 0.3.4'
 
@@ -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.3.0'
+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.3.0)
+    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
@@ -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,16 +819,12 @@ 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)
-    webpack-rails (0.9.9)
-      rails (>= 3.2.0)
+      hashdiff
+    webpack-rails (0.9.10)
+      railties (>= 3.2.0)
     websocket-driver (0.6.3)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.2)
@@ -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.3.0)
+  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,9 +1025,8 @@ DEPENDENCIES
   version_sorter (~> 2.1.0)
   virtus (~> 1.0.1)
   vmstat (~> 2.3.0)
-  web-console (~> 2.0)
-  webmock (~> 1.21.0)
-  webpack-rails (~> 0.9.9)
+  webmock (~> 1.24.0)
+  webpack-rails (~> 0.9.10)
   wikicloth (= 0.8.1)
 
 BUNDLED WITH

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

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

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

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

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

app/assets/javascripts/behaviors/toggler_behavior.js

@@ -18,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/file_template_mediator.js

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

app/assets/javascripts/blob/file_template_selector.js

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

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

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

app/assets/javascripts/blob/notebook_viewer.js

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

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

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

app/assets/javascripts/blob/pdf_viewer.js

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

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

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

app/assets/javascripts/blob/sketch_viewer.js

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

app/assets/javascripts/blob/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);
-    }
+/* eslint-disable class-methods-use-this, no-unused-vars */
 
-    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;
-        }
-      });
-    }
+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);
 
-    bindEvents() {
-      return this.$input.on('keyup blur', (e) => this.onFilenameUpdate());
-    }
+    this.initDropdown(dropdown, data);
+    this.listenForFilenameInput();
+    this.renderMatchedDropdown();
+    this.initAutosizeUpdateEvent();
+  }
 
-    toggleLabel(item) {
-      return item.name;
-    }
+  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,
+    });
+  }
 
-    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');
-    }
+  initAutosizeUpdateEvent() {
+    this.autosizeUpdateEvent = document.createEvent('Event');
+    this.autosizeUpdateEvent.initEvent('autosize:update', true, false);
+  }
 
-    onClick(item, el, e) {
-      e.preventDefault();
-      return this.requestFile(item);
+  listenForFilenameInput() {
+    return this.$filenameInput.on('keyup blur', e => this.renderMatchedDropdown(e));
+  }
+
+  renderMatchedDropdown() {
+    if (!this.$filenameInput.length) {
+      return null;
     }
 
-    requestFile(item) {
-      // This `requestFile` method is an abstract method that should
-      // be added by all subclasses.
+    const filenameMatches = this.pattern.test(this.$filenameInput.val().trim());
+
+    if (!filenameMatches) {
+      return this.$dropdownContainer.addClass('hidden');
     }
+    return this.$dropdownContainer.removeClass('hidden');
+  }
 
-    // To be implemented on the extending class
-    // e.g.
-    // Api.gitignoreText item.name, @requestFileSuccess.bind(@)
-    requestFileSuccess(file, { skipFocus } = {}) {
-      if (!file) return;
+  fetchFileTemplate(item, el, e) {
+    e.preventDefault();
+    return this.requestFile(item);
+  }
 
-      const oldValue = this.editor.getValue();
-      const newValue = file.content;
+  requestFile(item) {
+    // This `requestFile` method is an abstract method that should
+    // be added by all subclasses.
+  }
 
-      this.editor.setValue(newValue, 1);
-      if (!skipFocus) this.editor.focus();
+  // To be implemented on the extending class
+  // e.g. Api.gitlabCiYml(query.name, file => this.setEditorContent(file));
 
-      if (this.editor instanceof jQuery) {
-        this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
-      }
-    }
+  setEditorContent(file, { skipFocus } = {}) {
+    if (!file) return;
 
-    startLoadingSpinner() {
-      this.dropdownIcon
-        .addClass('fa-spinner fa-spin')
-        .removeClass('fa-chevron-down');
-    }
+    const newValue = file.content;
 
-    stopLoadingSpinner() {
-      this.dropdownIcon
-        .addClass('fa-chevron-down')
-        .removeClass('fa-spinner fa-spin');
+    this.editor.setValue(newValue, 1);
+
+    if (!skipFocus) this.editor.focus();
+
+    if (this.editor instanceof jQuery) {
+      this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
     }
   }
 
-  global.TemplateSelector = TemplateSelector;
-})(window.gl || (window.gl = {}));
+  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/template_selectors/ci_yaml_selector.js

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

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

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

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

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

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

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

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

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

app/assets/javascripts/blob_edit/blob_bundle.js

+/* 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');
+    const currentAction = $('.js-file-title').data('current-action');
+
+    new EditBlob(`${urlRoot}${assetsPath}`, blobLanguage, currentAction);
+    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
-      });
-      new BlobGitignoreSelectors({
-        editor: this.editor
-      });
-      new gl.BlobCiYamlSelectors({
-        editor: this.editor
-      });
-      new gl.BlobDockerfileSelectors({
-        editor: this.editor
+
+import TemplateSelectorMediator from '../blob/file_template_mediator';
+
+export default class EditBlob {
+  constructor(assetsPath, aceMode, currentAction) {
+    this.configureAceEditor(aceMode, assetsPath);
+    this.initModePanesAndLinks();
+    this.initSoftWrap();
+    this.initFileSelectors(currentAction);
+  }
+
+  configureAceEditor(aceMode, assetsPath) {
+    ace.config.set('modePath', `${assetsPath}/ace`);
+    ace.config.loadModule('ace/ext/searchbox');
+
+    this.editor = ace.edit('editor');
+
+    // This prevents warnings re: automatic scrolling being logged
+    this.editor.$blockScrolling = Infinity;
+
+    this.editor.focus();
+
+    if (aceMode) {
+      this.editor.getSession().setMode(`ace/mode/${aceMode}`);
+    }
+  }
+
+  initFileSelectors(currentAction) {
+    this.fileTemplateMediator = new TemplateSelectorMediator({
+      currentAction,
+      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 boardList from './board_list';
 import boardBlankState from './board_blank_state';
 
 require('./board_delete');
@@ -16,7 +16,7 @@ require('./board_list');
   gl.issueBoards.Board = Vue.extend({
     template: '#js-board-template',
     components: {
-      'board-list': gl.issueBoards.BoardList,
+      boardList,
       'board-delete': gl.issueBoards.BoardDelete,
       boardBlankState,
     },

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

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

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

app/assets/javascripts/boards/components/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;
 

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,8 +65,15 @@ require('./empty_state');
       },
       filter: {
         handler() {
-          this.page = 1;
-          this.loadIssues(true);
+          if (this.$el.tagName) {
+            this.page = 1;
+            this.filterLoading = true;
+
+            this.loadIssues(true)
+              .then(() => {
+                this.filterLoading = false;
+              });
+          }
         },
         deep: true,
       },
@@ -139,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;
 

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-param-reassign */
+
+import Vue from 'vue';
+import VueResource from 'vue-resource';
 import CommitPipelinesTable from './pipelines_table';
 
-window.Vue = require('vue');
-window.Vue.use(require('vue-resource'));
+Vue.use(VueResource);
 
 /**
  * Commits View > Pipelines Tab > Pipelines Table.

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

-/* eslint-disable no-new*/
-/* global Flash */
 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';
 
@@ -22,6 +22,8 @@ import '../../vue_shared/vue_resource_interceptor';
 export default Vue.component('pipelines-table', {
   components: {
     'pipelines-table-component': PipelinesTableComponent,
+    'error-state': ErrorState,
+    'empty-state': EmptyState,
   },
 
   /**
@@ -31,17 +33,28 @@ export default Vue.component('pipelines-table', {
    * @return {Object}
    */
   data() {
-    const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
     const store = new PipelineStore();
 
     return {
-      endpoint: pipelinesTableData.endpoint,
+      endpoint: null,
+      helpPagePath: null,
       store,
       state: store.state,
       isLoading: false,
+      hasError: false,
     };
   },
 
+  computed: {
+    shouldRenderErrorState() {
+      return this.hasError && !this.isLoading;
+    },
+
+    shouldRenderEmptyState() {
+      return !this.state.pipelines.length && !this.isLoading;
+    },
+  },
+
   /**
    * When the component is about to be mounted, tell the service to fetch the data
    *
@@ -51,6 +64,8 @@ export default Vue.component('pipelines-table', {
    *
    */
   beforeMount() {
+    this.endpoint = this.$el.dataset.endpoint;
+    this.helpPagePath = this.$el.dataset.helpPagePath;
     this.service = new PipelinesService(this.endpoint);
 
     this.fetchPipelines();
@@ -80,26 +95,25 @@ export default Vue.component('pipelines-table', {
           this.isLoading = false;
         })
         .catch(() => {
+          this.hasError = true;
           this.isLoading = false;
-          new Flash('An error occurred while fetching the pipelines, please reload the page again.');
         });
     },
   },
 
   template: `
-    <div class="pipelines">
+    <div class="content-list 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>
+      <empty-state
+        v-if="shouldRenderEmptyState"
+        :help-page-path="helpPagePath" />
+
+      <error-state v-if="shouldRenderErrorState" />
 
-      <div class="table-holder pipelines"
+      <div class="table-holder"
         v-if="!isLoading && state.pipelines.length > 0">
         <pipelines-table-component
           :pipelines="state.pipelines"

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';
 

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

@@ -33,6 +33,8 @@
 /* global ProjectShow */
 /* global Labels */
 /* global Shortcuts */
+/* global Sidebar */
+
 import Issue from './issue';
 
 import BindInOut from './behaviors/bind_in_out';
@@ -41,10 +43,10 @@ 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';
 import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
 
 const ShortcutsBlob = require('./shortcuts_blob');
-const UserCallout = require('./user_callout');
 
 (function() {
   var Dispatcher;
@@ -119,6 +121,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();

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/environments/components/environment.js

@@ -24,6 +24,7 @@ export default Vue.component('environment-component', {
       state: store.state,
       visibility: 'available',
       isLoading: false,
+      isLoadingFolderContent: false,
       cssContainerClass: environmentsData.cssClass,
       endpoint: environmentsData.environmentsDataEndpoint,
       canCreateDeployment: environmentsData.canCreateDeployment,
@@ -68,15 +69,21 @@ export default Vue.component('environment-component', {
     this.fetchEnvironments();
 
     eventHub.$on('refreshEnvironments', this.fetchEnvironments);
+    eventHub.$on('toggleFolder', this.toggleFolder);
   },
 
   beforeDestroyed() {
     eventHub.$off('refreshEnvironments');
+    eventHub.$off('toggleFolder');
   },
 
   methods: {
-    toggleRow(model) {
-      return this.store.toggleFolder(model.name);
+    toggleFolder(folder, folderUrl) {
+      this.store.toggleFolder(folder);
+
+      if (!folder.isOpen) {
+        this.fetchChildEnvironments(folder, folderUrl);
+      }
     },
 
     /**
@@ -117,6 +124,21 @@ export default Vue.component('environment-component', {
           new Flash('An error occurred while fetching the environments.');
         });
     },
+
+    fetchChildEnvironments(folder, folderUrl) {
+      this.isLoadingFolderContent = true;
+
+      this.service.getFolderContent(folderUrl)
+        .then(resp => resp.json())
+        .then((response) => {
+          this.store.setfolderContent(folder, response.environments);
+          this.isLoadingFolderContent = false;
+        })
+        .catch(() => {
+          this.isLoadingFolderContent = false;
+          new Flash('An error occurred while fetching the environments.');
+        });
+    },
   },
 
   template: `
@@ -179,7 +201,8 @@ export default Vue.component('environment-component', {
             :environments="state.environments"
             :can-create-deployment="canCreateDeploymentParsed"
             :can-read-environment="canReadEnvironmentParsed"
-            :service="service"/>
+            :service="service"
+            :is-loading-folder-content="isLoadingFolderContent" />
         </div>
 
         <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"

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

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

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

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

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

@@ -5,7 +5,9 @@ import ExternalUrlComponent from './environment_external_url';
 import StopComponent from './environment_stop';
 import RollbackComponent from './environment_rollback';
 import TerminalButtonComponent from './environment_terminal_button';
+import MonitoringButtonComponent from './environment_monitoring';
 import CommitComponent from '../../vue_shared/components/commit';
+import eventHub from '../event_hub';
 
 /**
  * Envrionment Item Component
@@ -22,6 +24,7 @@ export default {
     'stop-component': StopComponent,
     'rollback-component': RollbackComponent,
     'terminal-button-component': TerminalButtonComponent,
+    'monitoring-button-component': MonitoringButtonComponent,
   },
 
   props: {
@@ -139,6 +142,7 @@ export default {
           const parsedAction = {
             name: gl.text.humanize(action.name),
             play_path: action.play_path,
+            playable: action.playable,
           };
           return parsedAction;
         });
@@ -392,6 +396,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.
      *
@@ -400,7 +412,6 @@ export default {
     folderUrl() {
       return `${window.location.pathname}/folders/${this.model.folderName}`;
     },
-
   },
 
   /**
@@ -418,15 +429,37 @@ export default {
     return true;
   },
 
+  methods: {
+    onClickFolder() {
+      eventHub.$emit('toggleFolder', this.model, this.folderUrl);
+    },
+  },
+
   template: `
-    <tr>
+    <tr :class="{ 'js-child-row': model.isChildren }">
       <td>
         <a v-if="!model.isFolder"
           class="environment-name"
+          :class="{ 'prepend-left-default': model.isChildren }"
           :href="environmentPath">
           {{model.name}}
         </a>
-        <a v-else class="folder-name" :href="folderUrl">
+        <span v-else
+          class="folder-name"
+          @click="onClickFolder"
+          role="button">
+
+          <span class="folder-icon">
+            <i
+              v-show="model.isOpen"
+              class="fa fa-caret-down"
+              aria-hidden="true" />
+            <i
+              v-show="!model.isOpen"
+              class="fa fa-caret-right"
+              aria-hidden="true"/>
+          </span>
+
           <span class="folder-icon">
             <i class="fa fa-folder" aria-hidden="true"></i>
           </span>
@@ -438,7 +471,7 @@ export default {
           <span class="badge">
             {{model.size}}
           </span>
-        </a>
+        </span>
       </td>
 
       <td class="deployment-column">
@@ -496,13 +529,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>