Commit 0c6bafc2 authored by Taurie Davis's avatar Taurie Davis

Migrate loading buttons in pipeline header

Migrates to GlButton and fixes tests to use data-testid
parent 1d704420
<script>
import { GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
import { GlLoadingIcon, GlModal, GlModalDirective, GlButton } from '@gitlab/ui';
import ciHeader from '~/vue_shared/components/header_ci_component.vue';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
import eventHub from '../event_hub';
import { __ } from '~/locale';
......@@ -13,7 +12,7 @@ export default {
ciHeader,
GlLoadingIcon,
GlModal,
LoadingButton,
GlButton,
},
directives: {
GlModal: GlModalDirective,
......@@ -77,35 +76,43 @@ export default {
:user="pipeline.user"
item-name="Pipeline"
>
<loading-button
<gl-button
v-if="pipeline.retry_path"
:loading="isRetrying"
:disabled="isRetrying"
class="js-retry-button btn btn-inverted-secondary"
container-class="d-inline"
:label="__('Retry')"
data-testid="retryButton"
category="secondary"
variant="info"
@click="retryPipeline()"
/>
>
{{ __('Retry') }}
</gl-button>
<loading-button
<gl-button
v-if="pipeline.cancel_path"
:loading="isCanceling"
:disabled="isCanceling"
class="js-btn-cancel-pipeline btn btn-danger"
container-class="d-inline"
:label="__('Cancel running')"
data-testid="cancelPipeline"
class="gl-ml-3"
category="primary"
variant="danger"
@click="cancelPipeline()"
/>
>
{{ __('Cancel running') }}
</gl-button>
<loading-button
<gl-button
v-if="pipeline.delete_path"
v-gl-modal="$options.DELETE_MODAL_ID"
:loading="isDeleting"
:disabled="isDeleting"
class="js-btn-delete-pipeline btn btn-danger btn-inverted"
container-class="d-inline"
:label="__('Delete')"
/>
data-testid="deletePipeline"
class="gl-ml-3"
category="secondary"
variant="danger"
>
{{ __('Delete') }}
</gl-button>
</ci-header>
<gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3 gl-mb-3" />
......
......@@ -105,7 +105,7 @@ export default {
</template>
</section>
<section v-if="$slots.default" class="header-action-buttons">
<section v-if="$slots.default" data-testid="headerButtons" class="gl-display-flex">
<slot></slot>
</section>
<gl-deprecated-button
......
......@@ -1052,13 +1052,6 @@ button.mini-pipeline-graph-dropdown-toggle {
.text-center {
padding-top: 12px;
}
.header-action-buttons {
.btn,
a {
margin-left: 10px;
}
}
}
.pipelines-container .top-area .nav-controls > .btn:last-child {
......
......@@ -112,7 +112,7 @@ RSpec.describe 'Commits' do
describe 'Cancel build' do
it 'cancels build', :js, :sidekiq_might_not_need_inline do
visit pipeline_path(pipeline)
find('.js-btn-cancel-pipeline').click
find('[data-testid="cancelPipeline"]').click
expect(page).to have_content 'canceled'
end
end
......
......@@ -436,7 +436,7 @@ RSpec.describe 'Pipeline', :js do
context 'when retrying' do
before do
find('.js-retry-button').click
find('[data-testid="retryButton"]').click
end
it 'does not show a "Retry" button', :sidekiq_might_not_need_inline do
......@@ -938,7 +938,7 @@ RSpec.describe 'Pipeline', :js do
context 'when retrying' do
before do
find('.js-retry-button').click
find('[data-testid="retryButton"]').click
end
it 'does not show a "Retry" button', :sidekiq_might_not_need_inline do
......
......@@ -85,13 +85,13 @@ describe('Pipeline details header', () => {
});
it('should call postAction when retry button action is clicked', () => {
wrapper.find('.js-retry-button').vm.$emit('click');
wrapper.find('[data-testid="retryButton"]').vm.$emit('click');
expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'retry');
});
it('should call postAction when cancel button action is clicked', () => {
wrapper.find('.js-btn-cancel-pipeline').vm.$emit('click');
wrapper.find('[data-testid="cancelPipeline"]').vm.$emit('click');
expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'cancel');
});
......
......@@ -35,7 +35,7 @@ describe('Header CI Component', () => {
vm.$destroy();
});
const findActionButtons = () => vm.$el.querySelector('.header-action-buttons');
const findActionButtons = () => vm.$el.querySelector('[data-testid="headerButtons"]');
describe('render', () => {
beforeEach(() => {
......
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