Merge branch '229213-replace-loading-button-error-tracking-form' into 'master'

Replace loading button with GlButton in Error Tracking form

Closes #229213

See merge request gitlab-org/gitlab!42077

app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlFormInput, GlIcon } from '@gitlab/ui';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlFormInput, GlIcon, GlButton } from '@gitlab/ui';
 
 export default {
-  components: { GlFormInput, GlIcon, LoadingButton },
+  components: { GlFormInput, GlIcon, GlButton },
   computed: {
     ...mapState(['apiHost', 'connectError', 'connectSuccessful', 'isLoadingProjects', 'token']),
     tokenInputState() {
@@ -57,12 +56,16 @@ export default {
           />
         </div>
         <div class="col-4 col-md-3 gl-pl-0">
-          <loading-button
+          <gl-button
             class="js-error-tracking-connect gl-ml-2 d-inline-flex"
-            :label="isLoadingProjects ? __('Connecting') : __('Connect')"
+            category="secondary"
+            variant="default"
             :loading="isLoadingProjects"
             @click="fetchProjects"
-          />
+          >
+            {{ isLoadingProjects ? __('Connecting') : __('Connect') }}
+          </gl-button>
+
           <gl-icon
             v-show="connectSuccessful"
             class="js-error-tracking-connect-success gl-ml-2 text-success align-middle"

spec/frontend/error_tracking_settings/components/error_tracking_form_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { GlFormInput } from '@gitlab/ui';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlFormInput, GlButton } from '@gitlab/ui';
 import ErrorTrackingForm from '~/error_tracking_settings/components/error_tracking_form.vue';
 import createStore from '~/error_tracking_settings/store';
 import { defaultProps } from '../mock';
@@ -43,7 +42,7 @@ describe('error tracking settings form', () => {
           .attributes('id'),
       ).toBe('error-tracking-token');
 
-      expect(wrapper.findAll(LoadingButton).exists()).toBe(true);
+      expect(wrapper.findAll(GlButton).exists()).toBe(true);
     });
 
     it('is rendered with labels and placeholders', () => {
@@ -72,9 +71,10 @@ describe('error tracking settings form', () => {
     });
 
     it('shows loading spinner', () => {
-      const { label, loading } = wrapper.find(LoadingButton).props();
-      expect(loading).toBe(true);
-      expect(label).toBe('Connecting');
+      const buttonEl = wrapper.find(GlButton);
+
+      expect(buttonEl.props('loading')).toBe(true);
+      expect(buttonEl.text()).toBe('Connecting');
     });
   });