diff options
author | mfluharty <mfluharty@gitlab.com> | 2019-02-13 00:55:28 +0300 |
---|---|---|
committer | mfluharty <mfluharty@gitlab.com> | 2019-03-07 11:16:53 +0300 |
commit | ee5cceaaf82e8b206bdddcf59eef1739ec5769bb (patch) | |
tree | ac272258d497a3c63a7d0b02e07c477841c64e4c /app/assets | |
parent | eaa392d9ee9179b55675018c3e9eefbbc7312b54 (diff) |
Add information to "Stop pipeline" confirm modal
Make it its own component
Show pipeline status and link to pipeline
Show commit short hash, link, and message
Diffstat (limited to 'app/assets')
3 files changed, 103 insertions, 35 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..d4fa556f095 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue @@ -0,0 +1,96 @@ +<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, + }, + onSubmit: { + type: Function, + required: 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); + }, + }, +}; +</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="onSubmit" + > + <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..9d837ddf646 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" :on-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, }); }, |