Add latest changes from gitlab-org/gitlab@master

2020-01-06 15:07:26 +00:00 · 2020-01-06 15:07:26 +00:00 · 506159637d
parent 045c0f9554
commit 506159637d
48 changed files with 324 additions and 195 deletions
--- a/.gitlab/issue_templates/Feature
+++ b/.gitlab/issue_templates/Feature
@ -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)
--- 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();
  },
--- 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: {
--- 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),
--- 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,
 });
--- 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
--- 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
--- 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
--- 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

--- 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
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@ -61,10 +61,14 @@
      = f.select :project_view, project_view_choices, {}, class: 'select2'
      .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
--- a/changelogs/unreleased/ide_render_whitespaces.yml
+++ b/changelogs/unreleased/ide_render_whitespaces.yml
@ -0,0 +1,5 @@
+---
+title: Render whitespaces in code
+merge_request: 17244
+author: Mathieu Parent
+type: added
--- 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
@ -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
--- 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

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

--- 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",
--- 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!)
--- 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.')
--- 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"
--- 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>
--- 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>
--- 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>
--- 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]"
--- 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"
--- 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"
--- 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"
--- 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"
--- 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>
 `;
--- 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>
 `;
--- 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>
 `;
--- 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 = () => {
--- 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);
+      });
    });
  });

--- 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>
 `;
--- 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>
--- 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>
--- 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"
--- 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', () => {
--- 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>
   
--- 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"
    />
--- 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"
--- 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>"
+`;
--- 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"
--- 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>
 `;
--- 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);
--- 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',
--- 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)
--- 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"