Commit c53dc88d authored by Nadia Sotnikova's avatar Nadia Sotnikova Committed by Kushal Pandya

Replace loading button with GlButton in Error Tracking form

parent c6478b70
<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"
......
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');
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment