diff options
5 files changed, 112 insertions, 36 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue b/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue new file mode 100644 index 00000000000..4cafd147511 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue @@ -0,0 +1,97 @@ +<script> +import _ from 'underscore'; +import GlModal from '~/vue_shared/components/gl_modal.vue'; +import { GlLink } from '@gitlab/ui'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import CiIcon from '~/vue_shared/components/ci_icon.vue'; +import { s__, sprintf } from '~/locale'; + +/** + * Pipeline Stop Modal. + * + * Renders the modal used to confirm stopping a pipeline. + */ +export default { + components: { + GlModal, + GlLink, + ClipboardButton, + CiIcon, + }, + props: { + pipeline: { + type: Object, + required: true, + deep: true, + }, + }, + computed: { + modalTitle() { + return sprintf( + s__('Pipeline|Stop pipeline #%{pipelineId}?'), + { + pipelineId: `${this.pipeline.id}`, + }, + false, + ); + }, + modalText() { + return sprintf( + s__(`Pipeline|You’re about to stop pipeline %{pipelineId}.`), + { + pipelineId: `<strong>#${this.pipeline.id}</strong>`, + }, + false, + ); + }, + hasRef() { + return !_.isEmpty(this.pipeline.ref); + }, + }, + methods: { + emitSubmit(event) { + this.$emit('submit', event); + }, + }, +}; +</script> +<template> + <gl-modal + id="confirmation-modal" + :header-title-text="modalTitle" + :footer-primary-button-text="s__('Pipeline|Stop pipeline')" + footer-primary-button-variant="danger" + @submit="emitSubmit($event)" + > + <p v-html="modalText"></p> + + <p v-if="pipeline"> + <ci-icon + v-if="pipeline.details" + :status="pipeline.details.status" + class="vertical-align-middle" + /> + + <span class="font-weight-bold">{{ __('Pipeline') }}</span> + + <a :href="pipeline.path" class="js-pipeline-path link-commit qa-pipeline-path" + >#{{ pipeline.id }}</a + > + <template v-if="hasRef"> + {{ __('from') }} + <a :href="pipeline.ref.path" class="link-commit ref-name">{{ pipeline.ref.name }}</a> + </template> + </p> + + <template v-if="pipeline.commit"> + <p> + <span class="font-weight-bold">{{ __('Commit') }}</span> + + <gl-link :href="pipeline.commit.commit_path" class="js-commit-sha commit-sha link-commit"> + {{ pipeline.commit.short_id }} + </gl-link> + </p> + <p>{{ pipeline.commit.title }}</p> + </template> + </gl-modal> +</template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue index 1c60ae6a152..fcd1f119df0 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue @@ -1,7 +1,6 @@ <script> -import Modal from '~/vue_shared/components/gl_modal.vue'; -import { s__, sprintf } from '~/locale'; import PipelinesTableRowComponent from './pipelines_table_row.vue'; +import PipelineStopModal from './pipeline_stop_modal.vue'; import eventHub from '../event_hub'; /** @@ -12,7 +11,7 @@ import eventHub from '../event_hub'; export default { components: { PipelinesTableRowComponent, - Modal, + PipelineStopModal, }, props: { pipelines: { @@ -36,30 +35,11 @@ export default { data() { return { pipelineId: 0, + pipeline: {}, endpoint: '', cancelingPipeline: null, }; }, - computed: { - modalTitle() { - return sprintf( - s__('Pipeline|Stop pipeline #%{pipelineId}?'), - { - pipelineId: `${this.pipelineId}`, - }, - false, - ); - }, - modalText() { - return sprintf( - s__('Pipeline|You’re about to stop pipeline %{pipelineId}.'), - { - pipelineId: `<strong>#${this.pipelineId}</strong>`, - }, - false, - ); - }, - }, created() { eventHub.$on('openConfirmationModal', this.setModalData); }, @@ -68,7 +48,8 @@ export default { }, methods: { setModalData(data) { - this.pipelineId = data.pipelineId; + this.pipelineId = data.pipeline.id; + this.pipeline = data.pipeline; this.endpoint = data.endpoint; }, onSubmit() { @@ -103,15 +84,6 @@ export default { :view-type="viewType" :canceling-pipeline="cancelingPipeline" /> - - <modal - id="confirmation-modal" - :header-title-text="modalTitle" - :footer-primary-button-text="s__('Pipeline|Stop pipeline')" - footer-primary-button-variant="danger" - @submit="onSubmit" - > - <span v-html="modalText"></span> - </modal> + <pipeline-stop-modal :pipeline="pipeline" @submit="onSubmit" /> </div> </template> diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue index da42698c255..f6454a84ea5 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue @@ -243,7 +243,7 @@ export default { methods: { handleCancelClick() { eventHub.$emit('openConfirmationModal', { - pipelineId: this.pipeline.id, + pipeline: this.pipeline, endpoint: this.pipeline.cancel_path, }); }, diff --git a/changelogs/unreleased/46464-improve-stop-pipeline-modal.yml b/changelogs/unreleased/46464-improve-stop-pipeline-modal.yml new file mode 100644 index 00000000000..541acdc56a7 --- /dev/null +++ b/changelogs/unreleased/46464-improve-stop-pipeline-modal.yml @@ -0,0 +1,5 @@ +--- +title: Show pipeline ID, commit, and branch name on modal while stopping pipeline +merge_request: 25059 +author: +type: changed diff --git a/spec/javascripts/pipelines/pipelines_table_row_spec.js b/spec/javascripts/pipelines/pipelines_table_row_spec.js index 4c575536f0e..234fc705a81 100644 --- a/spec/javascripts/pipelines/pipelines_table_row_spec.js +++ b/spec/javascripts/pipelines/pipelines_table_row_spec.js @@ -195,8 +195,10 @@ describe('Pipelines Table Row', () => { it('emits `openConfirmationModal` event when cancel button is clicked and toggles loading', () => { eventHub.$once('openConfirmationModal', data => { + const { id, ref, commit } = pipeline; + expect(data.endpoint).toEqual('/cancel'); - expect(data.pipelineId).toEqual(pipeline.id); + expect(data.pipeline).toEqual(jasmine.objectContaining({ id, ref, commit })); }); component.$el.querySelector('.js-pipelines-cancel-button').click(); |