Merge branch 'master' into upgrade-to-webpack-v4

* master: (252 commits)
  Upgrade underscore.js
  Enable prometheus metrics by default
  Add signature verification badge to compare view
  Add Changelog
  Update instalation from source guide
  fix Web IDE file tree scroll issue
  Enable quick support actions default
  Backport of 4084-epics-username-autocomplete
  Remove top margin on the terms page with performance bar
  Backports every CE related change from ee-44542 to CE
  Fix typo in changelog entry
  fix missing space
  Backport IdentityLinker#failed? from GroupSaml callback flow
  Add ci_cd_settings delete_all dependency on project
  AutoDevOps Docs fix invalid external link
  Ignore knapsack and rspec_flaky
  Ensure web hook 'blocked URL' errors are stored in as web hook logs and properly surfaced to the user
  Partially revert ebcd5711 to fix runner pages
  Reuses `InternalRedirect` when possible
  Enforces terms in the web application
  ...

.gitignore

@@ -68,6 +68,8 @@ eslint-report.html
 /shared/*
 /.gitlab_workhorse_secret
 /webpack-report/
+/knapsack/
+/rspec_flaky/
 /locale/**/LC_MESSAGES
 /locale/**/*.time_stamp
 /.rspec

CHANGELOG.md

@@ -2,6 +2,20 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
 
+## 10.7.3 (2018-05-02)
+
+### Fixed (8 changes)
+
+- Fixed wrong avatar URL when the avatar is on object storage. !18092
+- Fix errors on pushing to an empty repository. !18462
+- Update doorkeeper to 4.3.2 to fix GitLab OAuth authentication. !18543
+- Ports omniauth-jwt gem onto GitLab OmniAuth Strategies suite. !18580
+- Fix redirection error for applications using OpenID. !18599
+- Fix commit trailer rendering when Gravatar is disabled.
+- Fix file_store for artifacts and lfs when saving.
+- Fix users not seeing labels from private groups when being a member of a child project.
+
+
 ## 10.7.2 (2018-04-25)
 
 ### Security (2 changes)

CONTRIBUTING.md

@@ -9,6 +9,10 @@ terms.
 
 [DCO + License](https://gitlab.com/gitlab-org/dco/blob/master/README.md)
 
+All Documentation content that resides under the [doc/ directory](/doc) of this
+repository is licensed under Creative Commons:
+[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).
+
 _This notice should stay as the first item in the CONTRIBUTING.md file._
 
 ---

Gemfile

@@ -33,7 +33,7 @@ gem 'grape-route-helpers', '~> 2.1.0'
 gem 'faraday', '~> 0.12'
 
 # Authentication libraries
-gem 'devise', '~> 4.2'
+gem 'devise', '~> 4.4'
 gem 'doorkeeper', '~> 4.3'
 gem 'doorkeeper-openid_connect', '~> 1.3'
 gem 'omniauth', '~> 1.8'
@@ -41,7 +41,7 @@ gem 'omniauth-auth0', '~> 2.0.0'
 gem 'omniauth-azure-oauth2', '~> 0.0.9'
 gem 'omniauth-cas3', '~> 1.1.4'
 gem 'omniauth-facebook', '~> 4.0.0'
-gem 'omniauth-github', '~> 1.1.1'
+gem 'omniauth-github', '~> 1.3'
 gem 'omniauth-gitlab', '~> 1.0.2'
 gem 'omniauth-google-oauth2', '~> 0.5.3'
 gem 'omniauth-kerberos', '~> 0.3.0', group: :kerberos
@@ -90,7 +90,7 @@ gem 'github-linguist', '~> 5.3.3', require: 'linguist'
 
 # API
 gem 'grape', '~> 1.0'
-gem 'grape-entity', '~> 0.6.0'
+gem 'grape-entity', '~> 0.7.1'
 gem 'rack-cors', '~> 1.0.0', require: 'rack/cors'
 
 # Disable strong_params so that Mash does not respond to :permitted?
@@ -184,6 +184,9 @@ gem 're2', '~> 1.1.1'
 
 gem 'version_sorter', '~> 2.1.0'
 
+# User agent parsing
+gem 'device_detector'
+
 # Cache
 gem 'redis-rails', '~> 5.0.2'
 

Gemfile.lock

@@ -143,7 +143,7 @@ GEM
     connection_pool (2.2.1)
     crack (0.4.3)
       safe_yaml (~> 1.0.0)
-    crass (1.0.3)
+    crass (1.0.4)
     creole (0.5.0)
     css_parser (1.5.0)
       addressable
@@ -161,10 +161,11 @@ GEM
       activerecord (>= 3.2.0, < 5.1)
     descendants_tracker (0.0.4)
       thread_safe (~> 0.3, >= 0.3.1)
-    devise (4.2.0)
+    device_detector (1.0.0)
+    devise (4.4.3)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
-      railties (>= 4.1.0, < 5.1)
+      railties (>= 4.1.0, < 6.0)
       responders
       warden (~> 1.2.3)
     devise-two-factor (3.0.0)
@@ -365,8 +366,8 @@ GEM
       rack (>= 1.3.0)
       rack-accept
       virtus (>= 1.0.0)
-    grape-entity (0.6.0)
-      activesupport
+    grape-entity (0.7.1)
+      activesupport (>= 4.0)
       multi_json (>= 1.3.2)
     grape-route-helpers (2.1.0)
       activesupport
@@ -545,9 +546,9 @@ GEM
       omniauth (~> 1.2)
     omniauth-facebook (4.0.0)
       omniauth-oauth2 (~> 1.2)
-    omniauth-github (1.1.2)
-      omniauth (~> 1.0)
-      omniauth-oauth2 (~> 1.1)
+    omniauth-github (1.3.0)
+      omniauth (~> 1.5)
+      omniauth-oauth2 (>= 1.4.0, < 2.0)
     omniauth-gitlab (1.0.2)
       omniauth (~> 1.0)
       omniauth-oauth2 (~> 1.0)
@@ -645,7 +646,7 @@ GEM
       pry (>= 0.9.10)
     public_suffix (3.0.2)
     pyu-ruby-sasl (0.0.3.3)
-    rack (1.6.9)
+    rack (1.6.10)
     rack-accept (0.4.5)
       rack (>= 0.4)
     rack-attack (4.4.1)
@@ -693,7 +694,7 @@ GEM
     rainbow (2.2.2)
       rake
     raindrops (0.18.0)
-    rake (12.3.0)
+    rake (12.3.1)
     rb-fsevent (0.10.2)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
@@ -734,8 +735,9 @@ GEM
       declarative-option (< 0.2.0)
       uber (< 0.2.0)
     request_store (1.3.1)
-    responders (2.3.0)
-      railties (>= 4.2.0, < 5.1)
+    responders (2.4.0)
+      actionpack (>= 4.2.0, < 5.3)
+      railties (>= 4.2.0, < 5.3)
     rest-client (2.0.2)
       http-cookie (>= 1.0.2, < 2.0)
       mime-types (>= 1.16, < 4.0)
@@ -965,7 +967,7 @@ GEM
       descendants_tracker (~> 0.0, >= 0.0.3)
       equalizer (~> 0.0, >= 0.0.9)
     vmstat (2.3.0)
-    warden (1.2.6)
+    warden (1.2.7)
       rack (>= 1.0)
     webmock (2.3.2)
       addressable (>= 2.3.6)
@@ -1026,7 +1028,8 @@ DEPENDENCIES
   database_cleaner (~> 1.5.0)
   deckar01-task_list (= 2.0.0)
   default_value_for (~> 3.0.0)
-  devise (~> 4.2)
+  device_detector
+  devise (~> 4.4)
   devise-two-factor (~> 3.0.0)
   diffy (~> 3.1.0)
   doorkeeper (~> 4.3)
@@ -1070,7 +1073,7 @@ DEPENDENCIES
   google-protobuf (= 3.5.1)
   gpgme
   grape (~> 1.0)
-  grape-entity (~> 0.6.0)
+  grape-entity (~> 0.7.1)
   grape-route-helpers (~> 2.1.0)
   grape_logging (~> 1.7)
   grpc (~> 1.11.0)
@@ -1111,7 +1114,7 @@ DEPENDENCIES
   omniauth-azure-oauth2 (~> 0.0.9)
   omniauth-cas3 (~> 1.1.4)
   omniauth-facebook (~> 4.0.0)
-  omniauth-github (~> 1.1.1)
+  omniauth-github (~> 1.3)
   omniauth-gitlab (~> 1.0.2)
   omniauth-google-oauth2 (~> 0.5.3)
   omniauth-kerberos (~> 0.3.0)

Gemfile.rails5.lock

@@ -162,6 +162,7 @@ GEM
       activerecord (>= 3.2.0, < 5.2)
     descendants_tracker (0.0.4)
       thread_safe (~> 0.3, >= 0.3.1)
+    device_detector (1.0.1)
     devise (4.4.1)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
@@ -304,12 +305,12 @@ GEM
       flowdock (~> 0.7)
       gitlab-grit (>= 2.4.1)
       multi_json
-    gitlab-gollum-lib (4.2.7.1)
+    gitlab-gollum-lib (4.2.7.2)
       gemojione (~> 3.2)
       github-markup (~> 1.6)
       gollum-grit_adapter (~> 1.0)
       nokogiri (>= 1.6.1, < 2.0)
-      rouge (~> 2.1)
+      rouge (~> 3.1)
       sanitize (~> 2.1)
       stringex (~> 2.6)
     gitlab-gollum-rugged_adapter (0.4.4)
@@ -375,7 +376,7 @@ GEM
       rake
     grape_logging (1.7.0)
       grape
-    grpc (1.10.0)
+    grpc (1.11.0)
       google-protobuf (~> 3.1)
       googleapis-common-protos-types (~> 1.0.0)
       googleauth (>= 0.5.1, < 0.7)
@@ -554,9 +555,6 @@ GEM
       jwt (>= 1.5)
       omniauth (>= 1.1.1)
       omniauth-oauth2 (>= 1.5)
-    omniauth-jwt (0.0.2)
-      jwt
-      omniauth (~> 1.1)
     omniauth-kerberos (0.3.0)
       omniauth-multipassword
       timfel-krb5-auth (~> 0.8)
@@ -602,8 +600,6 @@ GEM
       atomic (>= 1.0.0)
       mysql2
       peek
-    peek-performance_bar (1.3.1)
-      peek (>= 0.1.0)
     peek-pg (1.3.0)
       concurrent-ruby
       concurrent-ruby-ext
@@ -752,7 +748,7 @@ GEM
     retriable (3.1.1)
     rinku (2.0.4)
     rotp (2.1.2)
-    rouge (2.2.1)
+    rouge (3.1.1)
     rqrcode (0.10.1)
       chunky_png (~> 1.0)
     rqrcode-rails3 (0.1.7)
@@ -1035,6 +1031,7 @@ DEPENDENCIES
   database_cleaner (~> 1.5.0)
   deckar01-task_list (= 2.0.0)
   default_value_for (~> 3.0.5)
+  device_detector
   devise (~> 4.2)
   devise-two-factor (~> 3.0.0)
   diffy (~> 3.1.0)
@@ -1082,7 +1079,7 @@ DEPENDENCIES
   grape-entity (~> 0.6.0)
   grape-route-helpers (~> 2.1.0)
   grape_logging (~> 1.7)
-  grpc (~> 1.10.0)
+  grpc (~> 1.11.0)
   haml_lint (~> 0.26.0)
   hamlit (~> 2.6.1)
   hashie-forbidden_attributes
@@ -1123,7 +1120,6 @@ DEPENDENCIES
   omniauth-github (~> 1.1.1)
   omniauth-gitlab (~> 1.0.2)
   omniauth-google-oauth2 (~> 0.5.3)
-  omniauth-jwt (~> 0.0.2)
   omniauth-kerberos (~> 0.3.0)
   omniauth-oauth2-generic (~> 0.2.2)
   omniauth-saml (~> 1.10)
@@ -1134,7 +1130,6 @@ DEPENDENCIES
   peek (~> 1.0.1)
   peek-gc (~> 0.0.2)
   peek-mysql2 (~> 1.1.0)
-  peek-performance_bar (~> 1.3.0)
   peek-pg (~> 1.3.0)
   peek-rblineprof (~> 0.2.0)
   peek-redis (~> 1.2.0)
@@ -1166,7 +1161,7 @@ DEPENDENCIES
   redis-rails (~> 5.0.2)
   request_store (~> 1.3)
   responders (~> 2.0)
-  rouge (~> 2.0)
+  rouge (~> 3.1)
   rqrcode-rails3 (~> 0.1.7)
   rspec-parameterized
   rspec-rails (~> 3.6.0)

LICENSE

@@ -4,4 +4,9 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
+
+---
+
+All Documentation content that resides under the doc/ directory of this
+repository is licensed under Creative Commons: CC BY-SA 4.0.

app/assets/javascripts/behaviors/gl_emoji.js

@@ -7,27 +7,24 @@ export default function installGlEmojiElement() {
   const GlEmojiElementProto = Object.create(HTMLElement.prototype);
   GlEmojiElementProto.createdCallback = function createdCallback() {
     const emojiUnicode = this.textContent.trim();
-    const {
-      name,
-      unicodeVersion,
-      fallbackSrc,
-      fallbackSpriteClass,
-    } = this.dataset;
+    const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset;
 
-    const isEmojiUnicode = this.childNodes && Array.prototype.every.call(
-      this.childNodes,
-      childNode => childNode.nodeType === 3,
-    );
+    const isEmojiUnicode =
+      this.childNodes &&
+      Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
     const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
     const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
 
-    if (
-      emojiUnicode &&
-      isEmojiUnicode &&
-      !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
-    ) {
+    if (emojiUnicode && isEmojiUnicode && !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)) {
       // CSS sprite fallback takes precedence over image fallback
       if (hasCssSpriteFalback) {
+        if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
+          const emojiSpriteLinkTag = document.createElement('link');
+          emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
+          emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
+          document.head.appendChild(emojiSpriteLinkTag);
+          gon.emoji_sprites_css_added = true;
+        }
         // IE 11 doesn't like adding multiple at once :(
         this.classList.add('emoji-icon');
         this.classList.add(fallbackSpriteClass);

app/assets/javascripts/compare.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, no-var, object-shorthand, consistent-return, no-unused-vars, comma-dangle, vars-on-top, prefer-template, max-len */
-
-import $ from 'jquery';
-import { localTimeAgo } from './lib/utils/datetime_utility';
-import axios from './lib/utils/axios_utils';
-
-export default class Compare {
-  constructor(opts) {
-    this.opts = opts;
-    this.source_loading = $(".js-source-loading");
-    this.target_loading = $(".js-target-loading");
-    $('.js-compare-dropdown').each((function(_this) {
-      return function(i, dropdown) {
-        var $dropdown;
-        $dropdown = $(dropdown);
-        return $dropdown.glDropdown({
-          selectable: true,
-          fieldName: $dropdown.data('fieldName'),
-          filterable: true,
-          id: function(obj, $el) {
-            return $el.data('id');
-          },
-          toggleLabel: function(obj, $el) {
-            return $el.text().trim();
-          },
-          clicked: function(e, el) {
-            if ($dropdown.is('.js-target-branch')) {
-              return _this.getTargetHtml();
-            } else if ($dropdown.is('.js-source-branch')) {
-              return _this.getSourceHtml();
-            } else if ($dropdown.is('.js-target-project')) {
-              return _this.getTargetProject();
-            }
-          }
-        });
-      };
-    })(this));
-    this.initialState();
-  }
-
-  initialState() {
-    this.getSourceHtml();
-    this.getTargetHtml();
-  }
-
-  getTargetProject() {
-    $('.mr_target_commit').empty();
-
-    return axios.get(this.opts.targetProjectUrl, {
-      params: {
-        target_project_id: $("input[name='merge_request[target_project_id]']").val(),
-      },
-    }).then(({ data }) => {
-      $('.js-target-branch-dropdown .dropdown-content').html(data);
-    });
-  }
-
-  getSourceHtml() {
-    return this.constructor.sendAjax(this.opts.sourceBranchUrl, this.source_loading, '.mr_source_commit', {
-      ref: $("input[name='merge_request[source_branch]']").val()
-    });
-  }
-
-  getTargetHtml() {
-    return this.constructor.sendAjax(this.opts.targetBranchUrl, this.target_loading, '.mr_target_commit', {
-      target_project_id: $("input[name='merge_request[target_project_id]']").val(),
-      ref: $("input[name='merge_request[target_branch]']").val()
-    });
-  }
-
-  static sendAjax(url, loading, target, params) {
-    const $target = $(target);
-
-    loading.show();
-    $target.empty();
-
-    return axios.get(url, {
-      params,
-    }).then(({ data }) => {
-      loading.hide();
-      $target.html(data);
-      const className = '.' + $target[0].className.replace(' ', '.');
-      localTimeAgo($('.js-timeago', className));
-    });
-  }
-}

app/assets/javascripts/compare_autocomplete.js

@@ -4,8 +4,9 @@ import $ from 'jquery';
 import { __ } from './locale';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
+import { capitalizeFirstCharacter } from './lib/utils/text_utility';
 
-export default function initCompareAutocomplete() {
+export default function initCompareAutocomplete(limitTo = null, clickHandler = () => {}) {
   $('.js-compare-dropdown').each(function() {
     var $dropdown, selected;
     $dropdown = $(this);
@@ -15,14 +16,27 @@ export default function initCompareAutocomplete() {
     const $filterInput = $('input[type="search"]', $dropdownContainer);
     $dropdown.glDropdown({
       data: function(term, callback) {
-        axios.get($dropdown.data('refsUrl'), {
-          params: {
-            ref: $dropdown.data('ref'),
-            search: term,
-          },
-        }).then(({ data }) => {
-          callback(data);
-        }).catch(() => flash(__('Error fetching refs')));
+        const params = {
+          ref: $dropdown.data('ref'),
+          search: term,
+        };
+
+        if (limitTo) {
+          params.find = limitTo;
+        }
+
+        axios
+          .get($dropdown.data('refsUrl'), {
+            params,
+          })
+          .then(({ data }) => {
+            if (limitTo) {
+              callback(data[capitalizeFirstCharacter(limitTo)] || []);
+            } else {
+              callback(data);
+            }
+          })
+          .catch(() => flash(__('Error fetching refs')));
       },
       selectable: true,
       filterable: true,
@@ -32,9 +46,15 @@ export default function initCompareAutocomplete() {
       renderRow: function(ref) {
         var link;
         if (ref.header != null) {
-          return $('<li />').addClass('dropdown-header').text(ref.header);
+          return $('<li />')
+            .addClass('dropdown-header')
+            .text(ref.header);
         } else {
-          link = $('<a />').attr('href', '#').addClass(ref === selected ? 'is-active' : '').text(ref).attr('data-ref', escape(ref));
+          link = $('<a />')
+            .attr('href', '#')
+            .addClass(ref === selected ? 'is-active' : '')
+            .text(ref)
+            .attr('data-ref', escape(ref));
           return $('<li />').append(link);
         }
       },
@@ -43,9 +63,10 @@ export default function initCompareAutocomplete() {
       },
       toggleLabel: function(obj, $el) {
         return $el.text().trim();
-      }
+      },
+      clicked: () => clickHandler($dropdown),
     });
-    $filterInput.on('keyup', (e) => {
+    $filterInput.on('keyup', e => {
       const keyCode = e.keyCode || e.which;
       if (keyCode !== 13) return;
       const text = $filterInput.val();
@@ -54,7 +75,7 @@ export default function initCompareAutocomplete() {
       $dropdownContainer.removeClass('open');
     });
 
-    $dropdownContainer.on('click', '.dropdown-content a', (e) => {
+    $dropdownContainer.on('click', '.dropdown-content a', e => {
       $dropdown.prop('title', e.target.text.replace(/_+?/g, '-'));
       if ($dropdown.hasClass('has-tooltip')) {
         $dropdown.tooltip('fixTitle');

app/assets/javascripts/emoji/index.js

@@ -34,7 +34,7 @@ export function getEmojiCategoryMap() {
       symbols: [],
       flags: [],
     };
-    Object.keys(emojiMap).forEach((name) => {
+    Object.keys(emojiMap).forEach(name => {
       const emoji = emojiMap[name];
       if (emojiCategoryMap[emoji.category]) {
         emojiCategoryMap[emoji.category].push(name);
@@ -79,7 +79,9 @@ export function glEmojiTag(inputName, options) {
     classList.push(fallbackSpriteClass);
   }
   const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : '';
-  const fallbackSpriteAttribute = opts.sprite ? `data-fallback-sprite-class="${fallbackSpriteClass}"` : '';
+  const fallbackSpriteAttribute = opts.sprite
+    ? `data-fallback-sprite-class="${fallbackSpriteClass}"`
+    : '';
   let contents = emojiInfo.moji;
   if (opts.forceFallback && !opts.sprite) {
     contents = emojiImageTag(name, fallbackImageSrc);

app/assets/javascripts/emoji/support/unicode_support_map.js

@@ -54,7 +54,8 @@ const unicodeSupportTestMap = {
 function checkPixelInImageDataArray(pixelOffset, imageDataArray) {
   // `4 *` because RGBA
   const indexOffset = 4 * pixelOffset;
-  const hasColor = imageDataArray[indexOffset + 0] ||
+  const hasColor =
+    imageDataArray[indexOffset + 0] ||
     imageDataArray[indexOffset + 1] ||
     imageDataArray[indexOffset + 2];
   const isVisible = imageDataArray[indexOffset + 3];
@@ -75,23 +76,23 @@ const chromeVersion = chromeMatches && chromeMatches[1] && parseInt(chromeMatche
 const fontSize = 16;
 function generateUnicodeSupportMap(testMap) {
   const testMapKeys = Object.keys(testMap);
-  const numTestEntries = testMapKeys
-    .reduce((list, testKey) => list.concat(testMap[testKey]), []).length;
+  const numTestEntries = testMapKeys.reduce((list, testKey) => list.concat(testMap[testKey]), [])
+    .length;
 
   const canvas = document.createElement('canvas');
   (window.gl || window).testEmojiUnicodeSupportMapCanvas = canvas;
   const ctx = canvas.getContext('2d');
-  canvas.width = (2 * fontSize);
-  canvas.height = (numTestEntries * fontSize);
+  canvas.width = 2 * fontSize;
+  canvas.height = numTestEntries * fontSize;
   ctx.fillStyle = '#000000';
   ctx.textBaseline = 'middle';
   ctx.font = `${fontSize}px "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
   // Write each emoji to the canvas vertically
   let writeIndex = 0;
-  testMapKeys.forEach((testKey) => {
+  testMapKeys.forEach(testKey => {
     const testEntry = testMap[testKey];
-    [].concat(testEntry).forEach((emojiUnicode) => {
-      ctx.fillText(emojiUnicode, 0, (writeIndex * fontSize) + (fontSize / 2));
+    [].concat(testEntry).forEach(emojiUnicode => {
+      ctx.fillText(emojiUnicode, 0, writeIndex * fontSize + fontSize / 2);
       writeIndex += 1;
     });
   });
@@ -99,29 +100,25 @@ function generateUnicodeSupportMap(testMap) {
   // Read from the canvas
   const resultMap = {};
   let readIndex = 0;
-  testMapKeys.forEach((testKey) => {
+  testMapKeys.forEach(testKey => {
     const testEntry = testMap[testKey];
     // This needs to be a `reduce` instead of `every` because we need to
     // keep the `readIndex` in sync from the writes by running all entries
-    const isTestSatisfied = [].concat(testEntry).reduce((isSatisfied) => {
+    const isTestSatisfied = [].concat(testEntry).reduce(isSatisfied => {
       // Sample along the vertical-middle for a couple of characters
-      const imageData = ctx.getImageData(
-          0,
-          (readIndex * fontSize) + (fontSize / 2),
-          2 * fontSize,
-          1,
-        ).data;
+      const imageData = ctx.getImageData(0, readIndex * fontSize + fontSize / 2, 2 * fontSize, 1)
+        .data;
 
       let isValidEmoji = false;
       for (let currentPixel = 0; currentPixel < 64; currentPixel += 1) {
         const isLookingAtFirstChar = currentPixel < fontSize;
-        const isLookingAtSecondChar = currentPixel >= (fontSize + (fontSize / 2));
+        const isLookingAtSecondChar = currentPixel >= fontSize + fontSize / 2;
         // Check for the emoji somewhere along the row
         if (isLookingAtFirstChar && checkPixelInImageDataArray(currentPixel, imageData)) {
           isValidEmoji = true;
 
-        // Check to see that nothing is rendered next to the first character
-        // to ensure that the ZWJ sequence rendered as one piece
+          // Check to see that nothing is rendered next to the first character
+          // to ensure that the ZWJ sequence rendered as one piece
         } else if (isLookingAtSecondChar && checkPixelInImageDataArray(currentPixel, imageData)) {
           isValidEmoji = false;
           break;
@@ -170,7 +167,10 @@ export default function getUnicodeSupportMap() {
     if (isLocalStorageAvailable) {
       window.localStorage.setItem('gl-emoji-version', GL_EMOJI_VERSION);
       window.localStorage.setItem('gl-emoji-user-agent', navigator.userAgent);
-      window.localStorage.setItem('gl-emoji-unicode-support-map', JSON.stringify(unicodeSupportMap));
+      window.localStorage.setItem(
+        'gl-emoji-unicode-support-map',
+        JSON.stringify(unicodeSupportMap),
+      );
     }
   }
 

app/assets/javascripts/environments/components/container.vue

@@ -43,6 +43,7 @@
   <div class="environments-container">
 
     <loading-icon
+      class="prepend-top-default"
       label="Loading environments"
       v-if="isLoading"
       size="3"

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

 <script>
-  import playIconSvg from 'icons/_icon_play.svg';
+  import Icon from '~/vue_shared/components/icon.vue';
   import eventHub from '../event_hub';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -8,9 +8,9 @@
     directives: {
       tooltip,
     },
-
     components: {
       loadingIcon,
+      Icon,
     },
     props: {
       actions: {
@@ -19,20 +19,16 @@
         default: () => [],
       },
     },
-
     data() {
       return {
-        playIconSvg,
         isLoading: false,
       };
     },
-
     computed: {
       title() {
         return 'Deploy to...';
       },
     },
-
     methods: {
       onClickAction(endpoint) {
         this.isLoading = true;
@@ -65,7 +61,10 @@
       :disabled="isLoading"
     >
       <span>
-        <span v-html="playIconSvg"></span>
+        <icon
+          name="play"
+          :size="12"
+        />
         <i
           class="fa fa-caret-down"
           aria-hidden="true"
@@ -86,7 +85,10 @@
           :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)"
         >
-          <span v-html="playIconSvg"></span>
+          <icon
+            name="play"
+            :size="12"
+          />
           <span>
             {{ action.name }}
           </span>

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

 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
   import { s__ } from '../../locale';
 
@@ -6,6 +7,9 @@
   * Renders the external url link in environments table.
   */
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
@@ -15,7 +19,6 @@
         required: true,
       },
     },
-
     computed: {
       title() {
         return s__('Environments|Open');
@@ -34,10 +37,9 @@
     :aria-label="title"
     :href="externalUrl"
   >
-    <i
-      class="fa fa-external-link"
-      aria-hidden="true"
-    >
-    </i>
+    <icon
+      name="external-link"
+      :size="12"
+    />
   </a>
 </template>

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

@@ -2,20 +2,22 @@
   /**
   * Renders the Monitoring (Metrics) link in environments table.
   */
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
-
     props: {
       monitoringUrl: {
         type: String,
         required: true,
       },
     },
-
     computed: {
       title() {
         return 'Monitoring';
@@ -33,10 +35,9 @@
     :title="title"
     :aria-label="title"
   >
-    <i
-      class="fa fa-area-chart"
-      aria-hidden="true"
-    >
-    </i>
+    <icon
+      name="chart"
+      :size="12"
+    />
   </a>
 </template>

app/assets/javascripts/environments/components/environment_rollback.vue

@@ -12,7 +12,6 @@
     components: {
       loadingIcon,
     },
-
     props: {
       retryUrl: {
         type: String,
@@ -24,13 +23,11 @@
         default: true,
       },
     },
-
     data() {
       return {
         isLoading: false,
       };
     },
-
     methods: {
       onClick() {
         this.isLoading = true;

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

@@ -3,14 +3,16 @@
   * Renders a terminal button to open a web terminal.
   * Used in environments table.
   */
-  import terminalIconSvg from 'icons/_icon_terminal.svg';
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
-
     props: {
       terminalPath: {
         type: String,
@@ -18,13 +20,6 @@
         default: '',
       },
     },
-
-    data() {
-      return {
-        terminalIconSvg,
-      };
-    },
-
     computed: {
       title() {
         return 'Terminal';
@@ -40,7 +35,10 @@
     :title="title"
     :aria-label="title"
     :href="terminalPath"
-    v-html="terminalIconSvg"
   >
+    <icon
+      name="terminal"
+      :size="12"
+    />
   </a>
 </template>

app/assets/javascripts/gfm_auto_complete.js

@@ -408,7 +408,10 @@ class GfmAutoComplete {
 
   fetchData($input, at) {
     if (this.isLoadingData[at]) return;
+
     this.isLoadingData[at] = true;
+    const dataSource = this.dataSources[GfmAutoComplete.atTypeMap[at]];
+
     if (this.cachedData[at]) {
       this.loadData($input, at, this.cachedData[at]);
     } else if (GfmAutoComplete.atTypeMap[at] === 'emojis') {
@@ -418,12 +421,14 @@ class GfmAutoComplete {
           GfmAutoComplete.glEmojiTag = glEmojiTag;
         })
         .catch(() => { this.isLoadingData[at] = false; });
-    } else {
-      AjaxCache.retrieve(this.dataSources[GfmAutoComplete.atTypeMap[at]], true)
+    } else if (dataSource) {
+      AjaxCache.retrieve(dataSource, true)
         .then((data) => {
           this.loadData($input, at, data);
         })
         .catch(() => { this.isLoadingData[at] = false; });
+    } else {
+      this.isLoadingData[at] = false;
     }
   }
 

app/assets/javascripts/gpg_badges.js

@@ -7,12 +7,12 @@ import { __ } from '~/locale';
 export default class GpgBadges {
   static fetch() {
     const badges = $('.js-loading-gpg-badge');
-    const form = $('.commits-search-form');
+    const tag = $('.js-signature-container');
 
     badges.html('<i class="fa fa-spinner fa-spin"></i>');
 
-    const params = parseQueryStringIntoObject(form.serialize());
-    return axios.get(form.data('signaturesPath'), { params })
+    const params = parseQueryStringIntoObject(tag.serialize());
+    return axios.get(tag.data('signaturesPath'), { params })
     .then(({ data }) => {
       data.signatures.forEach((signature) => {
         badges.filter(`[data-commit-sha="${signature.commit_sha}"]`).replaceWith(signature.html);

app/assets/javascripts/ide/components/changed_file_icon.vue

@@ -43,7 +43,7 @@ export default {
       return `${this.changedIcon}-solid`;
     },
     changedIconClass() {
-      return `multi-${this.changedIcon} prepend-left-5 pull-left`;
+      return `multi-${this.changedIcon} pull-left`;
     },
     tooltipTitle() {
       if (!this.showTooltip) return undefined;
@@ -79,13 +79,7 @@ export default {
     class="ide-file-changed-icon"
   >
     <icon
-      v-if="file.staged && showStagedIcon"
-      :name="stagedIcon"
-      :size="12"
-      :css-classes="changedIconClass"
-    />
-    <icon
-      v-if="file.changed || file.tempFile || (file.staged && !showStagedIcon)"
+      v-if="file.changed || file.tempFile || file.staged"
       :name="changedIcon"
       :size="12"
       :css-classes="changedIconClass"

app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue

@@ -15,17 +15,10 @@ export default {
       type: String,
       required: true,
     },
-    committedStateSvgPath: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
-    ...mapState(['lastCommitMsg', 'rightPanelCollapsed']),
+    ...mapState(['lastCommitMsg', 'rightPanelCollapsed', 'changedFiles', 'stagedFiles']),
     ...mapGetters(['collapseButtonIcon', 'collapseButtonTooltip']),
-    statusSvg() {
-      return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
-    },
   },
   methods: {
     ...mapActions(['toggleRightPanelCollapsed']),
@@ -35,6 +28,7 @@ export default {
 
 <template>
   <div
+    v-if="!lastCommitMsg"
     class="multi-file-commit-panel-section ide-commit-empty-state js-empty-state"
   >
     <header
@@ -64,12 +58,11 @@ export default {
       v-if="!rightPanelCollapsed"
     >
       <div class="svg-content svg-80">
-        <img :src="statusSvg" />
+        <img :src="noChangesStateSvgPath" />
       </div>
       <div class="append-right-default prepend-left-default">
         <div
           class="text-content text-center"
-          v-if="!lastCommitMsg"
         >
           <h4>
             {{ __('No changes') }}
@@ -78,15 +71,6 @@ export default {
             {{ __('Edit files in the editor and commit changes here') }}
           </p>
         </div>
-        <div
-          class="text-content text-center"
-          v-else
-        >
-          <h4>
-            {{ __('All changes are committed') }}
-          </h4>
-          <p v-html="lastCommitMsg"></p>
-        </div>
       </div>
     </div>
   </div>

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

@@ -36,7 +36,7 @@ export default {
       return this.file.tempFile ? `file-addition${prefix}` : `file-modified${prefix}`;
     },
     iconClass() {
-      return `multi-file-${this.file.tempFile ? 'additions' : 'modified'} append-right-8`;
+      return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
     },
   },
   methods: {

app/assets/javascripts/ide/components/commit_sidebar/success_message.vue

+<script>
+import { mapState } from 'vuex';
+
+export default {
+  props: {
+    committedStateSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['lastCommitMsg']),
+  },
+};
+</script>
+
+<template>
+  <div
+    class="multi-file-commit-panel-success-message"
+    aria-live="assertive"
+  >
+    <div class="svg-content svg-80">
+      <img
+        :src="committedStateSvgPath"
+        alt=""
+      />
+    </div>
+    <div class="append-right-default prepend-left-default">
+      <div
+        class="text-content text-center"
+      >
+        <h4>
+          {{ __('All changes are committed') }}
+        </h4>
+        <p v-html="lastCommitMsg"></p>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/ide/components/repo_commit_section.vue

@@ -7,6 +7,7 @@ import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import CommitFilesList from './commit_sidebar/list.vue';
 import EmptyState from './commit_sidebar/empty_state.vue';
 import CommitMessageField from './commit_sidebar/message_field.vue';
+import SuccessMessage from './commit_sidebar/success_message.vue';
 import * as consts from '../stores/modules/commit/constants';
 import Actions from './commit_sidebar/actions.vue';
 
@@ -16,6 +17,7 @@ export default {
     Icon,
     CommitFilesList,
     EmptyState,
+    SuccessMessage,
     Actions,
     LoadingButton,
     CommitMessageField,
@@ -34,9 +36,15 @@ export default {
     },
   },
   computed: {
-    ...mapState(['changedFiles', 'stagedFiles', 'rightPanelCollapsed']),
+    showStageUnstageArea() {
+      return !!(this.someUncommitedChanges || this.lastCommitMsg || !this.unusedSeal);
+    },
+    someUncommitedChanges() {
+      return !!(this.changedFiles.length || this.stagedFiles.length);
+    },
+    ...mapState(['changedFiles', 'stagedFiles', 'rightPanelCollapsed', 'lastCommitMsg', 'unusedSeal']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
-    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled', 'branchName']),
+    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
   },
   methods: {
     ...mapActions('commit', [
@@ -69,7 +77,7 @@ export default {
       </template>
     </deprecated-modal>
     <template
-      v-if="changedFiles.length || stagedFiles.length"
+      v-if="showStageUnstageArea"
     >
       <commit-files-list
         icon-name="unstaged"
@@ -89,11 +97,23 @@ export default {
         :show-toggle="false"
         :staged-list="true"
       />
+    </template>
+    <empty-state
+      v-if="unusedSeal"
+      :no-changes-state-svg-path="noChangesStateSvgPath"
+    />
+    <div
+      class="multi-file-commit-panel-bottom"
+    >
       <form
         class="form-horizontal multi-file-commit-form"
         @submit.prevent.stop="commitChanges"
         v-if="!rightPanelCollapsed"
       >
+        <success-message
+          v-if="lastCommitMsg && !someUncommitedChanges"
+          :committed-state-svg-path="committedStateSvgPath"
+        />
         <commit-message-field
           :text="commitMessage"
           @input="updateCommitMessage"
@@ -117,11 +137,6 @@ export default {
           </button>
         </div>
       </form>
-    </template>
-    <empty-state
-      v-else
-      :no-changes-state-svg-path="noChangesStateSvgPath"
-      :committed-state-svg-path="committedStateSvgPath"
-    />
+    </div>
   </div>
 </template>

app/assets/javascripts/ide/components/repo_file.vue

 <script>
-import { mapActions } from 'vuex';
-import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import fileIcon from '~/vue_shared/components/file_icon.vue';
+import { mapActions, mapGetters } from 'vuex';
+import { n__, __, sprintf } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 import router from '../ide_router';
-import newDropdown from './new_dropdown/index.vue';
-import fileStatusIcon from './repo_file_status_icon.vue';
-import changedFileIcon from './changed_file_icon.vue';
-import mrFileIcon from './mr_file_icon.vue';
+import NewDropdown from './new_dropdown/index.vue';
+import FileStatusIcon from './repo_file_status_icon.vue';
+import ChangedFileIcon from './changed_file_icon.vue';
+import MrFileIcon from './mr_file_icon.vue';
 
 export default {
   name: 'RepoFile',
+  directives: {
+    tooltip,
+  },
   components: {
-    skeletonLoadingContainer,
-    newDropdown,
-    fileStatusIcon,
-    fileIcon,
-    changedFileIcon,
-    mrFileIcon,
+    SkeletonLoadingContainer,
+    NewDropdown,
+    FileStatusIcon,
+    FileIcon,
+    ChangedFileIcon,
+    MrFileIcon,
+    Icon,
   },
   props: {
     file: {
@@ -29,6 +36,34 @@ export default {
     },
   },
   computed: {
+    ...mapGetters([
+      'getChangesInFolder',
+      'getUnstagedFilesCountForPath',
+      'getStagedFilesCountForPath',
+    ]),
+    folderUnstagedCount() {
+      return this.getUnstagedFilesCountForPath(this.file.path);
+    },
+    folderStagedCount() {
+      return this.getStagedFilesCountForPath(this.file.path);
+    },
+    changesCount() {
+      return this.getChangesInFolder(this.file.path);
+    },
+    folderChangesTooltip() {
+      if (this.changesCount === 0) return undefined;
+
+      if (this.folderUnstagedCount > 0 && this.folderStagedCount === 0) {
+        return n__('%d unstaged change', '%d unstaged changes', this.folderUnstagedCount);
+      } else if (this.folderUnstagedCount === 0 && this.folderStagedCount > 0) {
+        return n__('%d staged change', '%d staged changes', this.folderStagedCount);
+      }
+
+      return sprintf(__('%{unstaged} unstaged and %{staged} staged changes'), {
+        unstaged: this.folderUnstagedCount,
+        staged: this.folderStagedCount,
+      });
+    },
     isTree() {
       return this.file.type === 'tree';
     },
@@ -48,10 +83,19 @@ export default {
         'is-open': this.file.opened,
       };
     },
+    showTreeChangesCount() {
+      return this.isTree && this.changesCount > 0 && !this.file.opened;
+    },
+    showChangedFileIcon() {
+      return this.file.changed || this.file.tempFile || this.file.staged;
+    },
   },
   updated() {
     if (this.file.type === 'blob' && this.file.active) {
-      this.$el.scrollIntoView();
+      this.$el.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
     }
   },
   methods: {
@@ -101,8 +145,23 @@ export default {
           <mr-file-icon
             v-if="file.mrChange"
           />
+          <span
+            v-if="showTreeChangesCount"
+            class="ide-tree-changes"
+          >
+            {{ changesCount }}
+            <icon
+              v-tooltip
+              :title="folderChangesTooltip"
+              data-container="body"
+              data-placement="right"
+              name="file-modified"
+              :size="12"
+              css-classes="prepend-left-5 multi-file-modified"
+            />
+          </span>
           <changed-file-icon
-            v-if="file.changed || file.tempFile || file.staged"
+            v-else-if="showChangedFileIcon"
             :file="file"
             :show-tooltip="true"
             :show-staged-icon="true"

app/assets/javascripts/ide/stores/actions.js

@@ -149,6 +149,12 @@ export const updateTempFlagForEntry = ({ commit, dispatch, state }, { file, temp
 export const toggleFileFinder = ({ commit }, fileFindVisible) =>
   commit(types.TOGGLE_FILE_FINDER, fileFindVisible);
 
+export const burstUnusedSeal = ({ state, commit }) => {
+  if (state.unusedSeal) {
+    commit(types.BURST_UNUSED_SEAL);
+  }
+};
+
 export * from './actions/tree';
 export * from './actions/file';
 export * from './actions/project';

app/assets/javascripts/ide/stores/actions/file.js

@@ -117,7 +117,7 @@ export const getRawFileData = ({ state, commit, dispatch }, { path, baseSha }) =
   });
 };
 
-export const changeFileContent = ({ state, commit }, { path, content }) => {
+export const changeFileContent = ({ commit, dispatch, state }, { path, content }) => {
   const file = state.entries[path];
   commit(types.UPDATE_FILE_CONTENT, { path, content });
 
@@ -128,6 +128,8 @@ export const changeFileContent = ({ state, commit }, { path, content }) => {
   } else if (!file.changed && indexOfChangedFile !== -1) {
     commit(types.REMOVE_FILE_FROM_CHANGED, path);
   }
+
+  dispatch('burstUnusedSeal', {}, { root: true });
 };
 
 export const setFileLanguage = ({ getters, commit }, { fileLanguage }) => {

app/assets/javascripts/ide/stores/getters.js

 import { __ } from '~/locale';
+import { getChangesCountForFiles, filePathMatches } from './utils';
 
 export const activeFile = state => state.openFiles.find(file => file.active) || null;
 
@@ -55,7 +56,23 @@ export const allBlobs = state =>
     }, [])
     .sort((a, b) => b.lastOpenedAt - a.lastOpenedAt);
 
+export const getChangedFile = state => path => state.changedFiles.find(f => f.path === path);
 export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);
 
+export const getChangesInFolder = state => path => {
+  const changedFilesCount = state.changedFiles.filter(f => filePathMatches(f, path)).length;
+  const stagedFilesCount = state.stagedFiles.filter(
+    f => filePathMatches(f, path) && !getChangedFile(state)(f.path),
+  ).length;
+
+  return changedFilesCount + stagedFilesCount;
+};
+
+export const getUnstagedFilesCountForPath = state => path =>
+  getChangesCountForFiles(state.changedFiles, path);
+
+export const getStagedFilesCountForPath = state => path =>
+  getChangesCountForFiles(state.stagedFiles, path);
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

app/assets/javascripts/ide/stores/modules/commit/actions.js

@@ -182,6 +182,10 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState }) =
           }
 
           commit(rootTypes.CLEAR_STAGED_CHANGES, null, { root: true });
+
+          setTimeout(() => {
+            commit(rootTypes.SET_LAST_COMMIT_MSG, '', { root: true });
+          }, 5000);
         })
         .then(() => dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH));
     })

app/assets/javascripts/ide/stores/mutation_types.js

@@ -61,3 +61,4 @@ export const REMOVE_PENDING_TAB = 'REMOVE_PENDING_TAB';
 
 export const UPDATE_TEMP_FLAG = 'UPDATE_TEMP_FLAG';
 export const TOGGLE_FILE_FINDER = 'TOGGLE_FILE_FINDER';
+export const BURST_UNUSED_SEAL = 'BURST_UNUSED_SEAL';

app/assets/javascripts/ide/stores/mutations.js

@@ -128,6 +128,11 @@ export default {
       }),
     });
   },
+  [types.BURST_UNUSED_SEAL](state) {
+    Object.assign(state, {
+      unusedSeal: false,
+    });
+  },
   ...projectMutations,
   ...mergeRequestMutation,
   ...fileMutations,

app/assets/javascripts/ide/stores/state.js

@@ -18,5 +18,6 @@ export default () => ({
   entries: {},
   viewer: 'editor',
   delayViewerUpdated: false,
+  unusedSeal: true,
   fileFindVisible: false,
 });

app/assets/javascripts/ide/stores/utils.js

@@ -33,7 +33,6 @@ export const dataStructure = () => ({
   raw: '',
   content: '',
   parentTreeUrl: '',
-  parentPath: '',
   renderError: false,
   base64: false,
   editorRow: 1,
@@ -43,6 +42,7 @@ export const dataStructure = () => ({
   viewMode: 'edit',
   previewMode: null,
   size: 0,
+  parentPath: null,
   lastOpenedAt: 0,
 });
 
@@ -83,7 +83,6 @@ export const decorateData = entity => {
     opened,
     active,
     parentTreeUrl,
-    parentPath,
     changed,
     renderError,
     content,
@@ -91,6 +90,7 @@ export const decorateData = entity => {
     previewMode,
     file_lock,
     html,
+    parentPath,
   };
 };
 
@@ -137,3 +137,9 @@ export const sortTree = sortedTree =>
       }),
     )
     .sort(sortTreesByTypeAndName);
+
+export const filePathMatches = (f, path) =>
+  f.path.replace(new RegExp(`${f.name}$`), '').indexOf(`${path}/`) === 0;
+
+export const getChangesCountForFiles = (files, path) =>
+  files.filter(f => filePathMatches(f, path)).length;

app/assets/javascripts/issuable_form.js

@@ -30,7 +30,7 @@ export default class IssuableForm {
     }
 
     this.initAutosave();
-    this.form.on('submit', this.handleSubmit);
+    this.form.on('submit:success', this.handleSubmit);
     this.form.on('click', '.btn-cancel', this.resetAutosave);
     this.initWip();
 

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

@@ -74,7 +74,11 @@ export function capitalizeFirstCharacter(text) {
  * @param {*} replace
  * @returns {String}
  */
-export const stripHtml = (string, replace = '') => string.replace(/<[^>]*>/g, replace);
+export const stripHtml = (string, replace = '') => {
+  if (!string) return string;
+
+  return string.replace(/<[^>]*>/g, replace);
+};
 
 /**
  * Converts snake_case string to camelCase

app/assets/javascripts/mini_pipeline_graph_dropdown.js

-/* eslint-disable no-new */
-
 import $ from 'jquery';
 import flash from './flash';
 import axios from './lib/utils/axios_utils';
@@ -62,7 +60,7 @@ export default class MiniPipelineGraph {
    */
   renderBuildsList(stageContainer, data) {
     const dropdownContainer = stageContainer.parentElement.querySelector(
-      `${this.dropdownListSelector} .js-builds-dropdown-list`,
+      `${this.dropdownListSelector} .js-builds-dropdown-list ul`,
     );
 
     dropdownContainer.innerHTML = data;

app/assets/javascripts/notes/components/comment_form.vue

@@ -99,10 +99,6 @@ export default {
         'js-note-target-reopen': !this.isOpen,
       };
     },
-    supportQuickActions() {
-      // Disable quick actions support for Epics
-      return this.noteableType !== constants.EPIC_NOTEABLE_TYPE;
-    },
     markdownDocsPath() {
       return this.getNotesData.markdownDocsPath;
     },
@@ -359,7 +355,7 @@ Please check your network connection and try again.`;
                   name="note[note]"
                   class="note-textarea js-vue-comment-form
 js-gfm-input js-autosize markdown-area js-vue-textarea"
-                  :data-supports-quick-actions="supportQuickActions"
+                  data-supports-quick-actions="true"
                   aria-label="Description"
                   v-model="note"
                   ref="textarea"

app/assets/javascripts/pages/projects/compare/index.js

 import initCompareAutocomplete from '~/compare_autocomplete';
 
-document.addEventListener('DOMContentLoaded', initCompareAutocomplete);
+document.addEventListener('DOMContentLoaded', () => initCompareAutocomplete());

app/assets/javascripts/pages/projects/compare/show/index.js

 import Diff from '~/diff';
 import initChangesDropdown from '~/init_changes_dropdown';
+import GpgBadges from '~/gpg_badges';
 
 document.addEventListener('DOMContentLoaded', () => {
   new Diff(); // eslint-disable-line no-new
   const paddingTop = 16;
   initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - paddingTop);
+  GpgBadges.fetch();
 });

app/assets/javascripts/pages/projects/merge_requests/creations/new/compare.js

+import $ from 'jquery';
+import { localTimeAgo } from '~/lib/utils/datetime_utility';
+import axios from '~/lib/utils/axios_utils';
+import initCompareAutocomplete from '~/compare_autocomplete';
+import initTargetProjectDropdown from './target_project_dropdown';
+
+const updateCommitList = (url, $loadingIndicator, $commitList, params) => {
+  $loadingIndicator.show();
+  $commitList.empty();
+
+  return axios
+    .get(url, {
+      params,
+    })
+    .then(({ data }) => {
+      $loadingIndicator.hide();
+      $commitList.html(data);
+      localTimeAgo($('.js-timeago', $commitList));
+    });
+};
+
+export default mrNewCompareNode => {
+  const { sourceBranchUrl, targetBranchUrl } = mrNewCompareNode.dataset;
+  initTargetProjectDropdown();
+
+  const updateSourceBranchCommitList = () =>
+    updateCommitList(
+      sourceBranchUrl,
+      $(mrNewCompareNode).find('.js-source-loading'),
+      $(mrNewCompareNode).find('.mr_source_commit'),
+      {
+        ref: $(mrNewCompareNode)
+          .find("input[name='merge_request[source_branch]']")
+          .val(),
+      },
+    );
+  const updateTargetBranchCommitList = () =>
+    updateCommitList(
+      targetBranchUrl,
+      $(mrNewCompareNode).find('.js-target-loading'),
+      $(mrNewCompareNode).find('.mr_target_commit'),
+      {
+        target_project_id: $(mrNewCompareNode)
+          .find("input[name='merge_request[target_project_id]']")
+          .val(),
+        ref: $(mrNewCompareNode)
+          .find("input[name='merge_request[target_branch]']")
+          .val(),
+      },
+    );
+  initCompareAutocomplete('branches', $dropdown => {
+    if ($dropdown.is('.js-target-branch')) {
+      updateTargetBranchCommitList();
+    } else if ($dropdown.is('.js-source-branch')) {
+      updateSourceBranchCommitList();
+    }
+  });
+  updateSourceBranchCommitList();
+  updateTargetBranchCommitList();
+};

app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js

-import Compare from '~/compare';
 import MergeRequest from '~/merge_request';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
+import initCompare from './compare';
 
 document.addEventListener('DOMContentLoaded', () => {
   const mrNewCompareNode = document.querySelector('.js-merge-request-new-compare');
   if (mrNewCompareNode) {
-    new Compare({ // eslint-disable-line no-new
-      targetProjectUrl: mrNewCompareNode.dataset.targetProjectUrl,
-      sourceBranchUrl: mrNewCompareNode.dataset.sourceBranchUrl,
-      targetBranchUrl: mrNewCompareNode.dataset.targetBranchUrl,
-    });
+    initCompare(mrNewCompareNode);
   } else {
     const mrNewSubmitNode = document.querySelector('.js-merge-request-new-submit');
-    new MergeRequest({ // eslint-disable-line no-new
+    // eslint-disable-next-line no-new
+    new MergeRequest({
       action: mrNewSubmitNode.dataset.mrSubmitAction,
     });
     initPipelines();

app/assets/javascripts/pages/projects/merge_requests/creations/new/target_project_dropdown.js

+import $ from 'jquery';
+
+export default () => {
+  const $targetProjectDropdown = $('.js-target-project');
+  $targetProjectDropdown.glDropdown({
+    selectable: true,
+    fieldName: $targetProjectDropdown.data('fieldName'),
+    filterable: true,
+    id(obj, $el) {
+      return $el.data('id');
+    },
+    toggleLabel(obj, $el) {
+      return $el.text().trim();
+    },
+    clicked({ $el }) {
+      $('.mr_target_commit').empty();
+      const $targetBranchDropdown = $('.js-target-branch');
+      $targetBranchDropdown.data('refsUrl', $el.data('refsUrl'));
+      $targetBranchDropdown.data('glDropdown').clearMenu();
+    },
+  });
+};

app/assets/javascripts/pages/projects/pipelines/new/index.js

 import $ from 'jquery';
 import NewBranchForm from '~/new_branch_form';
+import setupNativeFormVariableList from '~/ci_variable_list/native_form_variable_list';
 
 document.addEventListener('DOMContentLoaded', () => {
   new NewBranchForm($('.js-new-pipeline-form')); // eslint-disable-line no-new
+
+  setupNativeFormVariableList({
+    container: $('.js-ci-variable-list-section'),
+    formField: 'variables_attributes',
+  });
 });

app/assets/javascripts/pipelines/components/graph/action_component.vue

@@ -61,7 +61,7 @@ export default {
   methods: {
     onClickAction() {
       $(this.$el).tooltip('hide');
-      eventHub.$emit('graphAction', this.link);
+      eventHub.$emit('postAction', this.link);
       this.linkRequested = this.link;
       this.isDisabled = true;
     },

app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue

@@ -87,7 +87,8 @@ export default {
       data-toggle="dropdown"
       data-container="body"
       class="dropdown-menu-toggle build-content"
-      :title="tooltipText">
+      :title="tooltipText"
+    >
 
       <job-name-component
         :name="job.name"
@@ -104,7 +105,8 @@ export default {
         <ul>
           <li
             v-for="(item, i) in job.jobs"
-            :key="i">
+            :key="i"
+          >
             <job-component
               :job="item"
               css-class-job-name="mini-pipeline-graph-dropdown-item"

app/assets/javascripts/pipelines/components/graph/job_component.vue

@@ -108,7 +108,7 @@ export default {
     <div
       v-else
       v-tooltip
-      class="js-job-component-tooltip"
+      class="js-job-component-tooltip non-details-job-component"
       :title="tooltipText"
       :class="cssClassJobName"
       data-html="true"

app/assets/javascripts/pipelines/components/stage.vue

 <script>
-
-  /**
-   * Renders each stage of the pipeline mini graph.
-   *
-   * Given the provided endpoint will make a request to
-   * fetch the dropdown data when the stage is clicked.
-   *
-   * Request is made inside this component to make it reusable between:
-   * 1. Pipelines main table
-   * 2. Pipelines table in commit and Merge request views
-   * 3. Merge request widget
-   * 4. Commit widget
-   */
-
-  import $ from 'jquery';
-  import Flash from '../../flash';
-  import axios from '../../lib/utils/axios_utils';
-  import eventHub from '../event_hub';
-  import Icon from '../../vue_shared/components/icon.vue';
-  import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
-
-  export default {
-    components: {
-      LoadingIcon,
-      Icon,
+/**
+ * Renders each stage of the pipeline mini graph.
+ *
+ * Given the provided endpoint will make a request to
+ * fetch the dropdown data when the stage is clicked.
+ *
+ * Request is made inside this component to make it reusable between:
+ * 1. Pipelines main table
+ * 2. Pipelines table in commit and Merge request views
+ * 3. Merge request widget
+ * 4. Commit widget
+ */
+
+import $ from 'jquery';
+import { __ } from '../../locale';
+import Flash from '../../flash';
+import axios from '../../lib/utils/axios_utils';
+import eventHub from '../event_hub';
+import Icon from '../../vue_shared/components/icon.vue';
+import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
+import JobComponent from './graph/job_component.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    LoadingIcon,
+    Icon,
+    JobComponent,
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  props: {
+    stage: {
+      type: Object,
+      required: true,
     },
 
-    directives: {
-      tooltip,
+    updateDropdown: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-
-    props: {
-      stage: {
-        type: Object,
-        required: true,
-      },
-
-      updateDropdown: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+      dropdownContent: '',
+    };
+  },
+
+  computed: {
+    dropdownClass() {
+      return this.dropdownContent.length > 0
+        ? 'js-builds-dropdown-container'
+        : 'js-builds-dropdown-loading';
     },
 
-    data() {
-      return {
-        isLoading: false,
-        dropdownContent: '',
-      };
+    triggerButtonClass() {
+      return `ci-status-icon-${this.stage.status.group}`;
     },
 
-    computed: {
-      dropdownClass() {
-        return this.dropdownContent.length > 0 ? 'js-builds-dropdown-container' : 'js-builds-dropdown-loading';
-      },
+    borderlessIcon() {
+      return `${this.stage.status.icon}_borderless`;
+    },
+  },
 
-      triggerButtonClass() {
-        return `ci-status-icon-${this.stage.status.group}`;
-      },
+  watch: {
+    updateDropdown() {
+      if (this.updateDropdown && this.isDropdownOpen() && !this.isLoading) {
+        this.fetchJobs();
+      }
+    },
+  },
+
+  updated() {
+    if (this.dropdownContent.length > 0) {
+      this.stopDropdownClickPropagation();
+    }
+  },
+
+  methods: {
+    onClickStage() {
+      if (!this.isDropdownOpen()) {
+        eventHub.$emit('clickedDropdown');
+        this.isLoading = true;
+        this.fetchJobs();
+      }
+    },
 
-      borderlessIcon() {
-        return `${this.stage.status.icon}_borderless`;
-      },
+    fetchJobs() {
+      axios
+        .get(this.stage.dropdown_path)
+        .then(({ data }) => {
+          this.dropdownContent = data.latest_statuses;
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.closeDropdown();
+          this.isLoading = false;
+
+          Flash(__('Something went wrong on our end.'));
+        });
     },
 
-    watch: {
-      updateDropdown() {
-        if (this.updateDropdown &&
-          this.isDropdownOpen() &&
-          !this.isLoading) {
-          this.fetchJobs();
-        }
-      },
+    /**
+     * When the user right clicks or cmd/ctrl + click in the job name
+     * the dropdown should not be closed and the link should open in another tab,
+     * so we stop propagation of the click event inside the dropdown.
+     *
+     * Since this component is rendered multiple times per page we need to guarantee we only
+     * target the click event of this component.
+     */
+    stopDropdownClickPropagation() {
+      $(
+        '.js-builds-dropdown-list button, .js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item',
+        this.$el,
+      ).on('click', e => {
+        e.stopPropagation();
+      });
     },
 
-    updated() {
-      if (this.dropdownContent.length > 0) {
-        this.stopDropdownClickPropagation();
+    closeDropdown() {
+      if (this.isDropdownOpen()) {
+        $(this.$refs.dropdown).dropdown('toggle');
       }
     },
 
-    methods: {
-      onClickStage() {
-        if (!this.isDropdownOpen()) {
-          eventHub.$emit('clickedDropdown');
-          this.isLoading = true;
-          this.fetchJobs();
-        }
-      },
-
-      fetchJobs() {
-        axios.get(this.stage.dropdown_path)
-          .then(({ data }) => {
-            this.dropdownContent = data.html;
-            this.isLoading = false;
-          })
-          .catch(() => {
-            this.closeDropdown();
-            this.isLoading = false;
-
-            Flash('Something went wrong on our end.');
-          });
-      },
-
-      /**
-       * When the user right clicks or cmd/ctrl + click in the job name
-       * the dropdown should not be closed and the link should open in another tab,
-       * so we stop propagation of the click event inside the dropdown.
-       *
-       * Since this component is rendered multiple times per page we need to guarantee we only
-       * target the click event of this component.
-       */
-      stopDropdownClickPropagation() {
-        $(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item'))
-          .on('click', (e) => {
-            e.stopPropagation();
-          });
-      },
-
-      closeDropdown() {
-        if (this.isDropdownOpen()) {
-          $(this.$refs.dropdown).dropdown('toggle');
-        }
-      },
-
-      isDropdownOpen() {
-        return this.$el.classList.contains('open');
-      },
+    isDropdownOpen() {
+      return this.$el.classList.contains('open');
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -168,7 +173,6 @@
     >
 
       <li
-        :class="dropdownClass"
         class="js-builds-dropdown-list scrollable-menu"
       >
 
@@ -176,8 +180,16 @@
 
         <ul
           v-else
-          v-html="dropdownContent"
         >
+          <li
+            v-for="job in dropdownContent"
+            :key="job.id"
+          >
+            <job-component
+              :job="job"
+              css-class-job-name="mini-pipeline-graph-dropdown-item"
+            />
+          </li>
         </ul>
       </li>
     </ul>

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -29,10 +29,10 @@ export default () => {
       };
     },
     created() {
-      eventHub.$on('graphAction', this.postAction);
+      eventHub.$on('postAction', this.postAction);
     },
     beforeDestroy() {
-      eventHub.$off('graphAction', this.postAction);
+      eventHub.$off('postAction', this.postAction);
     },
     methods: {
       postAction(action) {

app/assets/javascripts/projects_dropdown/components/app.vue

@@ -100,9 +100,10 @@ export default {
     fetchSearchedProjects(searchQuery) {
       this.searchQuery = searchQuery;
       this.toggleLoader(true);
-      this.service.getSearchedProjects(this.searchQuery)
+      this.service
+        .getSearchedProjects(this.searchQuery)
         .then(res => res.json())
-        .then((results) => {
+        .then(results => {
           this.toggleSearchProjectsList(true);
           this.store.setSearchedProjects(results);
         })

app/assets/javascripts/projects_dropdown/service/projects_service.js

@@ -50,7 +50,7 @@ export default class ProjectsService {
       } else {
         // Check if project is already present in frequents list
         // When found, update metadata of it.
-        storedFrequentProjects = JSON.parse(storedRawProjects).map((projectItem) => {
+        storedFrequentProjects = JSON.parse(storedRawProjects).map(projectItem => {
           if (projectItem.id === project.id) {
             matchFound = true;
             const diff = Math.abs(project.lastAccessedOn - projectItem.lastAccessedOn) / HOUR_IN_MS;
@@ -104,13 +104,17 @@ export default class ProjectsService {
       return [];
     }
 
-    if (bp.getBreakpointSize() === 'sm' ||
-        bp.getBreakpointSize() === 'xs') {
+    if (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'xs') {
       frequentProjectsCount = FREQUENT_PROJECTS.LIST_COUNT_MOBILE;
     }
 
-    const frequentProjects = storedFrequentProjects
-      .filter(project => project.frequency >= FREQUENT_PROJECTS.ELIGIBLE_FREQUENCY);
+    const frequentProjects = storedFrequentProjects.filter(
+      project => project.frequency >= FREQUENT_PROJECTS.ELIGIBLE_FREQUENCY,
+    );
+
+    if (!frequentProjects || frequentProjects.length === 0) {
+      return [];
+    }
 
     // Sort all frequent projects in decending order of frequency
     // and then by lastAccessedOn with recent most first

app/assets/javascripts/sidebar/components/participants/participants.vue

@@ -70,6 +70,9 @@
       toggleMoreParticipants() {
         this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
       },
+      onClickCollapsedIcon() {
+        this.$emit('toggleSidebar');
+      },
     },
   };
 </script>
@@ -82,6 +85,7 @@
       data-container="body"
       data-placement="left"
       :title="participantLabel"
+      @click="onClickCollapsedIcon"
     >
       <i
         class="fa fa-users"

app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue

 <script>
 import Store from '../../stores/sidebar_store';
-import eventHub from '../../event_hub';
 import Flash from '../../../flash';
 import { __ } from '../../../locale';
 import subscriptions from './subscriptions.vue';
@@ -20,12 +19,6 @@ export default {
       store: new Store(),
     };
   },
-  created() {
-    eventHub.$on('toggleSubscription', this.onToggleSubscription);
-  },
-  beforeDestroy() {
-    eventHub.$off('toggleSubscription', this.onToggleSubscription);
-  },
   methods: {
     onToggleSubscription() {
       this.mediator.toggleSubscription()
@@ -42,6 +35,7 @@ export default {
     <subscriptions
       :loading="store.isFetching.subscriptions"
       :subscribed="store.subscribed"
+      @toggleSubscription="onToggleSubscription"
     />
   </div>
 </template>

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

@@ -47,8 +47,25 @@
       },
     },
     methods: {
+      /**
+       * We need to emit this event on both component & eventHub
+       * for 2 dependencies;
+       *
+       * 1. eventHub: This component is used in Issue Boards sidebar
+       *              where component template is part of HAML
+       *              and event listeners are tied to app's eventHub.
+       * 2. Component: This compone is also used in Epics in EE
+       *               where listeners are tied to component event.
+       */
       toggleSubscription() {
+        // App's eventHub event emission.
         eventHub.$emit('toggleSubscription', this.id);
+
+        // Component event emission.
+        this.$emit('toggleSubscription', this.id);
+      },
+      onClickCollapsedIcon() {
+        this.$emit('toggleSidebar');
       },
     },
   };
@@ -56,7 +73,10 @@
 
 <template>
   <div>
-    <div class="sidebar-collapsed-icon">
+    <div
+      class="sidebar-collapsed-icon"
+      @click="onClickCollapsedIcon"
+    >
       <span
         v-tooltip
         :title="notificationTooltip"

app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.js

-export default {
-  name: 'time-tracking-no-tracking-pane',
-  template: `
-    <div class="time-tracking-no-tracking-pane">
-      <span class="no-value">
-        {{ __('No estimate or time spent') }}
-      </span>
-    </div>
-  `,
-};

app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue

+<script>
+export default {
+  name: 'TimeTrackingNoTrackingPane',
+};
+</script>
+
+<template>
+  <div class="time-tracking-no-tracking-pane">
+    <span class="no-value">
+      {{ __('No estimate or time spent') }}
+    </span>
+  </div>
+</template>

app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js → app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue

+<script>
 import $ from 'jquery';
 import _ from 'underscore';
 
@@ -10,14 +11,17 @@ import Mediator from '../../sidebar_mediator';
 import eventHub from '../../event_hub';
 
 export default {
+  components: {
+    IssuableTimeTracker,
+  },
   data() {
     return {
       mediator: new Mediator(),
       store: new Store(),
     };
   },
-  components: {
-    IssuableTimeTracker,
+  mounted() {
+    this.listenForQuickActions();
   },
   methods: {
     listenForQuickActions() {
@@ -41,18 +45,17 @@ export default {
       }
     },
   },
-  mounted() {
-    this.listenForQuickActions();
-  },
-  template: `
-    <div class="block">
-      <issuable-time-tracker
-        :time_estimate="store.timeEstimate"
-        :time_spent="store.totalTimeSpent"
-        :human_time_estimate="store.humanTimeEstimate"
-        :human_time_spent="store.humanTotalTimeSpent"
-        :rootPath="store.rootPath"
-      />
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="block">
+    <issuable-time-tracker
+      :time_estimate="store.timeEstimate"
+      :time_spent="store.totalTimeSpent"
+      :human_time_estimate="store.humanTimeEstimate"
+      :human_time_spent="store.humanTotalTimeSpent"
+      :root-path="store.rootPath"
+    />
+  </div>
+</template>

app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.js → app/assets/javascripts/sidebar/components/time_tracking/spent_only_pane.vue

+<script>
 export default {
-  name: 'time-tracking-spent-only-pane',
+  name: 'TimeTrackingSpentOnlyPane',
   props: {
     timeSpentHumanReadable: {
       type: String,
       required: true,
     },
   },
-  template: `
-    <div class="time-tracking-spend-only-pane">
-      <span class="bold">Spent:</span>
-      {{ timeSpentHumanReadable }}
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="time-tracking-spend-only-pane">
+    <span class="bold">Spent:</span>
+    {{ timeSpentHumanReadable }}
+  </div>
+</template>

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

 <script>
 import TimeTrackingHelpState from './help_state.vue';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
-import timeTrackingSpentOnlyPane from './spent_only_pane';
-import timeTrackingNoTrackingPane from './no_tracking_pane';
+import TimeTrackingSpentOnlyPane from './spent_only_pane.vue';
+import TimeTrackingNoTrackingPane from './no_tracking_pane.vue';
 import TimeTrackingEstimateOnlyPane from './estimate_only_pane.vue';
 import TimeTrackingComparisonPane from './comparison_pane.vue';
 
@@ -13,8 +13,8 @@ export default {
   components: {
     TimeTrackingCollapsedState,
     TimeTrackingEstimateOnlyPane,
-    'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
-    'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
+    TimeTrackingSpentOnlyPane,
+    TimeTrackingNoTrackingPane,
     TimeTrackingComparisonPane,
     TimeTrackingHelpState,
   },

app/assets/javascripts/sidebar/mount_sidebar.js

 import $ from 'jquery';
 import Vue from 'vue';
-import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
+import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking.vue';
 import SidebarAssignees from './components/assignees/sidebar_assignees.vue';
 import ConfidentialIssueSidebar from './components/confidential/confidential_issue_sidebar.vue';
 import SidebarMoveIssue from './lib/sidebar_move_issue';

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js → app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue

+<script>
 import $ from 'jquery';
 import statusIcon from '../mr_widget_status_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
 
 export default {
-  name: 'MRWidgetWIP',
-  props: {
-    mr: { type: Object, required: true },
-    service: { type: Object, required: true },
+  name: 'WorkInProgress',
+  components: {
+    statusIcon,
   },
   directives: {
     tooltip,
   },
+  props: {
+    mr: { type: Object, required: true },
+    service: { type: Object, required: true },
+  },
   data() {
     return {
       isMakingRequest: false,
     };
   },
-  components: {
-    statusIcon,
-  },
   methods: {
     removeWIP() {
       this.isMakingRequest = true;
@@ -36,32 +37,40 @@ export default {
         });
     },
   },
-  template: `
-    <div class="mr-widget-body media">
-      <status-icon status="warning" :show-disabled-button="Boolean(mr.removeWIPPath)" />
-      <div class="media-body space-children">
-        <span class="bold">
-          This is a Work in Progress
-          <i
-            v-tooltip
-            class="fa fa-question-circle"
-            title="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged"
-            aria-label="When this merge request is ready, remove the WIP: prefix from the title to allow it to be merged">
-           </i>
-        </span>
-        <button
-          v-if="mr.removeWIPPath"
-          @click="removeWIP"
-          :disabled="isMakingRequest"
-          type="button"
-          class="btn btn-default btn-xs js-remove-wip">
-          <i
-            v-if="isMakingRequest"
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true" />
-            Resolve WIP status
-        </button>
-      </div>
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="mr-widget-body media">
+    <status-icon
+      status="warning"
+      :show-disabled-button="Boolean(mr.removeWIPPath)"
+    />
+    <div class="media-body space-children">
+      <span class="bold">
+        This is a Work in Progress
+        <i
+          v-tooltip
+          class="fa fa-question-circle"
+          title="When this merge request is ready,
+          remove the WIP: prefix from the title to allow it to be merged"
+          aria-label="When this merge request is ready,
+          remove the WIP: prefix from the title to allow it to be merged">
+        </i>
+      </span>
+      <button
+        v-if="mr.removeWIPPath"
+        @click="removeWIP"
+        :disabled="isMakingRequest"
+        type="button"
+        class="btn btn-default btn-xs js-remove-wip">
+        <i
+          v-if="isMakingRequest"
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true">
+        </i>
+        Resolve WIP status
+      </button>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -21,7 +21,7 @@ export { default as MergedState } from './components/states/mr_widget_merged.vue
 export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge.vue';
 export { default as ClosedState } from './components/states/mr_widget_closed.vue';
 export { default as MergingState } from './components/states/mr_widget_merging.vue';
-export { default as WipState } from './components/states/mr_widget_wip';
+export { default as WorkInProgressState } from './components/states/work_in_progress.vue';
 export { default as ArchivedState } from './components/states/mr_widget_archived.vue';
 export { default as ConflictsState } from './components/states/mr_widget_conflicts.vue';
 export { default as NothingToMergeState } from './components/states/nothing_to_merge.vue';

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -12,7 +12,7 @@ import {
   ClosedState,
   MergingState,
   RebaseState,
-  WipState,
+  WorkInProgressState,
   ArchivedState,
   ConflictsState,
   NothingToMergeState,
@@ -220,7 +220,7 @@ export default {
     'mr-widget-closed': ClosedState,
     'mr-widget-merging': MergingState,
     'mr-widget-failed-to-merge': FailedToMerge,
-    'mr-widget-wip': WipState,
+    'mr-widget-wip': WorkInProgressState,
     'mr-widget-archived': ArchivedState,
     'mr-widget-conflicts': ConflictsState,
     'mr-widget-nothing-to-merge': NothingToMergeState,

app/assets/stylesheets/framework.scss

-@import "framework/variables";
-@import "framework/mixins";
+@import 'framework/variables';
+@import 'framework/mixins';
 @import 'framework/tw_bootstrap_variables';
 @import 'framework/tw_bootstrap';
-@import "framework/layout";
+@import 'framework/layout';
 
-@import "framework/animations";
-@import "framework/vue_transitions";
-@import "framework/avatar";
-@import "framework/asciidoctor";
-@import "framework/banner";
-@import "framework/blocks";
-@import "framework/buttons";
-@import "framework/badges";
-@import "framework/calendar";
-@import "framework/callout";
-@import "framework/common";
-@import "framework/dropdowns";
-@import "framework/files";
-@import "framework/filters";
-@import "framework/flash";
-@import "framework/forms";
-@import "framework/gfm";
-@import "framework/gitlab_theme";
-@import "framework/header";
-@import "framework/highlight";
-@import "framework/issue_box";
-@import "framework/jquery";
-@import "framework/lists";
-@import "framework/logo";
-@import "framework/markdown_area";
-@import "framework/media_object";
-@import "framework/mobile";
-@import "framework/modal";
-@import "framework/pagination";
-@import "framework/panels";
-@import "framework/popup";
-@import "framework/secondary_navigation_elements";
-@import "framework/selects";
-@import "framework/sidebar";
-@import "framework/contextual_sidebar";
-@import "framework/tables";
-@import "framework/notes";
-@import "framework/tabs";
-@import "framework/timeline";
-@import "framework/tooltips";
-@import "framework/toggle";
-@import "framework/typography";
-@import "framework/zen";
-@import "framework/blank";
-@import "framework/wells";
-@import "framework/page_header";
-@import "framework/awards";
-@import "framework/images";
-@import "framework/broadcast_messages";
-@import "framework/emojis";
-@import "framework/emoji_sprites";
-@import "framework/icons";
-@import "framework/snippets";
-@import "framework/memory_graph";
-@import "framework/responsive_tables";
-@import "framework/stacked_progress_bar";
-@import "framework/ci_variable_list";
-@import "framework/feature_highlight";
+@import 'framework/animations';
+@import 'framework/vue_transitions';
+@import 'framework/avatar';
+@import 'framework/asciidoctor';
+@import 'framework/banner';
+@import 'framework/blocks';
+@import 'framework/buttons';
+@import 'framework/badges';
+@import 'framework/calendar';
+@import 'framework/callout';
+@import 'framework/common';
+@import 'framework/dropdowns';
+@import 'framework/files';
+@import 'framework/filters';
+@import 'framework/flash';
+@import 'framework/forms';
+@import 'framework/gfm';
+@import 'framework/gitlab_theme';
+@import 'framework/header';
+@import 'framework/highlight';
+@import 'framework/issue_box';
+@import 'framework/jquery';
+@import 'framework/lists';
+@import 'framework/logo';
+@import 'framework/markdown_area';
+@import 'framework/media_object';
+@import 'framework/mobile';
+@import 'framework/modal';
+@import 'framework/pagination';
+@import 'framework/panels';
+@import 'framework/popup';
+@import 'framework/secondary_navigation_elements';
+@import 'framework/selects';
+@import 'framework/sidebar';
+@import 'framework/contextual_sidebar';
+@import 'framework/tables';
+@import 'framework/notes';
+@import 'framework/tabs';
+@import 'framework/timeline';
+@import 'framework/tooltips';
+@import 'framework/toggle';
+@import 'framework/typography';
+@import 'framework/zen';
+@import 'framework/blank';
+@import 'framework/wells';
+@import 'framework/page_header';
+@import 'framework/awards';
+@import 'framework/images';
+@import 'framework/broadcast_messages';
+@import 'framework/emojis';
+@import 'framework/icons';
+@import 'framework/snippets';
+@import 'framework/memory_graph';
+@import 'framework/responsive_tables';
+@import 'framework/stacked_progress_bar';
+@import 'framework/ci_variable_list';
+@import 'framework/feature_highlight';
+@import 'framework/terms';

app/assets/stylesheets/framework/blocks.scss

@@ -46,7 +46,7 @@
   }
 
   &.middle-block {
-    margin-top: 0;
+    margin-top: $gl-padding-24;
     margin-bottom: 0;
   }
 
@@ -61,7 +61,7 @@
   }
 
   &.footer-block {
-    margin-top: 0;
+    margin-top: $gl-padding-24;
     border-bottom: 0;
     margin-bottom: -$gl-padding;
   }

app/assets/stylesheets/framework/common.scss

@@ -452,6 +452,7 @@ img.emoji {
 
 /** COMMON CLASSES **/
 .prepend-top-0 { margin-top: 0; }
+.prepend-top-2 { margin-top: 2px; }
 .prepend-top-5 { margin-top: 5px; }
 .prepend-top-8 { margin-top: $grid-size; }
 .prepend-top-10 { margin-top: 10px; }

app/assets/stylesheets/framework/images.scss

@@ -39,35 +39,10 @@
 svg {
   fill: currentColor;
 
-  &.s8 {
-    @include svg-size(8px);
-  }
-
-  &.s12 {
-    @include svg-size(12px);
-  }
-
-  &.s16 {
-    @include svg-size(16px);
-  }
-
-  &.s18 {
-    @include svg-size(18px);
-  }
-
-  &.s24 {
-    @include svg-size(24px);
-  }
-
-  &.s32 {
-    @include svg-size(32px);
-  }
-
-  &.s48 {
-    @include svg-size(48px);
-  }
-
-  &.s72 {
-    @include svg-size(72px);
+  $svg-sizes: 8 12 16 18 24 32 48 72;
+  @each $svg-size in $svg-sizes {
+    &.s#{$svg-size} {
+      @include svg-size(#{$svg-size}px);
+    }
   }
 }

app/assets/stylesheets/framework/markdown_area.scss

@@ -107,6 +107,16 @@
   padding-top: 10px;
 }
 
+.referenced-commands {
+  background: $blue-50;
+  padding: $gl-padding-8 $gl-padding;
+  border-radius: $border-radius-default;
+
+  p {
+    margin: 0;
+  }
+}
+
 .md-preview-holder {
   min-height: 167px;
   padding: 10px 0;

app/assets/stylesheets/framework/terms.scss

+.terms {
+  .with-performance-bar & {
+    margin-top: 0;
+  }
+
+  .alert-wrapper {
+    min-height: $header-height + $gl-padding;
+  }
+
+  .content {
+    padding-top: $gl-padding;
+  }
+
+  .panel {
+    .panel-heading {
+      display: -webkit-flex;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .title {
+        display: flex;
+        align-items: center;
+
+        .logo-text {
+          width: 55px;
+          height: 24px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+      }
+
+      .navbar-collapse {
+        padding-right: 0;
+      }
+
+      .nav li a {
+        color: $theme-gray-700;
+      }
+    }
+
+    .panel-content {
+      padding: $gl-padding;
+
+      *:first-child {
+        margin-top: 0;
+      }
+
+      *:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .footer-block {
+      margin: 0;
+    }
+  }
+}

app/assets/stylesheets/framework/variables.scss

@@ -212,6 +212,7 @@ $tooltip-font-size: 12px;
 /*
  * Padding
  */
+$gl-padding-24: 24px;
 $gl-padding: 16px;
 $gl-padding-8: 8px;
 $gl-padding-4: 4px;
@@ -689,6 +690,8 @@ $stage-hover-bg: $gray-darker;
 $ci-action-icon-size: 22px;
 $pipeline-dropdown-line-height: 20px;
 $pipeline-dropdown-status-icon-size: 18px;
+$ci-action-dropdown-button-size: 24px;
+$ci-action-dropdown-svg-size: 12px;
 
 /*
 CI variable lists

app/assets/stylesheets/pages/boards.scss

@@ -317,6 +317,7 @@
   a {
     color: $gl-text-color;
     word-wrap: break-word;
+    word-break: break-word;
     margin-right: 2px;
   }
 }
@@ -462,6 +463,7 @@
 
   .issuable-header-text {
     padding-right: 35px;
+    word-break: break-word;
 
     > strong {
       font-weight: $gl-font-weight-bold;

app/assets/stylesheets/pages/diff.scss

@@ -44,6 +44,12 @@
       }
     }
 
+    .note-text {
+      table {
+        font-family: $font-family-sans-serif;
+      }
+    }
+
     table {
       width: 100%;
       font-family: $monospace_font;

app/assets/stylesheets/pages/merge_requests.scss

@@ -156,10 +156,6 @@
     .dropdown-menu {
       z-index: 300;
     }
-
-    .ci-action-icon-wrapper {
-      line-height: 16px;
-    }
   }
 
   .mini-pipeline-graph-dropdown-toggle {

app/assets/stylesheets/pages/pipelines.scss

@@ -22,7 +22,6 @@
   }
 
   .ci-table {
-
     .label {
       margin-bottom: 3px;
     }
@@ -123,7 +122,6 @@
   }
 
   .branch-commit {
-
     .ref-name {
       font-weight: $gl-font-weight-bold;
       max-width: 100px;
@@ -481,43 +479,6 @@
       @extend .build-content:hover;
     }
 
-    .ci-action-icon-container {
-      position: absolute;
-      right: 5px;
-      top: 5px;
-
-      // Action Icons in big pipeline-graph nodes
-      &.ci-action-icon-wrapper {
-        height: 30px;
-        width: 30px;
-        background: $white-light;
-        border: 1px solid $border-color;
-        border-radius: 100%;
-        display: block;
-
-        &:hover {
-          background-color: $stage-hover-bg;
-          border: 1px solid $dropdown-toggle-active-border-color;
-
-          svg {
-            fill: $gl-text-color;
-          }
-        }
-
-        svg {
-          fill: $gl-text-color-secondary;
-          position: relative;
-          top: -1px;
-        }
-
-        &.play {
-          svg {
-            left: 2px;
-          }
-        }
-      }
-    }
-
     .ci-status-icon svg {
       height: 20px;
       width: 20px;
@@ -548,7 +509,6 @@
       border: 1px solid $dropdown-toggle-active-border-color;
     }
 
-
     // Connect first build in each stage with right horizontal line
     &:first-child {
       &::after {
@@ -602,6 +562,43 @@
       }
     }
   }
+
+  .ci-action-icon-container {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+
+    // Action Icons in big pipeline-graph nodes
+    &.ci-action-icon-wrapper {
+      height: 30px;
+      width: 30px;
+      background: $white-light;
+      border: 1px solid $border-color;
+      border-radius: 100%;
+      display: block;
+
+      &:hover {
+        background-color: $stage-hover-bg;
+        border: 1px solid $dropdown-toggle-active-border-color;
+
+        svg {
+          fill: $gl-text-color;
+        }
+      }
+
+      svg {
+        fill: $gl-text-color-secondary;
+        position: relative;
+        top: -1px;
+      }
+
+      &.play {
+        svg {
+          left: 2px;
+        }
+      }
+    }
+  }
 }
 
 // Triggers the dropdown in the big pipeline graph
@@ -710,93 +707,77 @@ button.mini-pipeline-graph-dropdown-toggle {
   }
 }
 
-// dropdown content for big and mini pipeline
+/**
+ Action icons inside dropdowns:
+ - mini graph in pipelines table
+ - dropdown in big graph
+ - mini graph in MR widget pipeline
+ - mini graph in Commit widget pipeline
+*/
 .big-pipeline-graph-dropdown-menu,
 .mini-pipeline-graph-dropdown-menu {
   width: 240px;
   max-width: 240px;
 
-  .scrollable-menu {
+  // override dropdown.scss
+  &.dropdown-menu li button,
+  &.dropdown-menu li a.ci-action-icon-container {
     padding: 0;
-    max-height: 245px;
-    overflow: auto;
+    text-align: center;
   }
 
-  li {
-    position: relative;
+  .ci-action-icon-container {
+    position: absolute;
+    right: 8px;
+    top: 8px;
 
-    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
-    &:hover > .mini-pipeline-graph-dropdown-item,
-    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
-      @extend .mini-pipeline-graph-dropdown-item:hover;
-    }
+    &.ci-action-icon-wrapper {
+      height: $ci-action-dropdown-button-size;
+      width: $ci-action-dropdown-button-size;
 
-    // Action icon on the right
-    a.ci-action-icon-wrapper {
-      border-radius: 50%;
+      background: $white-light;
       border: 1px solid $border-color;
-      width: $ci-action-icon-size;
-      height: $ci-action-icon-size;
-      padding: 2px 0 0 5px;
-      font-size: 12px;
-      background-color: $white-light;
-      position: absolute;
-      top: 50%;
-      right: $gl-padding;
-      margin-top: -#{$ci-action-icon-size / 2};
+      border-radius: 50%;
+      display: block;
 
-      &:hover,
-      &:focus {
+      &:hover {
         background-color: $stage-hover-bg;
         border: 1px solid $dropdown-toggle-active-border-color;
+
+        svg {
+          fill: $gl-text-color;
+        }
       }
 
       svg {
+        width: $ci-action-dropdown-svg-size;
+        height: $ci-action-dropdown-svg-size;
         fill: $gl-text-color-secondary;
-        width: #{$ci-action-icon-size - 6};
-        height: #{$ci-action-icon-size - 6};
-        left: -3px;
         position: relative;
-        top: -1px;
-
-        &.icon-action-stop,
-        &.icon-action-cancel {
-          width: 12px;
-          height: 12px;
-          top: 1px;
-          left: -1px;
-        }
-
-        &.icon-action-play {
-          width: 11px;
-          height: 11px;
-          top: 1px;
-          left: 1px;
-        }
-
-        &.icon-action-retry {
-          width: 16px;
-          height: 16px;
-          top: 0;
-          left: -3px;
-        }
+        top: 0;
+        vertical-align: initial;
       }
+    }
+  }
 
-      &:hover svg,
-      &:focus svg {
-        fill: $gl-text-color;
-      }
+   // SVGs in the commit widget and mr widget
+  a.ci-action-icon-container.ci-action-icon-wrapper svg {
+    top: 2px;
+  }
 
-      &.icon-action-retry,
-      &.icon-action-play {
-        svg {
-          width: #{$ci-action-icon-size - 6};
-          height: #{$ci-action-icon-size - 6};
-          left: 8px;
-        }
-      }
+  .scrollable-menu {
+    padding: 0;
+    max-height: 245px;
+    overflow: auto;
+  }
 
+  li {
+    position: relative;
 
+    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
+    &:hover > .mini-pipeline-graph-dropdown-item,
+    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
+      @extend .mini-pipeline-graph-dropdown-item:hover;
     }
 
     // link to the build
@@ -808,6 +789,11 @@ button.mini-pipeline-graph-dropdown-toggle {
       line-height: $line-height-base;
       white-space: nowrap;
 
+      // Match dropdown.scss for all `a` tags
+      &.non-details-job-component {
+        padding: 8px 16px;
+      }
+
       .ci-job-name-component {
         align-items: center;
         display: flex;
@@ -939,7 +925,7 @@ button.mini-pipeline-graph-dropdown-toggle {
   &.dropdown-menu {
     transform: translate(-80%, 0);
 
-    @media(min-width: $screen-md-min) {
+    @media (min-width: $screen-md-min) {
       transform: translate(-50%, 0);
       right: auto;
       left: 50%;

app/assets/stylesheets/pages/repo.scss

@@ -440,6 +440,7 @@
   padding-right: 3px;
 
   .projects-sidebar {
+    min-height: 0;
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -549,6 +550,7 @@
   margin-bottom: 0;
   border-bottom: 1px solid $white-dark;
   padding: $gl-btn-padding 0;
+  min-height: 56px;
 }
 
 .multi-file-commit-panel-header-title {
@@ -602,14 +604,14 @@
   }
 }
 
-.multi-file-additions,
-.multi-file-additions-solid {
-  fill: $green-500;
+.multi-file-addition,
+.multi-file-addition-solid {
+  color: $green-500;
 }
 
 .multi-file-modified,
 .multi-file-modified-solid {
-  fill: $orange-500;
+  color: $orange-500;
 }
 
 .multi-file-commit-list-collapsed {
@@ -673,6 +675,24 @@
   }
 }
 
+.multi-file-commit-panel-bottom {
+  position: relative;
+
+  .multi-file-commit-panel-success-message {
+    position: absolute;
+    top: 1px;
+    left: 3px;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    background: $gray-light;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
 .dirty-diff {
   // !important need to override monaco inline style
   width: 4px !important;
@@ -972,6 +992,12 @@
   resize: none;
 }
 
+.ide-tree-changes {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+
 .ide-new-modal-label {
   line-height: 34px;
 }

app/controllers/application_controller.rb

@@ -13,12 +13,14 @@ class ApplicationController < ActionController::Base
 
   before_action :authenticate_sessionless_user!
   before_action :authenticate_user!
+  before_action :enforce_terms!, if: -> { Gitlab::CurrentSettings.current_application_settings.enforce_terms },
+                                 unless: :peek_request?
   before_action :validate_user_service_ticket!
   before_action :check_password_expiration
   before_action :ldap_security_check
   before_action :sentry_context
   before_action :default_headers
-  before_action :add_gon_variables, unless: -> { request.path.start_with?('/-/peek') }
+  before_action :add_gon_variables, unless: :peek_request?
   before_action :configure_permitted_parameters, if: :devise_controller?
   before_action :require_email, unless: :devise_controller?
 
@@ -110,7 +112,8 @@ class ApplicationController < ActionController::Base
   def log_exception(exception)
     Raven.capture_exception(exception) if sentry_enabled?
 
-    application_trace = ActionDispatch::ExceptionWrapper.new(env, exception).application_trace
+    backtrace_cleaner = Gitlab.rails5? ? env["action_dispatch.backtrace_cleaner"] : env
+    application_trace = ActionDispatch::ExceptionWrapper.new(backtrace_cleaner, exception).application_trace
     application_trace.map! { |t| "  #{t}\n" }
     logger.error "\n#{exception.class.name} (#{exception.message}):\n#{application_trace.join}"
   end
@@ -268,6 +271,27 @@ class ApplicationController < ActionController::Base
     end
   end
 
+  def enforce_terms!
+    return unless current_user
+    return if current_user.terms_accepted?
+
+    if sessionless_user?
+      render_403
+    else
+      # Redirect to the destination if the request is a get.
+      # Redirect to the source if it was a post, so the user can re-submit after
+      # accepting the terms.
+      redirect_path = if request.get?
+                        request.fullpath
+                      else
+                        URI(request.referer).path if request.referer
+                      end
+
+      flash[:notice] = _("Please accept the Terms of Service before continuing.")
+      redirect_to terms_path(redirect: redirect_path), status: :found
+    end
+  end
+
   def import_sources_enabled?
     !Gitlab::CurrentSettings.import_sources.empty?
   end
@@ -341,4 +365,12 @@ class ApplicationController < ActionController::Base
     # Per https://tools.ietf.org/html/rfc5987, headers need to be ISO-8859-1, not UTF-8
     response.headers['Page-Title'] = URI.escape(page_title('GitLab'))
   end
+
+  def sessionless_user?
+    current_user && !session.keys.include?('warden.user.user.key')
+  end
+
+  def peek_request?
+    request.path.start_with?('/-/peek')
+  end
 end

app/controllers/concerns/continue_params.rb

 module ContinueParams
+  include InternalRedirect
   extend ActiveSupport::Concern
 
   def continue_params
@@ -6,8 +7,7 @@ module ContinueParams
     return nil unless continue_params
 
     continue_params = continue_params.permit(:to, :notice, :notice_now)
-    return unless continue_params[:to] && continue_params[:to].start_with?('/')
-    return if continue_params[:to].start_with?('//')
+    continue_params[:to] = safe_redirect_path(continue_params[:to])
 
     continue_params
   end

app/controllers/concerns/internal_redirect.rb

+module InternalRedirect
+  extend ActiveSupport::Concern
+
+  def safe_redirect_path(path)
+    return unless path
+    # Verify that the string starts with a `/` but not a double `/`.
+    return unless path =~ %r{^/\w.*$}
+
+    uri = URI(path)
+    # Ignore anything path of the redirect except for the path, querystring and,
+    # fragment, forcing the redirect within the same host.
+    full_path_for_uri(uri)
+  rescue URI::InvalidURIError
+    nil
+  end
+
+  def safe_redirect_path_for_url(url)
+    return unless url
+
+    uri = URI(url)
+    safe_redirect_path(full_path_for_uri(uri)) if host_allowed?(uri)
+  rescue URI::InvalidURIError
+    nil
+  end
+
+  def host_allowed?(uri)
+    uri.host == request.host &&
+      uri.port == request.port
+  end
+
+  def full_path_for_uri(uri)
+    path_with_query = [uri.path, uri.query].compact.join('?')
+    [path_with_query, uri.fragment].compact.join("#")
+  end
+end

app/controllers/concerns/issuable_collections.rb

@@ -57,7 +57,7 @@ module IssuableCollections
     out_of_range = @issuables.current_page > total_pages # rubocop:disable Gitlab/ModuleWithInstanceVariables
 
     if out_of_range
-      redirect_to(url_for(params.merge(page: total_pages, only_path: true)))
+      redirect_to(url_for(safe_params.merge(page: total_pages, only_path: true)))
     end
 
     out_of_range

app/controllers/groups/application_controller.rb

@@ -33,6 +33,6 @@ class Groups::ApplicationController < ApplicationController
   def build_canonical_path(group)
     params[:group_id] = group.to_param
 
-    url_for(params)
+    url_for(safe_params)
   end
 end

app/controllers/import/base_controller.rb

 class Import::BaseController < ApplicationController
   private
 
+  def find_already_added_projects(import_type)
+    current_user.created_projects.where(import_type: import_type).includes(:import_state)
+  end
+
+  def find_jobs(import_type)
+    current_user.created_projects
+        .includes(:import_state)
+        .where(import_type: import_type)
+        .to_json(only: [:id], methods: [:import_status])
+  end
+
   def find_or_create_namespace(names, owner)
     names = params[:target_namespace].presence || names
 

app/controllers/import/bitbucket_controller.rb

@@ -22,16 +22,14 @@ class Import::BitbucketController < Import::BaseController
 
     @repos, @incompatible_repos = repos.partition { |repo| repo.valid? }
 
-    @already_added_projects = current_user.created_projects.where(import_type: 'bitbucket')
+    @already_added_projects = find_already_added_projects('bitbucket')
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
     @repos.to_a.reject! { |repo| already_added_projects_names.include?(repo.full_name) }
   end
 
   def jobs
-    render json: current_user.created_projects
-                             .where(import_type: 'bitbucket')
-                             .to_json(only: [:id, :import_status])
+    render json: find_jobs('bitbucket')
   end
 
   def create

app/controllers/import/fogbugz_controller.rb

@@ -46,15 +46,14 @@ class Import::FogbugzController < Import::BaseController
 
     @repos = client.repos
 
-    @already_added_projects = current_user.created_projects.where(import_type: 'fogbugz')
+    @already_added_projects = find_already_added_projects('fogbugz')
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
     @repos.reject! { |repo| already_added_projects_names.include? repo.name }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: 'fogbugz').to_json(only: [:id, :import_status])
-    render json: jobs
+    render json: find_jobs('fogbugz')
   end
 
   def create

app/controllers/import/github_controller.rb

@@ -24,15 +24,14 @@ class Import::GithubController < Import::BaseController
 
   def status
     @repos = client.repos
-    @already_added_projects = current_user.created_projects.where(import_type: provider)
+    @already_added_projects = find_already_added_projects(provider)
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
     @repos.reject! { |repo| already_added_projects_names.include? repo.full_name }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: provider).to_json(only: [:id, :import_status])
-    render json: jobs
+    render json: find_jobs(provider)
   end
 
   def create

app/controllers/import/gitlab_controller.rb

@@ -12,15 +12,14 @@ class Import::GitlabController < Import::BaseController
   def status
     @repos = client.projects
 
-    @already_added_projects = current_user.created_projects.where(import_type: "gitlab")
+    @already_added_projects = find_already_added_projects('gitlab')
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
     @repos = @repos.to_a.reject { |repo| already_added_projects_names.include? repo["path_with_namespace"] }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: "gitlab").to_json(only: [:id, :import_status])
-    render json: jobs
+    render json: find_jobs('gitlab')
   end
 
   def create

app/controllers/import/google_code_controller.rb

@@ -73,15 +73,14 @@ class Import::GoogleCodeController < Import::BaseController
     @repos = client.repos
     @incompatible_repos = client.incompatible_repos
 
-    @already_added_projects = current_user.created_projects.where(import_type: "google_code")
+    @already_added_projects = find_already_added_projects('google_code')
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
     @repos.reject! { |repo| already_added_projects_names.include? repo.name }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: "google_code").to_json(only: [:id, :import_status])
-    render json: jobs
+    render json: find_jobs('google_code')
   end
 
   def create

app/controllers/omniauth_callbacks_controller.rb

@@ -82,7 +82,7 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
 
       if identity_linker.changed?
         redirect_identity_linked
-      elsif identity_linker.error_message.present?
+      elsif identity_linker.failed?
         redirect_identity_link_failed(identity_linker.error_message)
       else
         redirect_identity_exists

app/controllers/profiles/active_sessions_controller.rb

+class Profiles::ActiveSessionsController < Profiles::ApplicationController
+  def index
+    @sessions = ActiveSession.list(current_user)
+  end
+
+  def destroy
+    ActiveSession.destroy(current_user, params[:id])
+
+    respond_to do |format|
+      format.html { redirect_to profile_active_sessions_url, status: 302 }
+      format.js { head :ok }
+    end
+  end
+end

app/controllers/projects/application_controller.rb

@@ -25,7 +25,7 @@ class Projects::ApplicationController < ApplicationController
     params[:namespace_id] = project.namespace.to_param
     params[:project_id] = project.to_param
 
-    url_for(params)
+    url_for(safe_params)
   end
 
   def repository

app/controllers/projects/compare_controller.rb

@@ -8,8 +8,11 @@ class Projects::CompareController < Projects::ApplicationController
   # Authorize
   before_action :require_non_empty_project
   before_action :authorize_download_code!
-  before_action :define_ref_vars, only: [:index, :show, :diff_for_path]
-  before_action :define_diff_vars, only: [:show, :diff_for_path]
+  # Defining ivars
+  before_action :define_diffs, only: [:show, :diff_for_path]
+  before_action :define_environment, only: [:show]
+  before_action :define_diff_notes_disabled, only: [:show, :diff_for_path]
+  before_action :define_commits, only: [:show, :diff_for_path, :signatures]
   before_action :merge_request, only: [:index, :show]
 
   def index
@@ -22,9 +25,9 @@ class Projects::CompareController < Projects::ApplicationController
   end
 
   def diff_for_path
-    return render_404 unless @compare
+    return render_404 unless compare
 
-    render_diff_for_path(@compare.diffs(diff_options))
+    render_diff_for_path(compare.diffs(diff_options))
   end
 
   def create
@@ -41,30 +44,60 @@ class Projects::CompareController < Projects::ApplicationController
     end
   end
 
+  def signatures
+    respond_to do |format|
+      format.json do
+        render json: {
+          signatures: @commits.select(&:has_signature?).map do |commit|
+            {
+              commit_sha: commit.sha,
+              html: view_to_html_string('projects/commit/_signature', signature: commit.signature)
+            }
+          end
+        }
+      end
+    end
+  end
+
   private
 
-  def define_ref_vars
-    @start_ref = Addressable::URI.unescape(params[:from])
+  def compare
+    return @compare if defined?(@compare)
+
+    @compare = CompareService.new(@project, head_ref).execute(@project, start_ref)
+  end
+
+  def start_ref
+    @start_ref ||= Addressable::URI.unescape(params[:from])
+  end
+
+  def head_ref
+    return @ref if defined?(@ref)
+
     @ref = @head_ref = Addressable::URI.unescape(params[:to])
   end
 
-  def define_diff_vars
-    @compare = CompareService.new(@project, @head_ref)
-      .execute(@project, @start_ref)
+  def define_commits
+    @commits = compare.present? ? prepare_commits_for_rendering(compare.commits) : []
+  end
 
-    if @compare
-      @commits = prepare_commits_for_rendering(@compare.commits)
-      @diffs = @compare.diffs(diff_options)
+  def define_diffs
+    @diffs = compare.present? ? compare.diffs(diff_options) : []
+  end
 
-      environment_params = @repository.branch_exists?(@head_ref) ? { ref: @head_ref } : { commit: @compare.commit }
+  def define_environment
+    if compare
+      environment_params = @repository.branch_exists?(head_ref) ? { ref: head_ref } : { commit: compare.commit }
       @environment = EnvironmentsFinder.new(@project, current_user, environment_params).execute.last
-
-      @diff_notes_disabled = true
     end
   end
 
+  def define_diff_notes_disabled
+    @diff_notes_disabled = compare.present?
+  end
+
   def merge_request
     @merge_request ||= MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened
-      .find_by(source_project: @project, source_branch: @head_ref, target_branch: @start_ref)
+      .find_by(source_project: @project, source_branch: head_ref, target_branch: start_ref)
   end
 end

app/controllers/projects/lfs_storage_controller.rb

@@ -77,8 +77,7 @@ class Projects::LfsStorageController < Projects::GitHttpClientController
 
   def link_to_project!(object)
     if object && !object.projects.exists?(storage_project.id)
-      object.projects << storage_project
-      object.save!
+      object.lfs_objects_projects.create!(project: storage_project)
     end
   end
 end

app/controllers/projects/merge_requests/creations_controller.rb

@@ -83,13 +83,6 @@ class Projects::MergeRequests::CreationsController < Projects::MergeRequests::Ap
     render layout: false
   end
 
-  def update_branches
-    @target_project = selected_target_project
-    @target_branches = @target_project ? @target_project.repository.branch_names : []
-
-    render layout: false
-  end
-
   private
 
   def build_merge_request

app/controllers/projects/pipelines_controller.rb

@@ -104,9 +104,18 @@ class Projects::PipelinesController < Projects::ApplicationController
     @stage = pipeline.legacy_stage(params[:stage])
     return not_found unless @stage
 
-    respond_to do |format|
-      format.json { render json: { html: view_to_html_string('projects/pipelines/_stage') } }
-    end
+    render json: StageSerializer
+      .new(project: @project, current_user: @current_user)
+      .represent(@stage, details: true)
+  end
+
+  # TODO: This endpoint is used by mini-pipeline-graph
+  # TODO: This endpoint should be migrated to `stage.json`
+  def stage_ajax
+    @stage = pipeline.legacy_stage(params[:stage])
+    return not_found unless @stage
+
+    render json: { html: view_to_html_string('projects/pipelines/_stage') }
   end
 
   def retry
@@ -157,7 +166,7 @@ class Projects::PipelinesController < Projects::ApplicationController
   end
 
   def create_params
-    params.require(:pipeline).permit(:ref)
+    params.require(:pipeline).permit(:ref, variables_attributes: %i[key secret_value])
   end
 
   def pipeline

app/controllers/projects/runners_controller.rb

@@ -52,6 +52,12 @@ class Projects::RunnersController < Projects::ApplicationController
     redirect_to project_settings_ci_cd_path(@project)
   end
 
+  def toggle_group_runners
+    project.toggle_ci_cd_settings!(:group_runners_enabled)
+
+    redirect_to project_settings_ci_cd_path(@project)
+  end
+
   protected
 
   def set_runner

app/controllers/projects/settings/ci_cd_controller.rb

@@ -67,10 +67,18 @@ module Projects
 
       def define_runners_variables
         @project_runners = @project.runners.ordered
-        @assignable_runners = current_user.ci_authorized_runners
-          .assignable_for(project).ordered.page(params[:page]).per(20)
+
+        @assignable_runners = current_user
+          .ci_authorized_runners
+          .assignable_for(project)
+          .ordered
+          .page(params[:page]).per(20)
+
         @shared_runners = ::Ci::Runner.shared.active
+
         @shared_runners_count = @shared_runners.count(:all)
+
+        @group_runners = ::Ci::Runner.belonging_to_parent_group_of_project(@project.id)
       end
 
       def define_secret_variables

app/controllers/sessions_controller.rb

 class SessionsController < Devise::SessionsController
+  include InternalRedirect
   include AuthenticatesWithTwoFactor
   include Devise::Controllers::Rememberable
   include Recaptcha::ClientHelper
@@ -102,18 +103,12 @@ class SessionsController < Devise::SessionsController
     # we should never redirect to '/users/sign_in' after signing in successfully.
     return true if redirect_uri.path == new_user_session_path
 
-    redirect_to = redirect_uri.to_s if redirect_allowed_to?(redirect_uri)
+    redirect_to = redirect_uri.to_s if host_allowed?(redirect_uri)
 
     @redirect_to = redirect_to
     store_location_for(:redirect, redirect_to)
   end
 
-  # Overridden in EE
-  def redirect_allowed_to?(uri)
-    uri.host == Gitlab.config.gitlab.host &&
-      uri.port == Gitlab.config.gitlab.port
-  end
-
   def two_factor_enabled?
     find_user&.two_factor_enabled?
   end

app/controllers/users/terms_controller.rb

+module Users
+  class TermsController < ApplicationController
+    include InternalRedirect
+
+    skip_before_action :enforce_terms!
+    before_action :terms
+
+    layout 'terms'
+
+    def index
+      @redirect = redirect_path
+    end
+
+    def accept
+      agreement = Users::RespondToTermsService.new(current_user, viewed_term)
+                    .execute(accepted: true)
+
+      if agreement.persisted?
+        redirect_to redirect_path
+      else
+        flash[:alert] = agreement.errors.full_messages.join(', ')
+        redirect_to terms_path, redirect: redirect_path
+      end
+    end
+
+    def decline
+      agreement = Users::RespondToTermsService.new(current_user, viewed_term)
+                    .execute(accepted: false)
+
+      if agreement.persisted?
+        sign_out(current_user)
+        redirect_to root_path
+      else
+        flash[:alert] = agreement.errors.full_messages.join(', ')
+        redirect_to terms_path, redirect: redirect_path
+      end
+    end
+
+    private
+
+    def viewed_term
+      @viewed_term ||= ApplicationSetting::Term.find(params[:id])
+    end
+
+    def terms
+      unless @term = Gitlab::CurrentSettings.current_application_settings.latest_terms
+        redirect_to redirect_path
+      end
+    end
+
+    def redirect_path
+      redirect_to_path = safe_redirect_path(params[:redirect]) || safe_redirect_path_for_url(request.referer)
+
+      if redirect_to_path &&
+          excluded_redirect_paths.none? { |excluded| redirect_to_path.include?(excluded) }
+        redirect_to_path
+      else
+        root_path
+      end
+    end
+
+    def excluded_redirect_paths
+      [terms_path, new_user_session_path]
+    end
+  end
+end