Add latest changes from gitlab-org/gitlab@master

30 files changed, 198 insertions, 133 deletions

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)