Add latest changes from gitlab-org/gitlab@master

38 files changed, 220 insertions, 97 deletions

diff --git a/spec/frontend/blob/components/blob_edit_content_spec.js b/spec/frontend/blob/components/blob_edit_content_spec.js
index eff53fe7ce9..189d2629efa 100644
--- a/spec/frontend/blob/components/blob_edit_content_spec.js
+++ b/spec/frontend/blob/components/blob_edit_content_spec.js
@@ -12,11 +12,12 @@ describe('Blob Header Editing', () => {
   const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
   const fileName = 'lorem.txt';
 
-  function createComponent() {
+  function createComponent(props = {}) {
     wrapper = shallowMount(BlobEditContent, {
       propsData: {
         value,
         fileName,
+        ...props,
       },
     });
   }
@@ -40,6 +41,14 @@ describe('Blob Header Editing', () => {
   });
 
   describe('functionality', () => {
+    it('does not fail without content', () => {
+      const spy = jest.spyOn(global.console, 'error');
+      createComponent({ value: undefined });
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(wrapper.contains('#editor')).toBe(true);
+    });
+
     it('initialises Editor Lite', () => {
       const el = wrapper.find({ ref: 'editor' }).element;
       expect(initEditorLite).toHaveBeenCalledWith({
diff --git a/spec/frontend/blob/components/blob_header_default_actions_spec.js b/spec/frontend/blob/components/blob_header_default_actions_spec.js
index 39d627e71c5..684840afe1c 100644
--- a/spec/frontend/blob/components/blob_header_default_actions_spec.js
+++ b/spec/frontend/blob/components/blob_header_default_actions_spec.js
@@ -6,7 +6,7 @@ import {
   BTN_RAW_TITLE,
   RICH_BLOB_VIEWER,
 } from '~/blob/components/constants';
-import { GlButtonGroup, GlButton } from '@gitlab/ui';
+import { GlButtonGroup, GlDeprecatedButton } from '@gitlab/ui';
 import { Blob } from './mock_data';
 
 describe('Blob Header Default Actions', () => {
@@ -27,7 +27,7 @@ describe('Blob Header Default Actions', () => {
   beforeEach(() => {
     createComponent();
     btnGroup = wrapper.find(GlButtonGroup);
-    buttons = wrapper.findAll(GlButton);
+    buttons = wrapper.findAll(GlDeprecatedButton);
   });
 
   afterEach(() => {
@@ -62,7 +62,7 @@ describe('Blob Header Default Actions', () => {
       createComponent({
         activeViewer: RICH_BLOB_VIEWER,
       });
-      buttons = wrapper.findAll(GlButton);
+      buttons = wrapper.findAll(GlDeprecatedButton);
 
       expect(buttons.at(0).attributes('disabled')).toBeTruthy();
     });
diff --git a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
index f1a7ac8b21a..0f34d6419d3 100644
--- a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
+++ b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
@@ -6,7 +6,7 @@ import {
   SIMPLE_BLOB_VIEWER,
   SIMPLE_BLOB_VIEWER_TITLE,
 } from '~/blob/components/constants';
-import { GlButtonGroup, GlButton } from '@gitlab/ui';
+import { GlButtonGroup, GlDeprecatedButton } from '@gitlab/ui';
 
 describe('Blob Header Viewer Switcher', () => {
   let wrapper;
@@ -35,7 +35,7 @@ describe('Blob Header Viewer Switcher', () => {
     beforeEach(() => {
       createComponent();
       btnGroup = wrapper.find(GlButtonGroup);
-      buttons = wrapper.findAll(GlButton);
+      buttons = wrapper.findAll(GlDeprecatedButton);
     });
 
     it('renders gl-button-group component', () => {
@@ -57,7 +57,7 @@ describe('Blob Header Viewer Switcher', () => {
 
     function factory(propsData = {}) {
       createComponent(propsData);
-      buttons = wrapper.findAll(GlButton);
+      buttons = wrapper.findAll(GlDeprecatedButton);
       simpleBtn = buttons.at(0);
       richBtn = buttons.at(1);
 
diff --git a/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
index 058aca16ea0..70edd36669b 100644
--- a/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
@@ -1,6 +1,6 @@
 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import CiVariableModal from '~/ci_variable_list/components/ci_variable_modal.vue';
 import createStore from '~/ci_variable_list/store';
 import mockData from '../services/mock_data';
@@ -27,11 +27,11 @@ describe('Ci variable modal', () => {
   const findModal = () => wrapper.find(ModalStub);
   const addOrUpdateButton = index =>
     findModal()
-      .findAll(GlButton)
+      .findAll(GlDeprecatedButton)
       .at(index);
   const deleteVariableButton = () =>
     findModal()
-      .findAll(GlButton)
+      .findAll(GlDeprecatedButton)
       .at(1);
 
   beforeEach(() => {
diff --git a/spec/frontend/ci_variable_list/components/ci_variable_popover_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_popover_spec.js
index 5d37f059161..46f77a6f11e 100644
--- a/spec/frontend/ci_variable_list/components/ci_variable_popover_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_variable_popover_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import CiVariablePopover from '~/ci_variable_list/components/ci_variable_popover.vue';
 import mockData from '../services/mock_data';
 
@@ -18,7 +18,7 @@ describe('Ci Variable Popover', () => {
     });
   };
 
-  const findButton = () => wrapper.find(GlButton);
+  const findButton = () => wrapper.find(GlDeprecatedButton);
 
   beforeEach(() => {
     createComponent();
diff --git a/spec/frontend/code_navigation/components/__snapshots__/popover_spec.js.snap b/spec/frontend/code_navigation/components/__snapshots__/popover_spec.js.snap
index dda6d68018e..c1534022242 100644
--- a/spec/frontend/code_navigation/components/__snapshots__/popover_spec.js.snap
+++ b/spec/frontend/code_navigation/components/__snapshots__/popover_spec.js.snap
@@ -23,7 +23,7 @@ exports[`Code navigation popover component renders popover 1`] = `
   <div
     class="popover-body"
   >
-    <gl-button-stub
+    <gl-deprecated-button-stub
       class="w-100"
       href="http://test.com"
       size="md"
@@ -33,7 +33,7 @@ exports[`Code navigation popover component renders popover 1`] = `
       
       Go to definition
     
-    </gl-button-stub>
+    </gl-deprecated-button-stub>
   </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 a4a0b98de1b..fafffcb6e0c 100644
--- a/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap
+++ b/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap
@@ -15,6 +15,7 @@ exports[`Contributors charts should render charts when loading completed and the
      
     <div>
       <glareachart-stub
+        annotations=""
         data="[object Object]"
         height="264"
         includelegendavgmax="true"
@@ -42,6 +43,7 @@ exports[`Contributors charts should render charts when loading completed and the
          
         <div>
           <glareachart-stub
+            annotations=""
             data="[object Object]"
             height="216"
             includelegendavgmax="true"
diff --git a/spec/frontend/environments/environment_pin_spec.js b/spec/frontend/environments/environment_pin_spec.js
index d1d6735fa38..486f6db7366 100644
--- a/spec/frontend/environments/environment_pin_spec.js
+++ b/spec/frontend/environments/environment_pin_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '~/environments/event_hub';
 import PinComponent from '~/environments/components/environment_pin.vue';
@@ -37,7 +37,7 @@ describe('Pin Component', () => {
 
   it('should emit onPinClick when clicked', () => {
     const eventHubSpy = jest.spyOn(eventHub, '$emit');
-    const button = wrapper.find(GlButton);
+    const button = wrapper.find(GlDeprecatedButton);
 
     button.vm.$emit('click');
 
diff --git a/spec/frontend/environments/environment_rollback_spec.js b/spec/frontend/environments/environment_rollback_spec.js
index fb62a096c3d..f25e05f9cd8 100644
--- a/spec/frontend/environments/environment_rollback_spec.js
+++ b/spec/frontend/environments/environment_rollback_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount, mount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import eventHub from '~/environments/event_hub';
 import RollbackComponent from '~/environments/components/environment_rollback.vue';
 
@@ -40,7 +40,7 @@ describe('Rollback Component', () => {
         },
       },
     });
-    const button = wrapper.find(GlButton);
+    const button = wrapper.find(GlDeprecatedButton);
 
     button.vm.$emit('click');
 
diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js
index 72b0466a1f0..adbbc04ce78 100644
--- a/spec/frontend/error_tracking/components/error_details_spec.js
+++ b/spec/frontend/error_tracking/components/error_details_spec.js
@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
 import {
-  GlButton,
+  GlDeprecatedButton,
   GlLoadingIcon,
   GlLink,
   GlBadge,
@@ -38,7 +38,7 @@ describe('ErrorDetails', () => {
 
   function mountComponent() {
     wrapper = shallowMount(ErrorDetails, {
-      stubs: { GlButton, GlSprintf },
+      stubs: { GlDeprecatedButton, GlSprintf },
       localVue,
       store,
       mocks,
@@ -178,7 +178,7 @@ describe('ErrorDetails', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
       expect(wrapper.find(Stacktrace).exists()).toBe(false);
       expect(wrapper.find(GlBadge).exists()).toBe(false);
-      expect(wrapper.findAll(GlButton).length).toBe(3);
+      expect(wrapper.findAll(GlDeprecatedButton).length).toBe(3);
     });
 
     describe('unsafe chars for culprit field', () => {
diff --git a/spec/frontend/error_tracking/components/error_tracking_actions_spec.js b/spec/frontend/error_tracking/components/error_tracking_actions_spec.js
index b22805f5227..1ea92883e54 100644
--- a/spec/frontend/error_tracking/components/error_tracking_actions_spec.js
+++ b/spec/frontend/error_tracking/components/error_tracking_actions_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import ErrorTrackingActions from '~/error_tracking/components/error_tracking_actions.vue';
 
 describe('Error Tracking Actions', () => {
@@ -20,7 +20,7 @@ describe('Error Tracking Actions', () => {
         },
         ...props,
       },
-      stubs: { GlButton },
+      stubs: { GlDeprecatedButton },
     });
   }
 
@@ -34,7 +34,7 @@ describe('Error Tracking Actions', () => {
     }
   });
 
-  const findButtons = () => wrapper.findAll(GlButton);
+  const findButtons = () => wrapper.findAll(GlDeprecatedButton);
 
   describe('when error status is unresolved', () => {
     it('renders the correct actions buttons to allow ignore and resolve', () => {
diff --git a/spec/frontend/error_tracking/components/error_tracking_list_spec.js b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
index 3bea1d343be..a6cb074f481 100644
--- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js
+++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
@@ -241,7 +241,7 @@ describe('ErrorTrackingList', () => {
         stubs: {
           GlTable: false,
           GlLink: false,
-          GlButton: false,
+          GlDeprecatedButton: false,
         },
       });
     });
@@ -280,7 +280,7 @@ describe('ErrorTrackingList', () => {
         stubs: {
           GlTable: false,
           GlLink: false,
-          GlButton: false,
+          GlDeprecatedButton: false,
         },
       });
     });
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 09977ecc7a3..1595f6c9fff 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,13 +16,13 @@ exports[`grafana integration component default state to match the default snapsh
     
     </h3>
      
-    <gl-button-stub
+    <gl-deprecated-button-stub
       class="js-settings-toggle"
       size="md"
       variant="secondary"
     >
       Expand
-    </gl-button-stub>
+    </gl-deprecated-button-stub>
      
     <p
       class="js-section-sub-header"
@@ -90,14 +90,14 @@ exports[`grafana integration component default state to match the default snapsh
         </p>
       </gl-form-group-stub>
        
-      <gl-button-stub
+      <gl-deprecated-button-stub
         size="md"
         variant="success"
       >
         
         Save Changes
       
-      </gl-button-stub>
+      </gl-deprecated-button-stub>
     </form>
   </div>
 </section>
diff --git a/spec/frontend/grafana_integration/components/grafana_integration_spec.js b/spec/frontend/grafana_integration/components/grafana_integration_spec.js
index 92754ada64f..3df200a98e4 100644
--- a/spec/frontend/grafana_integration/components/grafana_integration_spec.js
+++ b/spec/frontend/grafana_integration/components/grafana_integration_spec.js
@@ -1,5 +1,5 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import GrafanaIntegration from '~/grafana_integration/components/grafana_integration.vue';
 import { createStore } from '~/grafana_integration/store';
@@ -51,7 +51,7 @@ describe('grafana integration component', () => {
     it('renders as an expand button by default', () => {
       wrapper = shallowMount(GrafanaIntegration, { store });
 
-      const button = wrapper.find(GlButton);
+      const button = wrapper.find(GlDeprecatedButton);
 
       expect(button.text()).toBe('Expand');
     });
@@ -77,7 +77,8 @@ describe('grafana integration component', () => {
     });
 
     describe('submit button', () => {
-      const findSubmitButton = () => wrapper.find('.settings-content form').find(GlButton);
+      const findSubmitButton = () =>
+        wrapper.find('.settings-content form').find(GlDeprecatedButton);
 
       const endpointRequest = [
         operationsSettingsEndpoint,
diff --git a/spec/frontend/logs/components/log_control_buttons_spec.js b/spec/frontend/logs/components/log_control_buttons_spec.js
index 38e568f569f..85fc5a040d6 100644
--- a/spec/frontend/logs/components/log_control_buttons_spec.js
+++ b/spec/frontend/logs/components/log_control_buttons_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import LogControlButtons from '~/logs/components/log_control_buttons.vue';
 
 describe('LogControlButtons', () => {
@@ -31,9 +31,9 @@ describe('LogControlButtons', () => {
     expect(wrapper.isVueInstance()).toBe(true);
     expect(wrapper.isEmpty()).toBe(false);
 
-    expect(findScrollToTop().is(GlButton)).toBe(true);
-    expect(findScrollToBottom().is(GlButton)).toBe(true);
-    expect(findRefreshBtn().is(GlButton)).toBe(true);
+    expect(findScrollToTop().is(GlDeprecatedButton)).toBe(true);
+    expect(findScrollToBottom().is(GlDeprecatedButton)).toBe(true);
+    expect(findRefreshBtn().is(GlDeprecatedButton)).toBe(true);
   });
 
   it('emits a `refresh` event on click on `refresh` button', () => {
diff --git a/spec/frontend/maintenance_mode_settings/components/app_spec.js b/spec/frontend/maintenance_mode_settings/components/app_spec.js
index a67bc63cfe1..0453354b008 100644
--- a/spec/frontend/maintenance_mode_settings/components/app_spec.js
+++ b/spec/frontend/maintenance_mode_settings/components/app_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import MaintenanceModeSettingsApp from '~/maintenance_mode_settings/components/app.vue';
-import { GlToggle, GlFormTextarea, GlButton } from '@gitlab/ui';
+import { GlToggle, GlFormTextarea, GlDeprecatedButton } from '@gitlab/ui';
 
 describe('MaintenanceModeSettingsApp', () => {
   let wrapper;
@@ -16,7 +16,7 @@ describe('MaintenanceModeSettingsApp', () => {
   const findMaintenanceModeSettingsContainer = () => wrapper.find('article');
   const findGlToggle = () => wrapper.find(GlToggle);
   const findGlFormTextarea = () => wrapper.find(GlFormTextarea);
-  const findGlButton = () => wrapper.find(GlButton);
+  const findGlButton = () => wrapper.find(GlDeprecatedButton);
 
   describe('template', () => {
     beforeEach(() => {
@@ -35,7 +35,7 @@ describe('MaintenanceModeSettingsApp', () => {
       expect(findGlFormTextarea().exists()).toBe(true);
     });
 
-    it('renders the GlButton', () => {
+    it('renders the GlDeprecatedButton', () => {
       expect(findGlButton().exists()).toBe(true);
     });
   });
diff --git a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
index c61ac0fb175..f7e15d4a5c4 100644
--- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
@@ -90,7 +90,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
       <gl-form-group-stub
         class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button"
       >
-        <gl-button-stub
+        <gl-deprecated-button-stub
           size="md"
           title="Reload this page"
           variant="default"
@@ -99,7 +99,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
             name="repeat"
             size="16"
           />
-        </gl-button-stub>
+        </gl-deprecated-button-stub>
       </gl-form-group-stub>
        
       <!---->
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index ec25c9e169a..f2c3b199481 100644
--- a/spec/frontend/monitoring/components/dashboard_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount, createLocalVue, mount } from '@vue/test-utils';
-import { GlDropdownItem, GlButton } from '@gitlab/ui';
+import { GlDropdownItem, GlDeprecatedButton } from '@gitlab/ui';
 import VueDraggable from 'vuedraggable';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
@@ -234,7 +234,7 @@ describe('Dashboard', () => {
       const refreshBtn = wrapper.findAll({ ref: 'refreshDashboardBtn' });
 
       expect(refreshBtn).toHaveLength(1);
-      expect(refreshBtn.is(GlButton)).toBe(true);
+      expect(refreshBtn.is(GlDeprecatedButton)).toBe(true);
     });
   });
 
@@ -517,7 +517,7 @@ describe('Dashboard', () => {
       const externalDashboardButton = wrapper.find('.js-external-dashboard-link');
 
       expect(externalDashboardButton.exists()).toBe(true);
-      expect(externalDashboardButton.is(GlButton)).toBe(true);
+      expect(externalDashboardButton.is(GlDeprecatedButton)).toBe(true);
       expect(externalDashboardButton.text()).toContain('View full dashboard');
     });
   });
diff --git a/spec/frontend/monitoring/components/embeds/embed_group_spec.js b/spec/frontend/monitoring/components/embeds/embed_group_spec.js
index 54d21def603..49c10483c45 100644
--- a/spec/frontend/monitoring/components/embeds/embed_group_spec.js
+++ b/spec/frontend/monitoring/components/embeds/embed_group_spec.js
@@ -1,6 +1,6 @@
 import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlButton, GlCard } from '@gitlab/ui';
+import { GlDeprecatedButton, GlCard } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import EmbedGroup from '~/monitoring/components/embeds/embed_group.vue';
 import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
@@ -80,7 +80,7 @@ describe('Embed Group', () => {
       metricsWithDataGetter.mockReturnValue([1]);
       mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } });
 
-      wrapper.find(GlButton).trigger('click');
+      wrapper.find(GlDeprecatedButton).trigger('click');
 
       wrapper.vm.$nextTick(() => {
         expect(wrapper.find('.card-body').classes()).toContain('d-none');
@@ -150,14 +150,14 @@ describe('Embed Group', () => {
       metricsWithDataGetter.mockReturnValue([1]);
       mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } });
 
-      expect(wrapper.find(GlButton).text()).toBe('Hide chart');
+      expect(wrapper.find(GlDeprecatedButton).text()).toBe('Hide chart');
     });
 
     it('has a plural label when there are multiple embeds', () => {
       metricsWithDataGetter.mockReturnValue([2]);
       mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } });
 
-      expect(wrapper.find(GlButton).text()).toBe('Hide charts');
+      expect(wrapper.find(GlDeprecatedButton).text()).toBe('Hide charts');
     });
   });
 });
diff --git a/spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js b/spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js
index 4348445f7ca..e62fb5db2c0 100644
--- a/spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js
+++ b/spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js
@@ -1,4 +1,4 @@
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { TEST_HOST } from 'spec/test_constants';
 import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
@@ -23,7 +23,7 @@ describe('ResolveWithIssueButton', () => {
   });
 
   it('it should have a link with the provided link property as href', () => {
-    const button = wrapper.find(GlButton);
+    const button = wrapper.find(GlDeprecatedButton);
 
     expect(button.attributes().href).toBe(url);
   });
diff --git a/spec/frontend/operation_settings/components/external_dashboard_spec.js b/spec/frontend/operation_settings/components/external_dashboard_spec.js
index 89db03378db..19214d1d954 100644
--- a/spec/frontend/operation_settings/components/external_dashboard_spec.js
+++ b/spec/frontend/operation_settings/components/external_dashboard_spec.js
@@ -1,5 +1,5 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import { GlButton, GlLink, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLink, GlFormGroup, GlFormInput } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import ExternalDashboard from '~/operation_settings/components/external_dashboard.vue';
 import store from '~/operation_settings/store';
@@ -49,7 +49,7 @@ describe('operation settings external dashboard component', () => {
 
   describe('expand/collapse button', () => {
     it('renders as an expand button by default', () => {
-      const button = wrapper.find(GlButton);
+      const button = wrapper.find(GlDeprecatedButton);
 
       expect(button.text()).toBe('Expand');
     });
@@ -115,7 +115,8 @@ describe('operation settings external dashboard component', () => {
     });
 
     describe('submit button', () => {
-      const findSubmitButton = () => wrapper.find('.settings-content form').find(GlButton);
+      const findSubmitButton = () =>
+        wrapper.find('.settings-content form').find(GlDeprecatedButton);
 
       const endpointRequest = [
         operationsSettingsEndpoint,
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 9b723ccc3dc..ea3bedf59e0 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
@@ -38,14 +38,14 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
     />
   </form>
    
-  <gl-button-stub
+  <gl-deprecated-button-stub
     size="md"
     variant="secondary"
   >
     Cancel
-  </gl-button-stub>
+  </gl-deprecated-button-stub>
    
-  <gl-button-stub
+  <gl-deprecated-button-stub
     disabled="true"
     size="md"
     variant="warning"
@@ -53,14 +53,14 @@ exports[`User Operation confirmation modal renders modal with form included 1`]
     
       secondaryAction
     
-  </gl-button-stub>
+  </gl-deprecated-button-stub>
    
-  <gl-button-stub
+  <gl-deprecated-button-stub
     disabled="true"
     size="md"
     variant="danger"
   >
     action
-  </gl-button-stub>
+  </gl-deprecated-button-stub>
 </div>
 `;
diff --git a/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js b/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
index 3efefa8137f..16b0bd305cd 100644
--- a/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
+++ b/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlButton, GlFormInput } from '@gitlab/ui';
+import { GlDeprecatedButton, GlFormInput } from '@gitlab/ui';
 import DeleteUserModal from '~/pages/admin/users/components/delete_user_modal.vue';
 import ModalStub from './stubs/modal_stub';
 
@@ -13,7 +13,7 @@ describe('User Operation confirmation modal', () => {
 
   const findButton = variant =>
     wrapper
-      .findAll(GlButton)
+      .findAll(GlDeprecatedButton)
       .filter(w => w.attributes('variant') === variant)
       .at(0);
   const findForm = () => wrapper.find('form');
diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap
index c15971912dd..3222b92d23f 100644
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap
@@ -10,6 +10,7 @@ exports[`PipelinesAreaChart matches the snapshot 1`] = `
    
   <div>
     <glareachart-stub
+      annotations=""
       data="[object Object],[object Object]"
       height="300"
       legendaveragetext="Avg"
diff --git a/spec/frontend/releases/components/release_block_milestone_info_spec.js b/spec/frontend/releases/components/release_block_milestone_info_spec.js
index 0e79c45b337..0b65b6cab96 100644
--- a/spec/frontend/releases/components/release_block_milestone_info_spec.js
+++ b/spec/frontend/releases/components/release_block_milestone_info_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { GlProgressBar, GlLink, GlBadge, GlButton } from '@gitlab/ui';
+import { GlProgressBar, GlLink, GlBadge, GlDeprecatedButton } from '@gitlab/ui';
 import { trimText } from 'helpers/text_helper';
 import ReleaseBlockMilestoneInfo from '~/releases/components/release_block_milestone_info.vue';
 import { milestones as originalMilestones } from '../mock_data';
@@ -106,7 +106,7 @@ describe('Release block milestone info', () => {
 
     const clickShowMoreFewerButton = () => {
       milestoneListContainer()
-        .find(GlButton)
+        .find(GlDeprecatedButton)
         .trigger('click');
 
       return wrapper.vm.$nextTick();
diff --git a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
index 955716ccbca..f7a9827a9ad 100644
--- a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
+++ b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
@@ -15,13 +15,13 @@ exports[`self monitor component When the self monitor project has not been creat
     
     </h4>
      
-    <gl-button-stub
+    <gl-deprecated-button-stub
       class="js-settings-toggle"
       size="md"
       variant="secondary"
     >
       Expand
-    </gl-button-stub>
+    </gl-deprecated-button-stub>
      
     <p
       class="js-section-sub-header"
diff --git a/spec/frontend/self_monitor/components/self_monitor_form_spec.js b/spec/frontend/self_monitor/components/self_monitor_form_spec.js
index 6532c6ed2c7..0e6abba08f3 100644
--- a/spec/frontend/self_monitor/components/self_monitor_form_spec.js
+++ b/spec/frontend/self_monitor/components/self_monitor_form_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import SelfMonitor from '~/self_monitor/components/self_monitor_form.vue';
 import { createStore } from '~/self_monitor/store';
 
@@ -41,7 +41,7 @@ describe('self monitor component', () => {
       it('renders as an expand button by default', () => {
         wrapper = shallowMount(SelfMonitor, { store });
 
-        const button = wrapper.find(GlButton);
+        const button = wrapper.find(GlDeprecatedButton);
 
         expect(button.text()).toBe('Expand');
       });
diff --git a/spec/frontend/serverless/components/missing_prometheus_spec.js b/spec/frontend/serverless/components/missing_prometheus_spec.js
index 896dc5b43e1..90730765f7c 100644
--- a/spec/frontend/serverless/components/missing_prometheus_spec.js
+++ b/spec/frontend/serverless/components/missing_prometheus_spec.js
@@ -1,4 +1,4 @@
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import missingPrometheusComponent from '~/serverless/components/missing_prometheus.vue';
 
@@ -26,7 +26,7 @@ describe('missingPrometheusComponent', () => {
       'Function invocation metrics require Prometheus to be installed first.',
     );
 
-    expect(wrapper.find(GlButton).attributes('variant')).toBe('success');
+    expect(wrapper.find(GlDeprecatedButton).attributes('variant')).toBe('success');
   });
 
   it('should render no prometheus data message', () => {
diff --git a/spec/frontend/snippets/components/snippet_blob_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
index 334fe7196a4..75688e61892 100644
--- a/spec/frontend/snippets/components/snippet_blob_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
@@ -1,6 +1,7 @@
 import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
 import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
 import BlobContentEdit from '~/blob/components/blob_edit_content.vue';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 
@@ -13,11 +14,13 @@ describe('Snippet Blob Edit component', () => {
   const findHeader = () => wrapper.find(BlobHeaderEdit);
   const findContent = () => wrapper.find(BlobContentEdit);
 
-  function createComponent() {
+  function createComponent(props = {}) {
     wrapper = shallowMount(SnippetBlobEdit, {
       propsData: {
         value,
         fileName,
+        isLoading: false,
+        ...props,
       },
     });
   }
@@ -39,9 +42,23 @@ describe('Snippet Blob Edit component', () => {
       expect(findHeader().exists()).toBe(true);
       expect(findContent().exists()).toBe(true);
     });
+
+    it('renders loader if isLoading equals true', () => {
+      createComponent({ isLoading: true });
+      expect(wrapper.contains(GlLoadingIcon)).toBe(true);
+      expect(findContent().exists()).toBe(false);
+    });
   });
 
   describe('functionality', () => {
+    it('does not fail without content', () => {
+      const spy = jest.spyOn(global.console, 'error');
+      createComponent({ value: undefined });
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(findContent().exists()).toBe(true);
+    });
+
     it('emits "name-change" event when the file name gets changed', () => {
       expect(wrapper.emitted('name-change')).toBeUndefined();
       const newFilename = 'foo.bar';
@@ -51,5 +68,15 @@ describe('Snippet Blob Edit component', () => {
         expect(wrapper.emitted('name-change')[0]).toEqual([newFilename]);
       });
     });
+
+    it('emits "input" event when the file content gets changed', () => {
+      expect(wrapper.emitted('input')).toBeUndefined();
+      const newValue = 'foo.bar';
+      findContent().vm.$emit('input', newValue);
+
+      return nextTick().then(() => {
+        expect(wrapper.emitted('input')[0]).toEqual([newValue]);
+      });
+    });
   });
 });
diff --git a/spec/frontend/snippets/components/snippet_header_spec.js b/spec/frontend/snippets/components/snippet_header_spec.js
index 16a66c70d6a..878baab9cac 100644
--- a/spec/frontend/snippets/components/snippet_header_spec.js
+++ b/spec/frontend/snippets/components/snippet_header_spec.js
@@ -1,7 +1,7 @@
 import SnippetHeader from '~/snippets/components/snippet_header.vue';
 import DeleteSnippetMutation from '~/snippets/mutations/deleteSnippet.mutation.graphql';
 import { ApolloMutation } from 'vue-apollo';
-import { GlButton, GlModal } from '@gitlab/ui';
+import { GlDeprecatedButton, GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 describe('Snippet header component', () => {
@@ -89,7 +89,7 @@ describe('Snippet header component', () => {
         updateSnippet: false,
       },
     });
-    expect(wrapper.findAll(GlButton).length).toEqual(0);
+    expect(wrapper.findAll(GlDeprecatedButton).length).toEqual(0);
 
     createComponent({
       permissions: {
@@ -97,7 +97,7 @@ describe('Snippet header component', () => {
         updateSnippet: false,
       },
     });
-    expect(wrapper.findAll(GlButton).length).toEqual(1);
+    expect(wrapper.findAll(GlDeprecatedButton).length).toEqual(1);
 
     createComponent({
       permissions: {
@@ -105,7 +105,7 @@ describe('Snippet header component', () => {
         updateSnippet: true,
       },
     });
-    expect(wrapper.findAll(GlButton).length).toEqual(2);
+    expect(wrapper.findAll(GlDeprecatedButton).length).toEqual(2);
 
     createComponent({
       permissions: {
@@ -117,7 +117,7 @@ describe('Snippet header component', () => {
       canCreateSnippet: true,
     });
     return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.findAll(GlButton).length).toEqual(3);
+      expect(wrapper.findAll(GlDeprecatedButton).length).toEqual(3);
     });
   });
 
diff --git a/spec/frontend/static_site_editor/components/static_site_editor_spec.js b/spec/frontend/static_site_editor/components/static_site_editor_spec.js
new file mode 100644
index 00000000000..919763ce9fe
--- /dev/null
+++ b/spec/frontend/static_site_editor/components/static_site_editor_spec.js
@@ -0,0 +1,82 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+import createState from '~/static_site_editor/store/state';
+
+import StaticSiteEditor from '~/static_site_editor/components/static_site_editor.vue';
+import EditArea from '~/static_site_editor/components/edit_area.vue';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('StaticSiteEditor', () => {
+  let wrapper;
+  let store;
+  let loadContentActionMock;
+
+  const buildStore = (initialState = {}) => {
+    loadContentActionMock = jest.fn();
+
+    store = new Vuex.Store({
+      state: createState(initialState),
+      actions: {
+        loadContent: loadContentActionMock,
+      },
+    });
+  };
+
+  const buildWrapper = () => {
+    wrapper = shallowMount(StaticSiteEditor, {
+      localVue,
+      store,
+    });
+  };
+
+  const findEditArea = () => wrapper.find(EditArea);
+
+  beforeEach(() => {
+    buildStore();
+    buildWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when content is not loaded', () => {
+    it('does not render edit area', () => {
+      expect(findEditArea().exists()).toBe(false);
+    });
+  });
+
+  describe('when content is loaded', () => {
+    const content = 'edit area content';
+
+    beforeEach(() => {
+      buildStore({ content, isContentLoaded: true });
+      buildWrapper();
+    });
+
+    it('renders the edit area', () => {
+      expect(findEditArea().exists()).toBe(true);
+    });
+
+    it('passes page content to edit area', () => {
+      expect(findEditArea().props('value')).toBe(content);
+    });
+  });
+
+  it('displays skeleton loader while loading content', () => {
+    buildStore({ isLoadingContent: true });
+    buildWrapper();
+
+    expect(wrapper.find(GlSkeletonLoader).exists()).toBe(true);
+  });
+
+  it('dispatches load content action', () => {
+    expect(loadContentActionMock).toHaveBeenCalled();
+  });
+});
diff --git a/spec/frontend/vue_mr_widget/deployment/deployment_action_button_spec.js b/spec/frontend/vue_mr_widget/deployment/deployment_action_button_spec.js
index 1b14ee694fe..6adf4975414 100644
--- a/spec/frontend/vue_mr_widget/deployment/deployment_action_button_spec.js
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_action_button_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { GlIcon, GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlIcon, GlLoadingIcon, GlDeprecatedButton } from '@gitlab/ui';
 import DeploymentActionButton from '~/vue_merge_request_widget/components/deployment/deployment_action_button.vue';
 import {
   CREATED,
@@ -75,7 +75,7 @@ describe('Deployment action button', () => {
 
     it('is disabled and shows the loading icon', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
-      expect(wrapper.find(GlButton).props('disabled')).toBe(true);
+      expect(wrapper.find(GlDeprecatedButton).props('disabled')).toBe(true);
     });
   });
 
@@ -90,7 +90,7 @@ describe('Deployment action button', () => {
     });
     it('is disabled and does not show the loading icon', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.find(GlButton).props('disabled')).toBe(true);
+      expect(wrapper.find(GlDeprecatedButton).props('disabled')).toBe(true);
     });
   });
 
@@ -106,7 +106,7 @@ describe('Deployment action button', () => {
     });
     it('is disabled and does not show the loading icon', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.find(GlButton).props('disabled')).toBe(true);
+      expect(wrapper.find(GlDeprecatedButton).props('disabled')).toBe(true);
     });
   });
 
@@ -118,7 +118,7 @@ describe('Deployment action button', () => {
     });
     it('is not disabled nor does it show the loading icon', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.find(GlButton).props('disabled')).toBe(false);
+      expect(wrapper.find(GlDeprecatedButton).props('disabled')).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/clipboard_button_spec.js b/spec/frontend/vue_shared/components/clipboard_button_spec.js
index 07ff86828e7..7f0b7ba8cf8 100644
--- a/spec/frontend/vue_shared/components/clipboard_button_spec.js
+++ b/spec/frontend/vue_shared/components/clipboard_button_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlButton, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 describe('clipboard button', () => {
@@ -26,7 +26,7 @@ describe('clipboard button', () => {
     });
 
     it('renders a button for clipboard', () => {
-      expect(wrapper.find(GlButton).exists()).toBe(true);
+      expect(wrapper.find(GlDeprecatedButton).exists()).toBe(true);
       expect(wrapper.attributes('data-clipboard-text')).toBe('copy me');
       expect(wrapper.find(GlIcon).props('name')).toBe('copy-to-clipboard');
     });
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
index d996f48f9cc..e2d31a41e82 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
@@ -35,7 +35,7 @@ describe('DropdownButton', () => {
 
   describe('template', () => {
     it('renders component container element', () => {
-      expect(wrapper.is('gl-button-stub')).toBe(true);
+      expect(wrapper.is('gl-deprecated-button-stub')).toBe(true);
     });
 
     it('renders button text element', () => {
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
index 9bc01d8723f..d7ca7ce30a9 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
@@ -1,7 +1,7 @@
 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
-import { GlButton, GlIcon, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import DropdownContentsCreateView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue';
 
 import labelSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
@@ -127,7 +127,7 @@ describe('DropdownContentsCreateView', () => {
     it('renders dropdown back button element', () => {
       const backBtnEl = wrapper
         .find('.dropdown-title')
-        .findAll(GlButton)
+        .findAll(GlDeprecatedButton)
         .at(0);
 
       expect(backBtnEl.exists()).toBe(true);
@@ -145,7 +145,7 @@ describe('DropdownContentsCreateView', () => {
     it('renders dropdown close button element', () => {
       const closeBtnEl = wrapper
         .find('.dropdown-title')
-        .findAll(GlButton)
+        .findAll(GlDeprecatedButton)
         .at(1);
 
       expect(closeBtnEl.exists()).toBe(true);
@@ -192,7 +192,7 @@ describe('DropdownContentsCreateView', () => {
     it('renders create button element', () => {
       const createBtnEl = wrapper
         .find('.dropdown-actions')
-        .findAll(GlButton)
+        .findAll(GlDeprecatedButton)
         .at(0);
 
       expect(createBtnEl.exists()).toBe(true);
@@ -213,7 +213,7 @@ describe('DropdownContentsCreateView', () => {
     it('renders cancel button element', () => {
       const cancelBtnEl = wrapper
         .find('.dropdown-actions')
-        .findAll(GlButton)
+        .findAll(GlDeprecatedButton)
         .at(1);
 
       expect(cancelBtnEl.exists()).toBe(true);
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
index 487b917852e..3e6dbdb7ecb 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
@@ -1,7 +1,7 @@
 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
-import { GlButton, GlLoadingIcon, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue';
 
@@ -199,7 +199,7 @@ describe('DropdownContentsLabelsView', () => {
     });
 
     it('renders dropdown close button element', () => {
-      const closeButtonEl = wrapper.find('.dropdown-title').find(GlButton);
+      const closeButtonEl = wrapper.find('.dropdown-title').find(GlDeprecatedButton);
 
       expect(closeButtonEl.exists()).toBe(true);
       expect(closeButtonEl.find(GlIcon).exists()).toBe(true);
@@ -253,7 +253,7 @@ describe('DropdownContentsLabelsView', () => {
     });
 
     it('renders footer list items', () => {
-      const createLabelBtn = wrapper.find('.dropdown-footer').find(GlButton);
+      const createLabelBtn = wrapper.find('.dropdown-footer').find(GlDeprecatedButton);
       const manageLabelsLink = wrapper.find('.dropdown-footer').find(GlLink);
 
       expect(createLabelBtn.exists()).toBe(true);
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js
index c1d9be7393c..0717fd829a0 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js
@@ -1,7 +1,7 @@
 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import DropdownTitle from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue';
 
 import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
@@ -42,7 +42,7 @@ describe('DropdownTitle', () => {
     });
 
     it('renders edit link', () => {
-      const editBtnEl = wrapper.find(GlButton);
+      const editBtnEl = wrapper.find(GlDeprecatedButton);
 
       expect(editBtnEl.exists()).toBe(true);
       expect(editBtnEl.text()).toBe('Edit');
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
index 6f66d1cafb9..1db1114f9ba 100644
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { TEST_HOST } from 'spec/test_constants';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
@@ -37,7 +37,7 @@ describe('UserAvatarList', () => {
   };
 
   const clickButton = () => {
-    const button = wrapper.find(GlButton);
+    const button = wrapper.find(GlDeprecatedButton);
     button.vm.$emit('click');
   };
 
@@ -112,7 +112,7 @@ describe('UserAvatarList', () => {
     it('does not show button', () => {
       factory();
 
-      expect(wrapper.find(GlButton).exists()).toBe(false);
+      expect(wrapper.find(GlDeprecatedButton).exists()).toBe(false);
     });
   });