Add latest changes from gitlab-org/gitlab@master

50 files changed, 445 insertions, 119 deletions

diff --git a/spec/controllers/projects/grafana_api_controller_spec.rb b/spec/controllers/projects/grafana_api_controller_spec.rb
index 0ef96514961..c62baa30fde 100644
--- a/spec/controllers/projects/grafana_api_controller_spec.rb
+++ b/spec/controllers/projects/grafana_api_controller_spec.rb
@@ -20,8 +20,8 @@ describe Projects::GrafanaApiController do
         proxy_path: 'api/v1/query_range',
         datasource_id: '1',
         query: 'rate(relevant_metric)',
-        start: '1570441248',
-        end: '1570444848',
+        start_time: '1570441248',
+        end_time: '1570444848',
         step: '900'
       }
     end
@@ -50,7 +50,10 @@ describe Projects::GrafanaApiController do
         expect(Grafana::ProxyService)
           .to have_received(:new)
           .with(project, '1', 'api/v1/query_range',
-                params.slice(:query, :start, :end, :step).stringify_keys)
+                 { 'query' => params[:query],
+                   'start' => params[:start_time],
+                   'end'   => params[:end_time],
+                   'step'  => params[:step] })
 
         expect(response).to have_gitlab_http_status(:ok)
         expect(json_response).to eq({})
diff --git a/spec/features/markdown/metrics_spec.rb b/spec/features/markdown/metrics_spec.rb
index 6ef4f6ddecc..0d8858a7afd 100644
--- a/spec/features/markdown/metrics_spec.rb
+++ b/spec/features/markdown/metrics_spec.rb
@@ -34,6 +34,8 @@ describe 'Metrics rendering', :js, :use_clean_rails_memory_store_caching, :sidek
     before do
       import_common_metrics
       stub_any_prometheus_request_with_response
+
+      allow(Prometheus::ProxyService).to receive(:new).and_call_original
     end
 
     it 'shows embedded metrics' do
@@ -42,6 +44,12 @@ describe 'Metrics rendering', :js, :use_clean_rails_memory_store_caching, :sidek
       expect(page).to have_css('div.prometheus-graph')
       expect(page).to have_text('Memory Usage (Total)')
       expect(page).to have_text('Core Usage (Total)')
+
+      # Ensure that the FE is calling the BE with expected params
+      expect(Prometheus::ProxyService)
+        .to have_received(:new)
+        .with(environment, 'GET', 'query_range', hash_including('start', 'end', 'step'))
+        .at_least(:once)
     end
 
     context 'when dashboard params are in included the url' do
@@ -61,6 +69,12 @@ describe 'Metrics rendering', :js, :use_clean_rails_memory_store_caching, :sidek
         expect(page).to have_css('div.prometheus-graph')
         expect(page).to have_text(chart_params[:title])
         expect(page).to have_text(chart_params[:y_label])
+
+        # Ensure that the FE is calling the BE with expected params
+        expect(Prometheus::ProxyService)
+          .to have_received(:new)
+          .with(environment, 'GET', 'query_range', hash_including('start', 'end', 'step'))
+          .at_least(:once)
       end
 
       context 'when two dashboard urls are included' do
@@ -83,6 +97,12 @@ describe 'Metrics rendering', :js, :use_clean_rails_memory_store_caching, :sidek
           expect(page).to have_text(chart_params[:y_label])
           expect(page).to have_text(chart_params_2[:title])
           expect(page).to have_text(chart_params_2[:y_label])
+
+          # Ensure that the FE is calling the BE with expected params
+          expect(Prometheus::ProxyService)
+            .to have_received(:new)
+            .with(environment, 'GET', 'query_range', hash_including('start', 'end', 'step'))
+            .at_least(:once)
         end
       end
     end
@@ -97,6 +117,8 @@ describe 'Metrics rendering', :js, :use_clean_rails_memory_store_caching, :sidek
       stub_dashboard_request(grafana_base_url)
       stub_datasource_request(grafana_base_url)
       stub_all_grafana_proxy_requests(grafana_base_url)
+
+      allow(Grafana::ProxyService).to receive(:new).and_call_original
     end
 
     it 'shows embedded metrics' do
@@ -105,6 +127,12 @@ describe 'Metrics rendering', :js, :use_clean_rails_memory_store_caching, :sidek
       expect(page).to have_css('div.prometheus-graph')
       expect(page).to have_text('Expired / Evicted')
       expect(page).to have_text('expired - test-attribute-value')
+
+      # Ensure that the FE is calling the BE with expected params
+      expect(Grafana::ProxyService)
+        .to have_received(:new)
+        .with(project, anything, anything, hash_including('query', 'start', 'end', 'step'))
+        .at_least(:once)
     end
   end
 
diff --git a/spec/fixtures/lib/gitlab/import_export/complex/project.json b/spec/fixtures/lib/gitlab/import_export/complex/project.json
index 97baf5cdd39..4bf72fe6912 100644
--- a/spec/fixtures/lib/gitlab/import_export/complex/project.json
+++ b/spec/fixtures/lib/gitlab/import_export/complex/project.json
@@ -2493,6 +2493,84 @@
       "merge_commit_sha": null,
       "notes": [
         {
+          "id": 669,
+          "note": "added 3 commits\n\n<ul><li>16ea4e20...074a2a32 - 2 commits from branch <code>master</code></li><li>ca223a02 - readme: fix typos</li></ul>\n\n[Compare with previous version](/group/project/merge_requests/1/diffs?diff_id=1189&start_sha=16ea4e207fb258fe4e9c73185a725207c9a4f3e1)",
+          "noteable_type": "MergeRequest",
+          "author_id": 26,
+          "created_at": "2020-03-28T12:47:33.461Z",
+          "updated_at": "2020-03-28T12:47:33.461Z",
+          "project_id": 5,
+          "attachment": {
+            "url": null
+          },
+          "line_code": null,
+          "commit_id": null,
+          "system": true,
+          "st_diff": null,
+          "updated_by_id": null,
+          "position": null,
+          "original_position": null,
+          "resolved_at": null,
+          "resolved_by_id": null,
+          "discussion_id": null,
+          "change_position": null,
+          "resolved_by_push": null,
+          "confidential": null,
+          "type": null,
+          "author": {
+            "name": "User 4"
+          },
+          "award_emoji": [],
+          "system_note_metadata": {
+            "id": 4789,
+            "commit_count": 3,
+            "action": "commit",
+            "created_at": "2020-03-28T12:47:33.461Z",
+            "updated_at": "2020-03-28T12:47:33.461Z"
+          },
+          "events": [],
+          "suggestions": []
+        },
+        {
+          "id": 670,
+          "note": "unmarked as a **Work In Progress**",
+          "noteable_type": "MergeRequest",
+          "author_id": 26,
+          "created_at": "2020-03-28T12:48:36.951Z",
+          "updated_at": "2020-03-28T12:48:36.951Z",
+          "project_id": 5,
+          "attachment": {
+            "url": null
+          },
+          "line_code": null,
+          "commit_id": null,
+          "system": true,
+          "st_diff": null,
+          "updated_by_id": null,
+          "position": null,
+          "original_position": null,
+          "resolved_at": null,
+          "resolved_by_id": null,
+          "discussion_id": null,
+          "change_position": null,
+          "resolved_by_push": null,
+          "confidential": null,
+          "type": null,
+          "author": {
+            "name": "User 4"
+          },
+          "award_emoji": [],
+          "system_note_metadata": {
+            "id": 4790,
+            "commit_count": null,
+            "action": "title",
+            "created_at": "2020-03-28T12:48:36.951Z",
+            "updated_at": "2020-03-28T12:48:36.951Z"
+          },
+          "events": [],
+          "suggestions": []
+        },
+        {
           "id": 671,
           "note": "Sit voluptatibus eveniet architecto quidem.",
           "note_html": "<p>something else entirely</p>",
diff --git a/spec/fixtures/lib/gitlab/import_export/light/project.json b/spec/fixtures/lib/gitlab/import_export/light/project.json
index ad0fc59326b..eaed8565a18 100644
--- a/spec/fixtures/lib/gitlab/import_export/light/project.json
+++ b/spec/fixtures/lib/gitlab/import_export/light/project.json
@@ -98,6 +98,46 @@
             "priorities": []
           }
         }
+      ],
+      "notes": [
+        {
+          "id": 20,
+          "note": "created merge request !1 to address this issue",
+          "noteable_type": "Issue",
+          "author_id": 1,
+          "created_at": "2020-03-28T01:37:42.307Z",
+          "updated_at": "2020-03-28T01:37:42.307Z",
+          "project_id": 8,
+          "attachment": {
+            "url": null
+          },
+          "line_code": null,
+          "commit_id": null,
+          "system": true,
+          "st_diff": null,
+          "updated_by_id": null,
+          "position": null,
+          "original_position": null,
+          "resolved_at": null,
+          "resolved_by_id": null,
+          "discussion_id": null,
+          "change_position": null,
+          "resolved_by_push": null,
+          "confidential": null,
+          "type": null,
+          "author": {
+            "name": "Author"
+          },
+          "award_emoji": [],
+          "system_note_metadata": {
+            "id": 21,
+            "commit_count": null,
+            "action": "merge",
+            "created_at": "2020-03-28T01:37:42.307Z",
+            "updated_at": "2020-03-28T01:37:42.307Z"
+          },
+          "events": []
+        }
       ]
     }
   ],
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);
     });
   });
 
diff --git a/spec/javascripts/jobs/components/manual_variables_form_spec.js b/spec/javascripts/jobs/components/manual_variables_form_spec.js
index 547f146cf88..82fd73ef033 100644
--- a/spec/javascripts/jobs/components/manual_variables_form_spec.js
+++ b/spec/javascripts/jobs/components/manual_variables_form_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import Form from '~/jobs/components/manual_variables_form.vue';
 
 const localVue = createLocalVue();
@@ -95,7 +95,7 @@ describe('Manual Variables Form', () => {
     });
 
     it('removes the variable row', () => {
-      wrapper.find(GlButton).vm.$emit('click');
+      wrapper.find(GlDeprecatedButton).vm.$emit('click');
 
       expect(wrapper.vm.variables.length).toBe(0);
     });
diff --git a/spec/lib/gitlab/github_import/parallel_importer_spec.rb b/spec/lib/gitlab/github_import/parallel_importer_spec.rb
index a9b7d3d388c..a8d5cc58bd5 100644
--- a/spec/lib/gitlab/github_import/parallel_importer_spec.rb
+++ b/spec/lib/gitlab/github_import/parallel_importer_spec.rb
@@ -27,7 +27,7 @@ describe Gitlab::GithubImport::ParallelImporter do
     end
 
     it 'sets the JID in Redis' do
-      expect(Gitlab::Import::SetAsyncJid).to receive(:set_jid).with(project).and_call_original
+      expect(Gitlab::Import::SetAsyncJid).to receive(:set_jid).with(project.import_state).and_call_original
 
       importer.execute
     end
diff --git a/spec/lib/gitlab/import/set_async_jid_spec.rb b/spec/lib/gitlab/import/set_async_jid_spec.rb
index 51397280138..f1ae23a4a6a 100644
--- a/spec/lib/gitlab/import/set_async_jid_spec.rb
+++ b/spec/lib/gitlab/import/set_async_jid_spec.rb
@@ -8,16 +8,16 @@ describe Gitlab::Import::SetAsyncJid do
     it 'sets the JID in Redis' do
       expect(Gitlab::SidekiqStatus)
         .to receive(:set)
-              .with("async-import/#{project.id}", StuckImportJobsWorker::IMPORT_JOBS_EXPIRATION)
+              .with("async-import/project-import-state/#{project.id}", StuckImportJobsWorker::IMPORT_JOBS_EXPIRATION)
               .and_call_original
 
-      described_class.set_jid(project)
+      described_class.set_jid(project.import_state)
     end
 
     it 'updates the import JID of the project' do
-      described_class.set_jid(project)
+      described_class.set_jid(project.import_state)
 
-      expect(project.import_state.reload.jid).to eq("async-import/#{project.id}")
+      expect(project.import_state.reload.jid).to eq("async-import/project-import-state/#{project.id}")
     end
   end
 end
diff --git a/spec/lib/gitlab/import_export/all_models.yml b/spec/lib/gitlab/import_export/all_models.yml
index 9abc8a5d88f..1579a6ce2df 100644
--- a/spec/lib/gitlab/import_export/all_models.yml
+++ b/spec/lib/gitlab/import_export/all_models.yml
@@ -38,6 +38,7 @@ issues:
 - vulnerability_links
 - related_vulnerabilities
 - user_mentions
+- system_note_metadata
 events:
 - author
 - project
@@ -152,6 +153,7 @@ merge_requests:
 - deployment_merge_requests
 - deployments
 - user_mentions
+- system_note_metadata
 external_pull_requests:
 - project
 merge_request_diff:
@@ -620,3 +622,6 @@ epic:
 epic_issue:
 - epic
 - issue
+system_note_metadata:
+- note
+- description_version
diff --git a/spec/lib/gitlab/import_export/project/tree_restorer_spec.rb b/spec/lib/gitlab/import_export/project/tree_restorer_spec.rb
index e7edbc7690d..247d455fecc 100644
--- a/spec/lib/gitlab/import_export/project/tree_restorer_spec.rb
+++ b/spec/lib/gitlab/import_export/project/tree_restorer_spec.rb
@@ -2,6 +2,10 @@
 
 require 'spec_helper'
 
+def match_mr1_note(content_regex)
+  MergeRequest.find_by(title: 'MR1').notes.select { |n| n.note.match(/#{content_regex}/)}.first
+end
+
 describe Gitlab::ImportExport::Project::TreeRestorer do
   include ImportExport::CommonUtil
 
@@ -74,10 +78,30 @@ describe Gitlab::ImportExport::Project::TreeRestorer do
         context 'for a Merge Request' do
           it 'does not import note_html' do
             note_content = 'Sit voluptatibus eveniet architecto quidem'
-            merge_request_note = MergeRequest.find_by(title: 'MR1').notes.select { |n| n.note.match(/#{note_content}/)}.first
+            merge_request_note = match_mr1_note(note_content)
 
             expect(merge_request_note.note_html).to match(/#{note_content}/)
           end
+
+          context 'merge request system note metadata' do
+            it 'restores title action for unmark wip' do
+              merge_request_note = match_mr1_note('unmarked as a \\*\\*Work In Progress\\*\\*')
+
+              expect(merge_request_note.noteable_type).to eq('MergeRequest')
+              expect(merge_request_note.system).to eq(true)
+              expect(merge_request_note.system_note_metadata.action).to eq('title')
+              expect(merge_request_note.system_note_metadata.commit_count).to be_nil
+            end
+
+            it 'restores commit action and commit count for pushing 3 commits' do
+              merge_request_note = match_mr1_note('added 3 commits')
+
+              expect(merge_request_note.noteable_type).to eq('MergeRequest')
+              expect(merge_request_note.system).to eq(true)
+              expect(merge_request_note.system_note_metadata.action).to eq('commit')
+              expect(merge_request_note.system_note_metadata.commit_count).to eq(3)
+            end
+          end
         end
       end
 
@@ -373,7 +397,8 @@ describe Gitlab::ImportExport::Project::TreeRestorer do
 
         context 'notes' do
           it 'has award emoji' do
-            award_emoji = MergeRequest.find_by_title('MR1').notes.first.award_emoji.first
+            merge_request_note = match_mr1_note('Sit voluptatibus eveniet architecto quidem')
+            award_emoji = merge_request_note.award_emoji.first
 
             expect(award_emoji.name).to eq('tada')
           end
@@ -507,6 +532,16 @@ describe Gitlab::ImportExport::Project::TreeRestorer do
                       first_issue_labels: 1,
                       services: 1
 
+      it 'issue system note metadata restored successfully' do
+        note_content = 'created merge request !1 to address this issue'
+        note = project.issues.first.notes.select { |n| n.note.match(/#{note_content}/)}.first
+
+        expect(note.noteable_type).to eq('Issue')
+        expect(note.system).to eq(true)
+        expect(note.system_note_metadata.action).to eq('merge')
+        expect(note.system_note_metadata.commit_count).to be_nil
+      end
+
       context 'when there is an existing build with build token' do
         before do
           create(:ci_build, token: 'abcd')
diff --git a/spec/lib/gitlab/import_export/project/tree_saver_spec.rb b/spec/lib/gitlab/import_export/project/tree_saver_spec.rb
index 23360b725b9..c910ee5430b 100644
--- a/spec/lib/gitlab/import_export/project/tree_saver_spec.rb
+++ b/spec/lib/gitlab/import_export/project/tree_saver_spec.rb
@@ -113,6 +113,12 @@ describe Gitlab::ImportExport::Project::TreeSaver do
         expect(saved_project_json['issues'].first['notes'].first['author']).not_to be_empty
       end
 
+      it 'has system note metadata on issue comments' do
+        metadata = saved_project_json['issues'].first['notes'].first['system_note_metadata']
+
+        expect(metadata['action']).to eq('description')
+      end
+
       it 'has project members' do
         expect(saved_project_json['project_members']).not_to be_empty
       end
@@ -137,6 +143,13 @@ describe Gitlab::ImportExport::Project::TreeSaver do
         expect(saved_project_json['merge_requests'].first['notes'].first['author']).not_to be_empty
       end
 
+      it 'has system note metadata on merge requests comments' do
+        metadata = saved_project_json['merge_requests'].first['notes'].first['system_note_metadata']
+
+        expect(metadata['commit_count']).to eq(1)
+        expect(metadata['action']).to eq('commit')
+      end
+
       it 'has pipeline stages' do
         expect(saved_project_json.dig('ci_pipelines', 0, 'stages')).not_to be_empty
       end
@@ -314,14 +327,17 @@ describe Gitlab::ImportExport::Project::TreeSaver do
     create(:commit_status, project: project, pipeline: ci_build.pipeline)
 
     create(:milestone, project: project)
-    create(:discussion_note, noteable: issue, project: project)
-    create(:note, noteable: merge_request, project: project)
+    discussion_note = create(:discussion_note, noteable: issue, project: project)
+    mr_note = create(:note, noteable: merge_request, project: project)
     create(:note, noteable: snippet, project: project)
     create(:note_on_commit,
            author: user,
            project: project,
            commit_id: ci_build.pipeline.sha)
 
+    create(:system_note_metadata, action: 'description', note: discussion_note)
+    create(:system_note_metadata, commit_count: 1, action: 'commit', note: mr_note)
+
     create(:resource_label_event, label: project_label, issue: issue)
     create(:resource_label_event, label: group_label, merge_request: merge_request)
 
diff --git a/spec/lib/gitlab/import_export/safe_model_attributes.yml b/spec/lib/gitlab/import_export/safe_model_attributes.yml
index 533458afd73..7190d84573e 100644
--- a/spec/lib/gitlab/import_export/safe_model_attributes.yml
+++ b/spec/lib/gitlab/import_export/safe_model_attributes.yml
@@ -848,3 +848,9 @@ Epic:
 EpicIssue:
   - id
   - relative_position
+SystemNoteMetadata:
+  - id
+  - commit_count
+  - action
+  - created_at
+  - updated_at
diff --git a/spec/models/project_services/chat_message/pipeline_message_spec.rb b/spec/models/project_services/chat_message/pipeline_message_spec.rb
index 366ef01924e..4210b52a8b9 100644
--- a/spec/models/project_services/chat_message/pipeline_message_spec.rb
+++ b/spec/models/project_services/chat_message/pipeline_message_spec.rb
@@ -447,14 +447,6 @@ describe ChatMessage::PipelineMessage do
       end
     end
 
-    it "returns the stage name and link as the attachment's second field property" do
-      expect(subject.attachments.first[:fields][1]).to eq({
-        title: "Commit",
-        value: "<http://example.com/commit|A test commit message>",
-        short: true
-      })
-    end
-
     it "returns the project's name as the attachment's footer property" do
       expect(subject.attachments.first[:footer]).to eq("project_name")
     end