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