Add latest changes from gitlab-org/gitlab@master

48 files changed, 324 insertions, 195 deletions

diff --git a/.gitlab/issue_templates/Feature proposal.md b/.gitlab/issue_templates/Feature proposal.md
index 2d6d03c313c..45e9c58205f 100644
--- a/.gitlab/issue_templates/Feature proposal.md
+++ b/.gitlab/issue_templates/Feature proposal.md
@@ -6,6 +6,7 @@
 
 <!-- Who will use this feature? If known, include any of the following: types of users (e.g. Developer), personas, or specific company roles (e.g. Release Manager). It's okay to write "Unknown" and fill this field in later.
 
+* [Rachel (Release Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#rachel-release-manager)
 * [Parker (Product Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#parker-product-manager)
 * [Delaney (Development Team Lead)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#delaney-development-team-lead)
 * [Sasha (Software Developer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#sasha-software-developer)
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 08b3e8a34d6..7e2ab96d1de 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -32,7 +32,13 @@ export default {
     ...mapState('rightPane', {
       rightPaneIsOpen: 'isOpen',
     }),
-    ...mapState(['rightPanelCollapsed', 'viewer', 'panelResizing', 'currentActivityView']),
+    ...mapState([
+      'rightPanelCollapsed',
+      'viewer',
+      'panelResizing',
+      'currentActivityView',
+      'renderWhitespaceInCode',
+    ]),
     ...mapGetters([
       'currentMergeRequest',
       'getStagedFile',
@@ -76,6 +82,11 @@ export default {
     showEditor() {
       return !this.shouldHideEditor && this.isEditorViewMode;
     },
+    editorOptions() {
+      return {
+        renderWhitespace: this.renderWhitespaceInCode ? 'all' : 'none',
+      };
+    },
   },
   watch: {
     file(newVal, oldVal) {
@@ -131,7 +142,7 @@ export default {
   },
   mounted() {
     if (!this.editor) {
-      this.editor = Editor.create();
+      this.editor = Editor.create(this.editorOptions);
     }
     this.initEditor();
   },
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index cdfebd19fa4..4c4166e11f5 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -50,6 +50,7 @@ export function initIde(el, options = {}) {
       });
       this.setInitialData({
         clientsidePreviewEnabled: parseBoolean(el.dataset.clientsidePreviewEnabled),
+        renderWhitespaceInCode: parseBoolean(el.dataset.renderWhitespaceInCode),
       });
     },
     methods: {
diff --git a/app/assets/javascripts/ide/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index 02038fcb534..d1056ea6b98 100644
--- a/app/assets/javascripts/ide/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -23,20 +23,24 @@ export const clearDomElement = el => {
 };
 
 export default class Editor {
-  static create() {
+  static create(options = {}) {
     if (!this.editorInstance) {
-      this.editorInstance = new Editor();
+      this.editorInstance = new Editor(options);
     }
     return this.editorInstance;
   }
 
-  constructor() {
+  constructor(options = {}) {
     this.currentModel = null;
     this.instance = null;
     this.dirtyDiffController = null;
     this.disposable = new Disposable();
     this.modelManager = new ModelManager();
     this.decorationsController = new DecorationsController(this);
+    this.options = {
+      ...defaultEditorOptions,
+      ...options,
+    };
 
     setupMonacoTheme();
 
@@ -51,7 +55,7 @@ export default class Editor {
 
       this.disposable.add(
         (this.instance = monacoEditor.create(domElement, {
-          ...defaultEditorOptions,
+          ...this.options,
         })),
         (this.dirtyDiffController = new DirtyDiffController(
           this.modelManager,
@@ -71,7 +75,7 @@ export default class Editor {
 
       this.disposable.add(
         (this.instance = monacoEditor.createDiffEditor(domElement, {
-          ...defaultEditorOptions,
+          ...this.options,
           quickSuggestions: false,
           occurrencesHighlight: false,
           renderSideBySide: Editor.renderSideBySide(domElement),
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index d400b9831a9..6488389977c 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -31,4 +31,5 @@ export default () => ({
     entry: {},
   },
   clientsidePreviewEnabled: false,
+  renderWhitespaceInCode: false,
 });
diff --git a/app/controllers/profiles/preferences_controller.rb b/app/controllers/profiles/preferences_controller.rb
index 214640a5295..2166dd7dad7 100644
--- a/app/controllers/profiles/preferences_controller.rb
+++ b/app/controllers/profiles/preferences_controller.rb
@@ -48,7 +48,8 @@ class Profiles::PreferencesController < Profiles::ApplicationController
       :time_display_relative,
       :time_format_in_24h,
       :show_whitespace_in_diffs,
-      :sourcegraph_enabled
+      :sourcegraph_enabled,
+      :render_whitespace_in_code
     ]
   end
 end
diff --git a/app/helpers/ide_helper.rb b/app/helpers/ide_helper.rb
index 8e50bbc6c04..e4d0e605254 100644
--- a/app/helpers/ide_helper.rb
+++ b/app/helpers/ide_helper.rb
@@ -10,7 +10,8 @@ module IdeHelper
       "promotion-svg-path": image_path('illustrations/web-ide_promotion.svg'),
       "ci-help-page-path" => help_page_path('ci/quick_start/README'),
       "web-ide-help-page-path" => help_page_path('user/project/web_ide/index.html'),
-      "clientside-preview-enabled": Gitlab::CurrentSettings.current_application_settings.web_ide_clientside_preview_enabled.to_s
+      "clientside-preview-enabled": Gitlab::CurrentSettings.current_application_settings.web_ide_clientside_preview_enabled.to_s,
+      "render-whitespace-in-code": current_user.render_whitespace_in_code.to_s
     }
   end
 end
diff --git a/app/models/project.rb b/app/models/project.rb
index 8b3ccf7ed02..057bcbabbeb 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -331,7 +331,7 @@ class Project < ApplicationRecord
   delegate :add_guest, :add_reporter, :add_developer, :add_maintainer, :add_role, to: :team
   delegate :add_master, to: :team # @deprecated
   delegate :group_runners_enabled, :group_runners_enabled=, :group_runners_enabled?, to: :ci_cd_settings
-  delegate :root_ancestor, :actual_limits, to: :namespace, allow_nil: true
+  delegate :root_ancestor, to: :namespace, allow_nil: true
   delegate :last_pipeline, to: :commit, allow_nil: true
   delegate :external_dashboard_url, to: :metrics_setting, allow_nil: true, prefix: true
   delegate :default_git_depth, :default_git_depth=, to: :ci_cd_settings, prefix: :ci
diff --git a/app/models/user.rb b/app/models/user.rb
index ee42a987939..47c5b3e208a 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -246,6 +246,7 @@ class User < ApplicationRecord
   delegate :show_whitespace_in_diffs, :show_whitespace_in_diffs=, to: :user_preference
   delegate :sourcegraph_enabled, :sourcegraph_enabled=, to: :user_preference
   delegate :setup_for_company, :setup_for_company=, to: :user_preference
+  delegate :render_whitespace_in_code, :render_whitespace_in_code=, to: :user_preference
 
   accepts_nested_attributes_for :user_preference, update_only: true
 
diff --git a/app/models/user_preference.rb b/app/models/user_preference.rb
index a36f56089a0..713b0598029 100644
--- a/app/models/user_preference.rb
+++ b/app/models/user_preference.rb
@@ -13,6 +13,7 @@ class UserPreference < ApplicationRecord
   default_value_for :timezone, value: Time.zone.tzinfo.name, allows_nil: false
   default_value_for :time_display_relative, value: true, allows_nil: false
   default_value_for :time_format_in_24h, value: false, allows_nil: false
+  default_value_for :render_whitespace_in_code, value: false, allows_nil: false
 
   class << self
     def notes_filters
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index bf76b7379dd..93acd6f550b 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -62,9 +62,13 @@
       .form-text.text-muted
         = s_('Preferences|Choose what content you want to see on a project’s overview page.')
     .form-group.form-check
+      = f.check_box :render_whitespace_in_code, class: 'form-check-input'
+      = f.label :render_whitespace_in_code, class: 'form-check-label' do
+        = s_('Preferences|Render whitespace characters in the Web IDE')
+    .form-group.form-check
       = f.check_box :show_whitespace_in_diffs, class: 'form-check-input'
       = f.label :show_whitespace_in_diffs, class: 'form-check-label' do
-        = s_('Preferences|Show whitespace in diffs')
+        = s_('Preferences|Show whitespace changes in diffs')
 
   .col-sm-12
     %hr
diff --git a/changelogs/unreleased/ide_render_whitespaces.yml b/changelogs/unreleased/ide_render_whitespaces.yml
new file mode 100644
index 00000000000..f554eee42b8
--- /dev/null
+++ b/changelogs/unreleased/ide_render_whitespaces.yml
@@ -0,0 +1,5 @@
+---
+title: Render whitespaces in code
+merge_request: 17244
+author: Mathieu Parent
+type: added
diff --git a/db/migrate/20191207104000_add_render_whitespace_in_code_to_user_preference.rb b/db/migrate/20191207104000_add_render_whitespace_in_code_to_user_preference.rb
new file mode 100644
index 00000000000..83b44b98c67
--- /dev/null
+++ b/db/migrate/20191207104000_add_render_whitespace_in_code_to_user_preference.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class AddRenderWhitespaceInCodeToUserPreference < ActiveRecord::Migration[5.1]
+  include Gitlab::Database::MigrationHelpers
+
+  DOWNTIME = false
+
+  disable_ddl_transaction!
+
+  def up
+    add_column(:user_preferences, :render_whitespace_in_code, :boolean)
+  end
+
+  def down
+    remove_column(:user_preferences, :render_whitespace_in_code)
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 30e439b08c4..3cbeb00830a 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -4038,6 +4038,7 @@ ActiveRecord::Schema.define(version: 2020_01_02_170221) do
     t.boolean "show_whitespace_in_diffs", default: true, null: false
     t.boolean "sourcegraph_enabled"
     t.boolean "setup_for_company"
+    t.boolean "render_whitespace_in_code"
     t.index ["user_id"], name: "index_user_preferences_on_user_id", unique: true
   end
 
diff --git a/doc/user/project/operations/feature_flags.md b/doc/user/project/operations/feature_flags.md
index 723f9d69995..665c0e856f1 100644
--- a/doc/user/project/operations/feature_flags.md
+++ b/doc/user/project/operations/feature_flags.md
@@ -1,6 +1,6 @@
 # Feature Flags **(PREMIUM)**
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/11845) in GitLab 11.4.
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/merge_requests/7433) in GitLab 11.4.
 
 Feature flags allow you to ship a project in different flavors by
 dynamically toggling certain functionality.
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 0adc5b6c7ff..bd1aadca75e 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -13299,7 +13299,10 @@ msgstr ""
 msgid "Preferences|Project overview content"
 msgstr ""
 
-msgid "Preferences|Show whitespace in diffs"
+msgid "Preferences|Render whitespace characters in the Web IDE"
+msgstr ""
+
+msgid "Preferences|Show whitespace changes in diffs"
 msgstr ""
 
 msgid "Preferences|Sourcegraph"
@@ -18692,12 +18695,18 @@ msgstr ""
 msgid "ThreatMonitoring|A Web Application Firewall (WAF) provides monitoring and rules to protect production applications. GitLab adds the modsecurity WAF plug-in when you install the Ingress app in your Kubernetes cluster."
 msgstr ""
 
+msgid "ThreatMonitoring|Anomalous Requests"
+msgstr ""
+
 msgid "ThreatMonitoring|At this time, threat monitoring only supports WAF data."
 msgstr ""
 
 msgid "ThreatMonitoring|Environment"
 msgstr ""
 
+msgid "ThreatMonitoring|Requests"
+msgstr ""
+
 msgid "ThreatMonitoring|Something went wrong, unable to fetch WAF statistics"
 msgstr ""
 
@@ -18713,7 +18722,10 @@ msgstr ""
 msgid "ThreatMonitoring|Threat Monitoring help page link"
 msgstr ""
 
-msgid "ThreatMonitoring|View WAF documentation"
+msgid "ThreatMonitoring|Time"
+msgstr ""
+
+msgid "ThreatMonitoring|Total Requests"
 msgstr ""
 
 msgid "ThreatMonitoring|Web Application Firewall not enabled"
@@ -21319,14 +21331,6 @@ msgstr ""
 msgid "ciReport|%{reportType} %{status} detected no vulnerabilities for the source branch only"
 msgstr ""
 
-msgid "ciReport|%{reportType} detected %{vulnerabilityCount} vulnerability"
-msgid_plural "ciReport|%{reportType} detected %{vulnerabilityCount} vulnerabilities"
-msgstr[0] ""
-msgstr[1] ""
-
-msgid "ciReport|%{reportType} detected no vulnerabilities"
-msgstr ""
-
 msgid "ciReport|%{reportType} is loading"
 msgstr ""
 
@@ -21486,18 +21490,6 @@ msgstr ""
 msgid "ciReport|There was an error dismissing the vulnerability. Please try again."
 msgstr ""
 
-msgid "ciReport|There was an error loading DAST report"
-msgstr ""
-
-msgid "ciReport|There was an error loading SAST report"
-msgstr ""
-
-msgid "ciReport|There was an error loading container scanning report"
-msgstr ""
-
-msgid "ciReport|There was an error loading dependency scanning report"
-msgstr ""
-
 msgid "ciReport|There was an error reverting the dismissal. Please try again."
 msgstr ""
 
diff --git a/package.json b/package.json
index 6dd3410e4d2..a712923faca 100644
--- a/package.json
+++ b/package.json
@@ -146,7 +146,7 @@
     "@gitlab/eslint-config": "^2.0.0",
     "@gitlab/eslint-plugin-i18n": "^1.1.0",
     "@gitlab/eslint-plugin-vue-i18n": "^1.2.0",
-    "@vue/test-utils": "^1.0.0-beta.25",
+    "@vue/test-utils": "^1.0.0-beta.30",
     "axios-mock-adapter": "^1.15.0",
     "babel-jest": "^24.1.0",
     "babel-plugin-dynamic-import-node": "^2.2.0",
@@ -201,7 +201,7 @@
   },
   "resolutions": {
     "vue-jest/ts-jest": "24.0.0",
-    "monaco-editor" : "0.18.1"
+    "monaco-editor": "0.18.1"
   },
   "engines": {
     "node": ">=8.10.0",
diff --git a/spec/controllers/profiles/preferences_controller_spec.rb b/spec/controllers/profiles/preferences_controller_spec.rb
index e0e6d78bdcd..77e7b32af25 100644
--- a/spec/controllers/profiles/preferences_controller_spec.rb
+++ b/spec/controllers/profiles/preferences_controller_spec.rb
@@ -46,7 +46,8 @@ describe Profiles::PreferencesController do
           dashboard: 'stars',
           theme_id: '2',
           first_day_of_week: '1',
-          preferred_language: 'jp'
+          preferred_language: 'jp',
+          render_whitespace_in_code: 'true'
         }.with_indifferent_access
 
         expect(user).to receive(:assign_attributes).with(ActionController::Parameters.new(prefs).permit!)
diff --git a/spec/features/profiles/user_visits_profile_preferences_page_spec.rb b/spec/features/profiles/user_visits_profile_preferences_page_spec.rb
index 4dbdea02e27..b18f763a968 100644
--- a/spec/features/profiles/user_visits_profile_preferences_page_spec.rb
+++ b/spec/features/profiles/user_visits_profile_preferences_page_spec.rb
@@ -86,6 +86,23 @@ describe 'User visits the profile preferences page' do
     end
   end
 
+  describe 'User changes whitespace in code' do
+    it 'updates their preference' do
+      expect(user.render_whitespace_in_code).to be(false)
+      expect(render_whitespace_field).not_to be_checked
+      render_whitespace_field.click
+
+      click_button 'Save changes'
+
+      expect(user.reload.render_whitespace_in_code).to be(true)
+      expect(render_whitespace_field).to be_checked
+    end
+  end
+
+  def render_whitespace_field
+    find_field('user[render_whitespace_in_code]')
+  end
+
   def expect_preferences_saved_message
     page.within('.flash-container') do
       expect(page).to have_content('Preferences saved.')
diff --git a/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap b/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap
index 511c027dbc2..c9948db95f8 100644
--- a/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap
+++ b/spec/frontend/branches/components/__snapshots__/divergence_graph_spec.js.snap
@@ -5,7 +5,7 @@ exports[`Branch divergence graph component renders ahead and behind count 1`] =
   class="divergence-graph px-2 d-none d-md-block"
   title="10 commits behind master, 10 commits ahead"
 >
-  <graphbar-stub
+  <graph-bar-stub
     count="10"
     maxcommits="100"
     position="left"
@@ -15,7 +15,7 @@ exports[`Branch divergence graph component renders ahead and behind count 1`] =
     class="graph-separator pull-left mt-1"
   />
    
-  <graphbar-stub
+  <graph-bar-stub
     count="10"
     maxcommits="100"
     position="right"
@@ -28,7 +28,7 @@ exports[`Branch divergence graph component renders distance count 1`] = `
   class="divergence-graph px-2 d-none d-md-block"
   title="More than 900 commits different with master"
 >
-  <graphbar-stub
+  <graph-bar-stub
     count="900"
     maxcommits="100"
     position="full"
diff --git a/spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap b/spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap
index d69a9f90d65..f7b68d96129 100644
--- a/spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap
+++ b/spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap
@@ -18,11 +18,11 @@ exports[`Confidential merge request project form group component renders empty s
         No forks are available to you.
       <br />
        
-      <glsprintf-stub
+      <gl-sprintf-stub
         message="To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private."
       />
        
-      <gllink-stub
+      <gl-link-stub
         class="w-auto p-0 d-inline-block text-primary bg-transparent"
         href="/help"
         target="_blank"
@@ -37,7 +37,7 @@ exports[`Confidential merge request project form group component renders empty s
           aria-hidden="true"
           class="fa fa-question-circle"
         />
-      </gllink-stub>
+      </gl-link-stub>
     </p>
   </div>
 </div>
@@ -61,11 +61,11 @@ exports[`Confidential merge request project form group component renders fork dr
         No forks are available to you.
       <br />
        
-      <glsprintf-stub
+      <gl-sprintf-stub
         message="To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private."
       />
        
-      <gllink-stub
+      <gl-link-stub
         class="w-auto p-0 d-inline-block text-primary bg-transparent"
         href="/help"
         target="_blank"
@@ -80,7 +80,7 @@ exports[`Confidential merge request project form group component renders fork dr
           aria-hidden="true"
           class="fa fa-question-circle"
         />
-      </gllink-stub>
+      </gl-link-stub>
     </p>
   </div>
 </div>
diff --git a/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap b/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap
index b87afdd7eb4..184d0321dc1 100644
--- a/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap
+++ b/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap
@@ -17,7 +17,11 @@ exports[`Contributors charts should render charts when loading completed and the
       <glareachart-stub
         data="[object Object]"
         height="264"
+        includelegendavgmax="true"
+        legendaveragetext="Avg"
+        legendmaxtext="Max"
         option="[object Object]"
+        thresholds=""
       />
     </div>
      
@@ -38,7 +42,11 @@ exports[`Contributors charts should render charts when loading completed and the
         <glareachart-stub
           data="[object Object]"
           height="216"
+          includelegendavgmax="true"
+          legendaveragetext="Avg"
+          legendmaxtext="Max"
           option="[object Object]"
+          thresholds=""
         />
       </div>
     </div>
diff --git a/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap b/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap
index 69ad71a1efb..5c784c8000f 100644
--- a/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap
+++ b/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap
@@ -16,11 +16,11 @@ exports[`grafana integration component default state to match the default snapsh
     
     </h4>
      
-    <glbutton-stub
+    <gl-button-stub
       class="js-settings-toggle"
     >
       Expand
-    </glbutton-stub>
+    </gl-button-stub>
      
     <p
       class="js-section-sub-header"
@@ -35,32 +35,32 @@ exports[`grafana integration component default state to match the default snapsh
     class="settings-content"
   >
     <form>
-      <glformcheckbox-stub
+      <gl-form-checkbox-stub
         class="mb-4"
         id="grafana-integration-enabled"
       >
         
         Active
       
-      </glformcheckbox-stub>
+      </gl-form-checkbox-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         description="Enter the base URL of the Grafana instance."
         label="Grafana URL"
         label-for="grafana-url"
       >
-        <glforminput-stub
+        <gl-form-input-stub
           id="grafana-url"
           placeholder="https://my-url.grafana.net/"
           value="http://test.host"
         />
-      </glformgroup-stub>
+      </gl-form-group-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         label="API Token"
         label-for="grafana-token"
       >
-        <glforminput-stub
+        <gl-form-input-stub
           id="grafana-token"
           value="someToken"
         />
@@ -86,15 +86,15 @@ exports[`grafana integration component default state to match the default snapsh
             />
           </a>
         </p>
-      </glformgroup-stub>
+      </gl-form-group-stub>
        
-      <glbutton-stub
+      <gl-button-stub
         variant="success"
       >
         
         Save Changes
       
-      </glbutton-stub>
+      </gl-button-stub>
     </form>
   </div>
 </section>
diff --git a/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap b/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap
index 5d6c31f01d9..43e606eac6e 100644
--- a/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap
+++ b/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap
@@ -7,7 +7,7 @@ exports[`IDE pipeline stage renders stage details & icon 1`] = `
   <div
     class="card-header"
   >
-    <ciicon-stub
+    <ci-icon-stub
       cssclasses=""
       size="24"
       status="[object Object]"
diff --git a/spec/frontend/ide/components/pipelines/__snapshots__/list_spec.js.snap b/spec/frontend/ide/components/pipelines/__snapshots__/list_spec.js.snap
index 5fbe6af750d..177cd4559ca 100644
--- a/spec/frontend/ide/components/pipelines/__snapshots__/list_spec.js.snap
+++ b/spec/frontend/ide/components/pipelines/__snapshots__/list_spec.js.snap
@@ -6,7 +6,7 @@ exports[`IDE pipelines list when loaded renders empty state when no latestPipeli
 >
   <!---->
    
-  <emptystate-stub
+  <empty-state-stub
     cansetci="true"
     emptystatesvgpath="http://test.host"
     helppagepath="http://test.host"
diff --git a/spec/frontend/issuables_list/components/__snapshots__/issuables_list_app_spec.js.snap b/spec/frontend/issuables_list/components/__snapshots__/issuables_list_app_spec.js.snap
index f57391a6b0d..3e445319746 100644
--- a/spec/frontend/issuables_list/components/__snapshots__/issuables_list_app_spec.js.snap
+++ b/spec/frontend/issuables_list/components/__snapshots__/issuables_list_app_spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Issuables list component with empty issues response with all state should display a catch-all if there are no issues to show 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   description="The Issue Tracker is the place to add things that need to be improved or solved in a project. You can register or sign in to create issues for this project."
   svgpath="/emptySvg"
   title="There are no issues to show"
diff --git a/spec/frontend/monitoring/components/__snapshots__/empty_state_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/empty_state_spec.js.snap
index 5f24bab600c..31b3ad1bd76 100644
--- a/spec/frontend/monitoring/components/__snapshots__/empty_state_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/empty_state_spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmptyState shows gettingStarted state 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   description="Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments."
   primarybuttonlink="/clustersPath"
   primarybuttontext="Install on clusters"
@@ -13,7 +13,7 @@ exports[`EmptyState shows gettingStarted state 1`] = `
 `;
 
 exports[`EmptyState shows loading state 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   description="Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available."
   primarybuttonlink="/documentationPath"
   primarybuttontext="View documentation"
@@ -25,7 +25,7 @@ exports[`EmptyState shows loading state 1`] = `
 `;
 
 exports[`EmptyState shows unableToConnect state 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   description="Ensure connectivity is available from the GitLab server to the Prometheus server"
   primarybuttonlink="/documentationPath"
   primarybuttontext="View documentation"
diff --git a/spec/frontend/monitoring/components/__snapshots__/group_empty_state_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/group_empty_state_spec.js.snap
index 7f37a83d291..c30fb572826 100644
--- a/spec/frontend/monitoring/components/__snapshots__/group_empty_state_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/group_empty_state_spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GroupEmptyState Renders an empty state for BAD_QUERY 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   primarybuttonlink="/path/to/settings"
   primarybuttontext="Verify configuration"
@@ -13,7 +13,7 @@ exports[`GroupEmptyState Renders an empty state for BAD_QUERY 1`] = `
 exports[`GroupEmptyState Renders an empty state for BAD_QUERY 2`] = `"The Prometheus server responded with \\"bad request\\". Please check your queries are correct and are supported in your Prometheus version. <a href=\\"/path/to/docs\\">More information</a>"`;
 
 exports[`GroupEmptyState Renders an empty state for CONNECTION_FAILED 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   description="We couldn't reach the Prometheus server. Either the server no longer exists or the configuration details need updating."
   primarybuttonlink="/path/to/settings"
@@ -26,7 +26,7 @@ exports[`GroupEmptyState Renders an empty state for CONNECTION_FAILED 1`] = `
 exports[`GroupEmptyState Renders an empty state for CONNECTION_FAILED 2`] = `undefined`;
 
 exports[`GroupEmptyState Renders an empty state for FOO STATE 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   description="An error occurred while loading the data. Please try again."
   svgpath="/path/to/empty-group-illustration.svg"
@@ -37,7 +37,7 @@ exports[`GroupEmptyState Renders an empty state for FOO STATE 1`] = `
 exports[`GroupEmptyState Renders an empty state for FOO STATE 2`] = `undefined`;
 
 exports[`GroupEmptyState Renders an empty state for LOADING 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   description="Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available."
   svgpath="/path/to/empty-group-illustration.svg"
@@ -48,7 +48,7 @@ exports[`GroupEmptyState Renders an empty state for LOADING 1`] = `
 exports[`GroupEmptyState Renders an empty state for LOADING 2`] = `undefined`;
 
 exports[`GroupEmptyState Renders an empty state for NO_DATA 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   svgpath="/path/to/empty-group-illustration.svg"
   title="No data to display"
@@ -58,7 +58,7 @@ exports[`GroupEmptyState Renders an empty state for NO_DATA 1`] = `
 exports[`GroupEmptyState Renders an empty state for NO_DATA 2`] = `"The data source is connected, but there is no data to display. <a href=\\"/path/to/docs\\">More information</a>"`;
 
 exports[`GroupEmptyState Renders an empty state for TIMEOUT 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   svgpath="/path/to/empty-group-illustration.svg"
   title="Connection timed out"
@@ -68,7 +68,7 @@ exports[`GroupEmptyState Renders an empty state for TIMEOUT 1`] = `
 exports[`GroupEmptyState Renders an empty state for TIMEOUT 2`] = `"Charts can't be displayed as the request for data has timed out. <a href=\\"/path/to/docs\\">More information</a>"`;
 
 exports[`GroupEmptyState Renders an empty state for UNKNOWN_ERROR 1`] = `
-<glemptystate-stub
+<gl-empty-state-stub
   compact="true"
   description="An error occurred while loading the data. Please try again."
   svgpath="/path/to/empty-group-illustration.svg"
diff --git a/spec/frontend/mr_popover/__snapshots__/mr_popover_spec.js.snap b/spec/frontend/mr_popover/__snapshots__/mr_popover_spec.js.snap
index a2a7d0ee91e..3229492506a 100644
--- a/spec/frontend/mr_popover/__snapshots__/mr_popover_spec.js.snap
+++ b/spec/frontend/mr_popover/__snapshots__/mr_popover_spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MR Popover loaded state matches the snapshot 1`] = `
-<glpopover-stub
+<gl-popover-stub
   boundary="viewport"
   cssclasses=""
   placement="top"
@@ -35,7 +35,7 @@ exports[`MR Popover loaded state matches the snapshot 1`] = `
         </span>
       </div>
        
-      <ciicon-stub
+      <ci-icon-stub
         cssclasses=""
         size="16"
         status="[object Object]"
@@ -56,11 +56,11 @@ exports[`MR Popover loaded state matches the snapshot 1`] = `
     
     </div>
   </div>
-</glpopover-stub>
+</gl-popover-stub>
 `;
 
 exports[`MR Popover shows skeleton-loader while apollo is loading 1`] = `
-<glpopover-stub
+<gl-popover-stub
   boundary="viewport"
   cssclasses=""
   placement="top"
@@ -71,7 +71,7 @@ exports[`MR Popover shows skeleton-loader while apollo is loading 1`] = `
     class="mr-popover"
   >
     <div>
-      <glskeletonloading-stub
+      <gl-skeleton-loading-stub
         class="animation-container-small mt-1"
         lines="1"
       />
@@ -91,5 +91,5 @@ exports[`MR Popover shows skeleton-loader while apollo is loading 1`] = `
     
     </div>
   </div>
-</glpopover-stub>
+</gl-popover-stub>
 `;
diff --git a/spec/frontend/pages/admin/users/components/__snapshots__/delete_user_modal_spec.js.snap b/spec/frontend/pages/admin/users/components/__snapshots__/delete_user_modal_spec.js.snap
index 78a736a9060..d5ce2c1ee24 100644
--- a/spec/frontend/pages/admin/users/components/__snapshots__/delete_user_modal_spec.js.snap
+++ b/spec/frontend/pages/admin/users/components/__snapshots__/delete_user_modal_spec.js.snap
@@ -29,7 +29,7 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
       value="csrf"
     />
      
-    <glforminput-stub
+    <gl-form-input-stub
       autocomplete="off"
       autofocus=""
       name="username"
@@ -38,26 +38,26 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
     />
   </form>
    
-  <glbutton-stub
+  <gl-button-stub
     variant="secondary"
   >
     Cancel
-  </glbutton-stub>
+  </gl-button-stub>
    
-  <glbutton-stub
+  <gl-button-stub
     disabled="true"
     variant="warning"
   >
     
       secondaryAction
     
-  </glbutton-stub>
+  </gl-button-stub>
    
-  <glbutton-stub
+  <gl-button-stub
     disabled="true"
     variant="danger"
   >
     action
-  </glbutton-stub>
+  </gl-button-stub>
 </div>
 `;
diff --git a/spec/frontend/pages/admin/users/components/__snapshots__/user_operation_confirmation_modal_spec.js.snap b/spec/frontend/pages/admin/users/components/__snapshots__/user_operation_confirmation_modal_spec.js.snap
index 4a3989f5192..4b4e9997953 100644
--- a/spec/frontend/pages/admin/users/components/__snapshots__/user_operation_confirmation_modal_spec.js.snap
+++ b/spec/frontend/pages/admin/users/components/__snapshots__/user_operation_confirmation_modal_spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`User Operation confirmation modal renders modal with form included 1`] = `
-<glmodal-stub
+<gl-modal-stub
   modalclass=""
   modalid="user-operation-modal"
   ok-title="action"
@@ -29,5 +29,5 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
       value="csrf"
     />
   </form>
-</glmodal-stub>
+</gl-modal-stub>
 `;
diff --git a/spec/frontend/registry/list/components/collapsible_container_spec.js b/spec/frontend/registry/list/components/collapsible_container_spec.js
index cba49e72588..c7cf36fe151 100644
--- a/spec/frontend/registry/list/components/collapsible_container_spec.js
+++ b/spec/frontend/registry/list/components/collapsible_container_spec.js
@@ -59,6 +59,7 @@ describe('collapsible registry container', () => {
     beforeEach(() => {
       const fetchList = jest.fn();
       wrapper.setMethods({ fetchList });
+      return wrapper.vm.$nextTick();
     });
 
     const expectIsClosed = () => {
diff --git a/spec/frontend/registry/list/components/table_registry_spec.js b/spec/frontend/registry/list/components/table_registry_spec.js
index 345e2d009a9..1b545eea034 100644
--- a/spec/frontend/registry/list/components/table_registry_spec.js
+++ b/spec/frontend/registry/list/components/table_registry_spec.js
@@ -123,17 +123,17 @@ describe('table registry', () => {
     it('should delete multiple items when multiple items are selected', done => {
       const multiDeleteItems = jest.fn().mockResolvedValue();
       wrapper.setMethods({ multiDeleteItems });
-      const selectAll = findSelectAllCheckbox();
-      selectAll.trigger('click');
 
       Vue.nextTick(() => {
-        const deleteBtn = findDeleteButton();
-        expect(wrapper.vm.selectedItems).toEqual([0, 1]);
-        expect(deleteBtn.attributes('disabled')).toEqual(undefined);
-        wrapper.setData({ itemsToBeDeleted: [...wrapper.vm.selectedItems] });
-        wrapper.vm.handleMultipleDelete();
+        const selectAll = findSelectAllCheckbox();
+        selectAll.trigger('click');
 
         Vue.nextTick(() => {
+          const deleteBtn = findDeleteButton();
+          expect(wrapper.vm.selectedItems).toEqual([0, 1]);
+          expect(deleteBtn.attributes('disabled')).toEqual(undefined);
+          wrapper.setData({ itemsToBeDeleted: [...wrapper.vm.selectedItems] });
+          wrapper.vm.handleMultipleDelete();
           expect(wrapper.vm.selectedItems).toEqual([]);
           expect(wrapper.vm.itemsToBeDeleted).toEqual([]);
           expect(wrapper.vm.multiDeleteItems).toHaveBeenCalledWith({
@@ -179,10 +179,12 @@ describe('table registry', () => {
       const deleteSingleItem = jest.fn();
       const deleteItem = jest.fn().mockResolvedValue();
       wrapper.setMethods({ deleteSingleItem, deleteItem });
-      deleteBtns.at(0).trigger('click');
-      expect(wrapper.vm.deleteSingleItem).toHaveBeenCalledWith(0);
-      wrapper.vm.handleSingleDelete(1);
-      expect(wrapper.vm.deleteItem).toHaveBeenCalledWith(1);
+      return wrapper.vm.$nextTick().then(() => {
+        deleteBtns.at(0).trigger('click');
+        expect(wrapper.vm.deleteSingleItem).toHaveBeenCalledWith(0);
+        wrapper.vm.handleSingleDelete(1);
+        expect(wrapper.vm.deleteItem).toHaveBeenCalledWith(1);
+      });
     });
   });
 
diff --git a/spec/frontend/registry/settings/components/__snapshots__/registry_settings_app_spec.js.snap b/spec/frontend/registry/settings/components/__snapshots__/registry_settings_app_spec.js.snap
index 77f031db120..966acdf52be 100644
--- a/spec/frontend/registry/settings/components/__snapshots__/registry_settings_app_spec.js.snap
+++ b/spec/frontend/registry/settings/components/__snapshots__/registry_settings_app_spec.js.snap
@@ -20,6 +20,6 @@ exports[`Registry Settings App renders 1`] = `
     </li>
   </ul>
    
-  <settingsform-stub />
+  <settings-form-stub />
 </div>
 `;
diff --git a/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap b/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
index 0ae37f70273..9724033f3c9 100644
--- a/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
+++ b/spec/frontend/registry/settings/components/__snapshots__/settings_form_spec.js.snap
@@ -16,7 +16,7 @@ exports[`Settings Form renders 1`] = `
     <div
       class="card-body"
     >
-      <glformgroup-stub
+      <gl-form-group-stub
         id="expiration-policy-toggle-group"
         label="Expiration policy:"
         label-align="right"
@@ -26,7 +26,7 @@ exports[`Settings Form renders 1`] = `
         <div
           class="d-flex align-items-start"
         >
-          <gltoggle-stub
+          <gl-toggle-stub
             id="expiration-policy-toggle"
             labeloff="Toggle Status: OFF"
             labelon="Toggle Status: ON"
@@ -41,16 +41,16 @@ exports[`Settings Form renders 1`] = `
             </strong>
           </span>
         </div>
-      </glformgroup-stub>
+      </gl-form-group-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         id="expiration-policy-interval-group"
         label="Expiration interval:"
         label-align="right"
         label-cols="3"
         label-for="expiration-policy-interval"
       >
-        <glformselect-stub
+        <gl-form-select-stub
           id="expiration-policy-interval"
         >
           <option
@@ -64,17 +64,17 @@ exports[`Settings Form renders 1`] = `
           >
             Option 2
           </option>
-        </glformselect-stub>
-      </glformgroup-stub>
+        </gl-form-select-stub>
+      </gl-form-group-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         id="expiration-policy-schedule-group"
         label="Expiration schedule:"
         label-align="right"
         label-cols="3"
         label-for="expiration-policy-schedule"
       >
-        <glformselect-stub
+        <gl-form-select-stub
           id="expiration-policy-schedule"
         >
           <option
@@ -88,17 +88,17 @@ exports[`Settings Form renders 1`] = `
           >
             Option 2
           </option>
-        </glformselect-stub>
-      </glformgroup-stub>
+        </gl-form-select-stub>
+      </gl-form-group-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         id="expiration-policy-latest-group"
         label="Expiration latest:"
         label-align="right"
         label-cols="3"
         label-for="expiration-policy-latest"
       >
-        <glformselect-stub
+        <gl-form-select-stub
           id="expiration-policy-latest"
         >
           <option
@@ -112,10 +112,10 @@ exports[`Settings Form renders 1`] = `
           >
             Option 2
           </option>
-        </glformselect-stub>
-      </glformgroup-stub>
+        </gl-form-select-stub>
+      </gl-form-group-stub>
        
-      <glformgroup-stub
+      <gl-form-group-stub
         id="expiration-policy-name-matching-group"
         invalid-feedback="The value of this input should be less than 255 characters"
         label="Expire Docker tags with name matching:"
@@ -123,32 +123,32 @@ exports[`Settings Form renders 1`] = `
         label-cols="3"
         label-for="expiration-policy-name-matching"
       >
-        <glformtextarea-stub
+        <gl-form-textarea-stub
           id="expiration-policy-name-matching"
           placeholder=".*"
           trim=""
           value=""
         />
-      </glformgroup-stub>
+      </gl-form-group-stub>
     </div>
      
     <div
       class="card-footer text-right"
     >
-      <glbutton-stub
+      <gl-button-stub
         type="reset"
       >
         Cancel
-      </glbutton-stub>
+      </gl-button-stub>
        
-      <glbutton-stub
+      <gl-button-stub
         type="submit"
         variant="success"
       >
         
         Save Expiration Policy
       
-      </glbutton-stub>
+      </gl-button-stub>
     </div>
   </form>
 </div>
diff --git a/spec/frontend/repository/components/__snapshots__/directory_download_links_spec.js.snap b/spec/frontend/repository/components/__snapshots__/directory_download_links_spec.js.snap
index 31a1cd23060..6968fb3e153 100644
--- a/spec/frontend/repository/components/__snapshots__/directory_download_links_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/directory_download_links_spec.js.snap
@@ -16,22 +16,22 @@ exports[`Repository directory download links component renders downloads links f
     <div
       class="btn-group ml-0 w-100"
     >
-      <gllink-stub
+      <gl-link-stub
         class="btn btn-xs btn-primary"
         href="http://test.com/?path=app"
       >
         
         zip
       
-      </gllink-stub>
-      <gllink-stub
+      </gl-link-stub>
+      <gl-link-stub
         class="btn btn-xs"
         href="http://test.com/?path=app"
       >
         
         tar
       
-      </gllink-stub>
+      </gl-link-stub>
     </div>
   </div>
 </section>
@@ -53,22 +53,22 @@ exports[`Repository directory download links component renders downloads links f
     <div
       class="btn-group ml-0 w-100"
     >
-      <gllink-stub
+      <gl-link-stub
         class="btn btn-xs btn-primary"
         href="http://test.com/?path=app/assets"
       >
         
         zip
       
-      </gllink-stub>
-      <gllink-stub
+      </gl-link-stub>
+      <gl-link-stub
         class="btn btn-xs"
         href="http://test.com/?path=app/assets"
       >
         
         tar
       
-      </gllink-stub>
+      </gl-link-stub>
     </div>
   </div>
 </section>
diff --git a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
index 60215b70d36..1497539a0c1 100644
--- a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -4,7 +4,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
 <div
   class="info-well d-none d-sm-flex project-last-commit commit p-3"
 >
-  <useravatarlink-stub
+  <user-avatar-link-stub
     class="avatar-cell"
     imgalt=""
     imgcssclasses=""
@@ -22,32 +22,32 @@ exports[`Repository last commit component renders commit widget 1`] = `
     <div
       class="commit-content qa-commit-content"
     >
-      <gllink-stub
+      <gl-link-stub
         class="commit-row-message item-title"
         href="https://test.com/commit/123"
       >
         
           Commit title
         
-      </gllink-stub>
+      </gl-link-stub>
        
       <!---->
        
       <div
         class="committer"
       >
-        <gllink-stub
+        <gl-link-stub
           class="commit-author-link js-user-link"
           href="https://test.com/test"
         >
           
             Test
           
-        </gllink-stub>
+        </gl-link-stub>
         
           authored
           
-        <timeagotooltip-stub
+        <timeago-tooltip-stub
           cssclass=""
           time="2019-01-01"
           tooltipplacement="bottom"
@@ -65,18 +65,18 @@ exports[`Repository last commit component renders commit widget 1`] = `
       <div
         class="ci-status-link"
       >
-        <gllink-stub
+        <gl-link-stub
           class="js-commit-pipeline"
           href="https://test.com/pipeline"
           title="Commit: failed"
         >
-          <ciicon-stub
+          <ci-icon-stub
             aria-label="Commit: failed"
             cssclasses=""
             size="24"
             status="[object Object]"
           />
-        </gllink-stub>
+        </gl-link-stub>
       </div>
        
       <div
@@ -90,7 +90,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
           
         </div>
          
-        <clipboardbutton-stub
+        <clipboard-button-stub
           cssclass="btn-default"
           text="123456789"
           title="Copy commit SHA"
@@ -106,7 +106,7 @@ exports[`Repository last commit component renders the signature HTML as returned
 <div
   class="info-well d-none d-sm-flex project-last-commit commit p-3"
 >
-  <useravatarlink-stub
+  <user-avatar-link-stub
     class="avatar-cell"
     imgalt=""
     imgcssclasses=""
@@ -124,32 +124,32 @@ exports[`Repository last commit component renders the signature HTML as returned
     <div
       class="commit-content qa-commit-content"
     >
-      <gllink-stub
+      <gl-link-stub
         class="commit-row-message item-title"
         href="https://test.com/commit/123"
       >
         
           Commit title
         
-      </gllink-stub>
+      </gl-link-stub>
        
       <!---->
        
       <div
         class="committer"
       >
-        <gllink-stub
+        <gl-link-stub
           class="commit-author-link js-user-link"
           href="https://test.com/test"
         >
           
             Test
           
-        </gllink-stub>
+        </gl-link-stub>
         
           authored
           
-        <timeagotooltip-stub
+        <timeago-tooltip-stub
           cssclass=""
           time="2019-01-01"
           tooltipplacement="bottom"
@@ -171,18 +171,18 @@ exports[`Repository last commit component renders the signature HTML as returned
       <div
         class="ci-status-link"
       >
-        <gllink-stub
+        <gl-link-stub
           class="js-commit-pipeline"
           href="https://test.com/pipeline"
           title="Commit: failed"
         >
-          <ciicon-stub
+          <ci-icon-stub
             aria-label="Commit: failed"
             cssclasses=""
             size="24"
             status="[object Object]"
           />
-        </gllink-stub>
+        </gl-link-stub>
       </div>
        
       <div
@@ -196,7 +196,7 @@ exports[`Repository last commit component renders the signature HTML as returned
           
         </div>
          
-        <clipboardbutton-stub
+        <clipboard-button-stub
           cssclass="btn-default"
           text="123456789"
           title="Copy commit SHA"
diff --git a/spec/frontend/repository/components/last_commit_spec.js b/spec/frontend/repository/components/last_commit_spec.js
index b25045b107b..30f701ed77a 100644
--- a/spec/frontend/repository/components/last_commit_spec.js
+++ b/spec/frontend/repository/components/last_commit_spec.js
@@ -116,12 +116,16 @@ describe('Repository last commit component', () => {
   it('expands commit description when clicking expander', () => {
     factory(createCommitData({ description: 'Test description' }));
 
-    vm.find('.text-expander').vm.$emit('click');
-
-    return vm.vm.$nextTick().then(() => {
-      expect(vm.find('.commit-row-description').isVisible()).toBe(true);
-      expect(vm.find('.text-expander').classes('open')).toBe(true);
-    });
+    return vm.vm
+      .$nextTick()
+      .then(() => {
+        vm.find('.text-expander').vm.$emit('click');
+        return vm.vm.$nextTick();
+      })
+      .then(() => {
+        expect(vm.find('.commit-row-description').isVisible()).toBe(true);
+        expect(vm.find('.text-expander').classes('open')).toBe(true);
+      });
   });
 
   it('renders the signature HTML as returned by the backend', () => {
diff --git a/spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap b/spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap
index cdc7ece89f6..8eeae9b8455 100644
--- a/spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap
+++ b/spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap
@@ -15,13 +15,13 @@ exports[`Repository file preview component renders file HTML 1`] = `
         class="fa fa-file-text-o fa-fw"
       />
        
-      <gllink-stub
+      <gl-link-stub
         href="http://test.com"
       >
         <strong>
           README.md
         </strong>
-      </gllink-stub>
+      </gl-link-stub>
     </div>
   </div>
    
diff --git a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
index f8e65a51297..22e353dddc5 100644
--- a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
+++ b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
@@ -32,7 +32,7 @@ exports[`Repository table row component renders table row 1`] = `
   <td
     class="d-none d-sm-table-cell tree-commit"
   >
-    <glskeletonloading-stub
+    <gl-skeleton-loading-stub
       class="h-auto"
       lines="1"
     />
@@ -41,7 +41,7 @@ exports[`Repository table row component renders table row 1`] = `
   <td
     class="tree-time-ago text-right"
   >
-    <glskeletonloading-stub
+    <gl-skeleton-loading-stub
       class="ml-auto h-auto w-50"
       lines="1"
     />
diff --git a/spec/frontend/sidebar/__snapshots__/todo_spec.js.snap b/spec/frontend/sidebar/__snapshots__/todo_spec.js.snap
index 1704206c4ad..0a12eb327de 100644
--- a/spec/frontend/sidebar/__snapshots__/todo_spec.js.snap
+++ b/spec/frontend/sidebar/__snapshots__/todo_spec.js.snap
@@ -26,7 +26,7 @@ exports[`SidebarTodo template renders component container element with proper da
     Mark as done
   </span>
    
-  <glloadingicon-stub
+  <gl-loading-icon-stub
     color="orange"
     inline="true"
     label="Loading"
diff --git a/spec/frontend/vue_shared/components/__snapshots__/expand_button_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/expand_button_spec.js.snap
index cf71aefebe8..3a518029702 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/expand_button_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/expand_button_spec.js.snap
@@ -1,5 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Expand button on click when short text is provided renders button after text 1`] = `"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <!----> <span><p>Expanded!</p></span> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button></span>"`;
+exports[`Expand button on click when short text is provided renders button after text 1`] = `
+"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <!----> <span><p>Expanded!</p></span> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\">
+    <use xlink:href=\\"#ellipsis_h\\"></use>
+  </svg></button></span>"
+`;
 
-exports[`Expand button when short text is provided renders button before text 1`] = `"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <span><p>Short</p></span> <!----> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button></span>"`;
+exports[`Expand button when short text is provided renders button before text 1`] = `
+"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <span><p>Short</p></span>
+<!----> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\">
+    <use xlink:href=\\"#ellipsis_h\\"></use>
+  </svg></button></span>"
+`;
diff --git a/spec/frontend/vue_shared/components/__snapshots__/memory_graph_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/memory_graph_spec.js.snap
index a7f666ff56d..f4f9cc288f9 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/memory_graph_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/memory_graph_spec.js.snap
@@ -5,7 +5,7 @@ exports[`MemoryGraph Render chart should draw container with chart 1`] = `
   class="memory-graph-container p-1"
   style="width: 100px;"
 >
-  <glsparklinechart-stub
+  <gl-sparkline-chart-stub
     data="Nov 12 2019 19:17:33,2.87,Nov 12 2019 19:18:33,2.78,Nov 12 2019 19:19:33,2.78,Nov 12 2019 19:20:33,3.01"
     height="25"
     tooltiplabel="MB"
diff --git a/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
index 530428ef27c..74f71c23d02 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SplitButton renders actionItems 1`] = `
-<gldropdown-stub
+<gl-dropdown-stub
   menu-class="dropdown-menu-selectable "
   split="true"
   text="professor"
   variant="secondary"
 >
-  <gldropdownitem-stub
+  <gl-dropdown-item-stub
     active="true"
     active-class="is-active"
   >
@@ -18,10 +18,10 @@ exports[`SplitButton renders actionItems 1`] = `
     <div>
       very symphonic
     </div>
-  </gldropdownitem-stub>
+  </gl-dropdown-item-stub>
    
-  <gldropdowndivider-stub />
-  <gldropdownitem-stub
+  <gl-dropdown-divider-stub />
+  <gl-dropdown-item-stub
     active-class="is-active"
   >
     <strong>
@@ -31,8 +31,8 @@ exports[`SplitButton renders actionItems 1`] = `
     <div>
       warp drive
     </div>
-  </gldropdownitem-stub>
+  </gl-dropdown-item-stub>
    
   <!---->
-</gldropdown-stub>
+</gl-dropdown-stub>
 `;
diff --git a/spec/javascripts/ide/components/repo_editor_spec.js b/spec/javascripts/ide/components/repo_editor_spec.js
index 21fb5449858..8935d8f56fc 100644
--- a/spec/javascripts/ide/components/repo_editor_spec.js
+++ b/spec/javascripts/ide/components/repo_editor_spec.js
@@ -52,6 +52,18 @@ describe('RepoEditor', () => {
     state.rightPanelCollapsed = !state.rightPanelCollapsed;
   };
 
+  it('sets renderWhitespace to `all`', () => {
+    vm.$store.state.renderWhitespaceInCode = true;
+
+    expect(vm.editorOptions.renderWhitespace).toEqual('all');
+  });
+
+  it('sets renderWhitespace to `none`', () => {
+    vm.$store.state.renderWhitespaceInCode = false;
+
+    expect(vm.editorOptions.renderWhitespace).toEqual('none');
+  });
+
   it('renders an ide container', () => {
     expect(vm.shouldHideEditor).toBeFalsy();
     expect(vm.showEditor).toBe(true);
diff --git a/spec/javascripts/ide/lib/editor_spec.js b/spec/javascripts/ide/lib/editor_spec.js
index c2cb964ea87..f1973f7798f 100644
--- a/spec/javascripts/ide/lib/editor_spec.js
+++ b/spec/javascripts/ide/lib/editor_spec.js
@@ -67,6 +67,7 @@ describe('Multi-file editor library', () => {
         },
         readOnly: true,
         scrollBeyondLastLine: false,
+        renderWhitespace: 'none',
         quickSuggestions: false,
         occurrencesHighlight: false,
         wordWrap: 'on',
diff --git a/spec/views/profiles/preferences/show.html.haml_spec.rb b/spec/views/profiles/preferences/show.html.haml_spec.rb
index 52933c42621..e3eb822b045 100644
--- a/spec/views/profiles/preferences/show.html.haml_spec.rb
+++ b/spec/views/profiles/preferences/show.html.haml_spec.rb
@@ -12,6 +12,16 @@ describe 'profiles/preferences/show' do
     allow(controller).to receive(:current_user).and_return(user)
   end
 
+  context 'behavior' do
+    before do
+      render
+    end
+
+    it 'has option for Render whitespace characters in the Web IDE' do
+      expect(rendered).to have_unchecked_field('Render whitespace characters in the Web IDE')
+    end
+  end
+
   context 'sourcegraph' do
     def have_sourcegraph_field(*args)
       have_field('user_sourcegraph_enabled', *args)
diff --git a/yarn.lock b/yarn.lock
index 183053315b1..603fa80a955 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1067,7 +1067,7 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
-"@types/node@*", "@types/node@>=6", "@types/node@^10.11.7":
+"@types/node@*", "@types/node@>=6":
   version "10.12.9"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.9.tgz#a07bfa74331471e1dc22a47eb72026843f7b95c8"
   integrity sha512-eajkMXG812/w3w4a1OcBlaTwsFPO5F7fJ/amy+tieQxEMWBlbV1JGSjkFM+zkHNf81Cad+dfIRA+IBkvmvdAeA==
@@ -1077,11 +1077,6 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.0.tgz#9ae2106efc443d7c1e26570aa8247828c9c80f11"
   integrity sha512-J5D3z703XTDIGQFYXsnU9uRCW9e9mMEFO0Kpe6kykyiboqziru/RlZ0hM2P+PKTG4NHG1SjLrqae/NrV2iJApQ==
 
-"@types/semver@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-5.5.0.tgz#146c2a29ee7d3bae4bf2fcb274636e264c813c45"
-  integrity sha512-41qEJgBH/TWgo5NFSvBCJ1qkoi3Q6ONSF2avrHq1LVEZfYpdHmj0y9SuTK+u9ZhG1sYQKBL1AWXKyLWP4RaUoQ==
-
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -1172,12 +1167,14 @@
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
 
-"@vue/test-utils@^1.0.0-beta.25":
-  version "1.0.0-beta.25"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.25.tgz#4703076de3076bac42cdd242cd53e6fb8752ed8c"
-  integrity sha512-mfvguEmEpAn0BuT4u+qm+0J1NTKgQS+ffUyWHY1QeSovIkJcy98fj1rO+PJgiZSEvGjjnDNX+qmofYFPLrofbA==
+"@vue/test-utils@^1.0.0-beta.30":
+  version "1.0.0-beta.30"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.30.tgz#d5f26d1e2411fdb7fa7fdedb61b4b4ea4194c49d"
+  integrity sha512-Wyvcha9fNk8+kzTDwb3xWGjPkCPzHSYSwKP6MplrPTG/auhqoad7JqUEceZLc6u7AU4km2pPQ8/m9s0RgCZ0NA==
   dependencies:
-    lodash "^4.17.4"
+    dom-event-types "^1.0.0"
+    lodash "^4.17.15"
+    pretty "^2.0.0"
 
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
@@ -2840,6 +2837,15 @@ concat-stream@^1.5.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+condense-newlines@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/condense-newlines/-/condense-newlines-0.2.1.tgz#3de985553139475d32502c83b02f60684d24c55f"
+  integrity sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-whitespace "^0.3.0"
+    kind-of "^3.0.2"
+
 config-chain@^1.1.12:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
@@ -3873,6 +3879,11 @@ document-register-element@1.13.1:
   dependencies:
     lightercollective "^0.1.0"
 
+dom-event-types@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dom-event-types/-/dom-event-types-1.0.0.tgz#5830a0a29e1bf837fe50a70cd80a597232813cae"
+  integrity sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==
+
 dom-serialize@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
@@ -3980,15 +3991,13 @@ editions@^1.3.3:
   resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b"
   integrity sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg==
 
-editorconfig@^0.15.2:
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.2.tgz#047be983abb9ab3c2eefe5199cb2b7c5689f0702"
-  integrity sha512-GWjSI19PVJAM9IZRGOS+YKI8LN+/sjkSjNyvxL5ucqP9/IqtYNXBaQ/6c/hkPNYQHyOHra2KoXZI/JVpuqwmcQ==
+editorconfig@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
+  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
   dependencies:
-    "@types/node" "^10.11.7"
-    "@types/semver" "^5.5.0"
     commander "^2.19.0"
-    lru-cache "^4.1.3"
+    lru-cache "^4.1.5"
     semver "^5.6.0"
     sigmund "^1.0.1"
 
@@ -6180,6 +6189,11 @@ is-whitespace-character@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz#ede53b4c6f6fb3874533751ec9280d01928d03ed"
   integrity sha512-SzM+T5GKUCtLhlHFKt2SDAX2RFzfS6joT91F2/WSi9LxgFdsnhfPK/UIA+JhRR2xuyLdrCys2PiFDrtn1fU5hQ==
 
+is-whitespace@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
+  integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38=
+
 is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -6746,15 +6760,15 @@ js-base64@^2.1.8:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
   integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==
 
-js-beautify@^1.8.8:
-  version "1.8.9"
-  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.8.9.tgz#08e3c05ead3ecfbd4f512c3895b1cda76c87d523"
-  integrity sha512-MwPmLywK9RSX0SPsUJjN7i+RQY9w/yC17Lbrq9ViEefpLRgqAR2BgrMN2AbifkUuhDV8tRauLhLda/9+bE0YQA==
+js-beautify@^1.6.12, js-beautify@^1.8.8:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.10.2.tgz#88c9099cd6559402b124cfab18754936f8a7b178"
+  integrity sha512-ZtBYyNUYJIsBWERnQP0rPN9KjkrDfJcMjuVGcvXOUJrD1zmOGwhRwQ4msG+HJ+Ni/FA7+sRQEMYVzdTQDvnzvQ==
   dependencies:
     config-chain "^1.1.12"
-    editorconfig "^0.15.2"
+    editorconfig "^0.15.3"
     glob "^7.1.3"
-    mkdirp "~0.5.0"
+    mkdirp "~0.5.1"
     nopt "~4.0.1"
 
 js-cookie@^2.1.3:
@@ -7350,7 +7364,7 @@ lowlight@^1.11.0:
     fault "^1.0.2"
     highlight.js "~9.13.0"
 
-lru-cache@4.1.x, lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.3:
+lru-cache@4.1.x, lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
   integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
@@ -7796,7 +7810,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.5.x, mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@0.5.x, mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
@@ -8985,6 +8999,15 @@ pretty-format@^24.8.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
+pretty@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
+  integrity sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=
+  dependencies:
+    condense-newlines "^0.2.1"
+    extend-shallow "^2.0.1"
+    js-beautify "^1.6.12"
+
 prismjs@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.6.0.tgz#118d95fb7a66dba2272e343b345f5236659db365"