Merge branch 'mjang-migrate-self-monitor-form-button' into 'master'

Migrate self monitor form button

Closes #219807

See merge request gitlab-org/gitlab!43316

app/assets/javascripts/self_monitor/components/self_monitor_form.vue

 <script>
 /* eslint-disable vue/no-v-html */
 import Vue from 'vue';
-import { GlFormGroup, GlDeprecatedButton, GlModal, GlToast, GlToggle } from '@gitlab/ui';
+import { GlFormGroup, GlButton, GlModal, GlToast, GlToggle } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { __, s__, sprintf } from '~/locale';
 import { visitUrl, getBaseURL } from '~/lib/utils/url_utility';
@@ -11,7 +11,7 @@ Vue.use(GlToast);
 export default {
   components: {
     GlFormGroup,
-    GlDeprecatedButton,
+    GlButton,
     GlModal,
     GlToggle,
   },
@@ -123,7 +123,7 @@ export default {
       <h4 class="js-section-header">
         {{ s__('SelfMonitoring|Self monitoring') }}
       </h4>
-      <gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button>
+      <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
       <p class="js-section-sub-header">
         {{ s__('SelfMonitoring|Enable or disable instance self monitoring') }}
       </p>
@@ -146,6 +146,7 @@ export default {
       :ok-title="__('Delete project')"
       :cancel-title="__('Cancel')"
       ok-variant="danger"
+      category="primary"
       @ok="deleteProject"
       @cancel="hideSelfMonitorModal"
     >

spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap

@@ -15,13 +15,16 @@ exports[`self monitor component When the self monitor project has not been creat
     
     </h4>
      
-    <gl-deprecated-button-stub
+    <gl-button-stub
+      buttontextclasses=""
+      category="primary"
       class="js-settings-toggle"
-      size="md"
-      variant="secondary"
+      icon=""
+      size="medium"
+      variant="default"
     >
       Expand
-    </gl-deprecated-button-stub>
+    </gl-button-stub>
      
     <p
       class="js-section-sub-header"
@@ -56,6 +59,7 @@ exports[`self monitor component When the self monitor project has not been creat
    
   <gl-modal-stub
     cancel-title="Cancel"
+    category="primary"
     modalclass=""
     modalid="delete-self-monitor-modal"
     ok-title="Delete project"

spec/frontend/self_monitor/components/self_monitor_form_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import SelfMonitor from '~/self_monitor/components/self_monitor_form.vue';
 import { createStore } from '~/self_monitor/store';
@@ -42,7 +42,7 @@ describe('self monitor component', () => {
       it('renders as an expand button by default', () => {
         wrapper = shallowMount(SelfMonitor, { store });
 
-        const button = wrapper.find(GlDeprecatedButton);
+        const button = wrapper.find(GlButton);
 
         expect(button.text()).toBe('Expand');
       });