Commit 278fb457 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '46464-improve-stop-pipeline-modal' into 'master'

Resolve "Improve stop pipeline modal"

Closes #46464

See merge request gitlab-org/gitlab-ce!25059
parents af6b9b42 a7a33c21
<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>
<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>
......@@ -243,7 +243,7 @@ export default {
methods: {
handleCancelClick() {
eventHub.$emit('openConfirmationModal', {
pipelineId: this.pipeline.id,
pipeline: this.pipeline,
endpoint: this.pipeline.cancel_path,
});
},
......
---
title: Show pipeline ID, commit, and branch name on modal while stopping pipeline
merge_request: 25059
author:
type: changed
......@@ -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();
......
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