diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-02-22 09:21:05 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-02-22 09:21:05 +0000 |
commit | 914533128e37420f7c86476d967102abf9ef7796 (patch) | |
tree | 7793eb5d1ba9d6af7ebaef3cd356170368fa63cb | |
parent | 15196f926915e754d169ba814d71fcc1e27e35c6 (diff) | |
parent | ad860cc0efc2d513017ca9b491b2ba68874e1fe9 (diff) | |
download | gitlab-ce-914533128e37420f7c86476d967102abf9ef7796.tar.gz |
Merge branch '42886-followup-to-new-design-for-cancel-stop-pipeline-confirmation' into 'master'
Resolve "Followup to New design for cancel/stop pipeline confirmation"
Closes #42886
See merge request gitlab-org/gitlab-ce!17106
6 files changed, 100 insertions, 152 deletions
diff --git a/app/assets/javascripts/pipelines/components/async_button.vue b/app/assets/javascripts/pipelines/components/async_button.vue index a5f22c4ec80..0cdffbde05b 100644 --- a/app/assets/javascripts/pipelines/components/async_button.vue +++ b/app/assets/javascripts/pipelines/components/async_button.vue @@ -31,10 +31,14 @@ type: String, required: true, }, - id: { + pipelineId: { type: Number, required: true, }, + type: { + type: String, + required: true, + }, }, data() { return { @@ -46,17 +50,27 @@ return `btn ${this.cssClass}`; }, }, + created() { + // We're using eventHub to listen to the modal here instead of + // using props because it would would make the parent components + // much more complex to keep track of the loading state of each button + eventHub.$on('postAction', this.setLoading); + }, + beforeDestroy() { + eventHub.$off('postAction', this.setLoading); + }, methods: { onClick() { - eventHub.$emit('actionConfirmationModal', { - id: this.id, - callback: this.makeRequest, + eventHub.$emit('openConfirmationModal', { + pipelineId: this.pipelineId, + endpoint: this.endpoint, + type: this.type, }); }, - makeRequest() { - this.isLoading = true; - - eventHub.$emit('postAction', this.endpoint); + setLoading(endpoint) { + if (endpoint === this.endpoint) { + this.isLoading = true; + } }, }, }; diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue index 62fe479fdf4..c9028952ddd 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue @@ -1,7 +1,8 @@ <script> + import modal from '~/vue_shared/components/modal.vue'; + import { s__, sprintf } from '~/locale'; import pipelinesTableRowComponent from './pipelines_table_row.vue'; - import stopConfirmationModal from './stop_confirmation_modal.vue'; - import retryConfirmationModal from './retry_confirmation_modal.vue'; + import eventHub from '../event_hub'; /** * Pipelines Table Component. @@ -11,8 +12,7 @@ export default { components: { pipelinesTableRowComponent, - stopConfirmationModal, - retryConfirmationModal, + modal, }, props: { pipelines: { @@ -33,6 +33,52 @@ required: true, }, }, + data() { + return { + pipelineId: '', + endpoint: '', + type: '', + }; + }, + computed: { + modalTitle() { + return this.type === 'stop' ? + sprintf(s__('Pipeline|Stop pipeline #%{pipelineId}?'), { + pipelineId: `'${this.pipelineId}'`, + }, false) : + sprintf(s__('Pipeline|Retry pipeline #%{pipelineId}?'), { + pipelineId: `'${this.pipelineId}'`, + }, false); + }, + modalText() { + return this.type === 'stop' ? + sprintf(s__('Pipeline|You’re about to stop pipeline %{pipelineId}.'), { + pipelineId: `<strong>#${this.pipelineId}</strong>`, + }, false) : + sprintf(s__('Pipeline|You’re about to retry pipeline %{pipelineId}.'), { + pipelineId: `<strong>#${this.pipelineId}</strong>`, + }, false); + }, + primaryButtonLabel() { + return this.type === 'stop' ? s__('Pipeline|Stop pipeline') : s__('Pipeline|Retry pipeline'); + }, + }, + created() { + eventHub.$on('openConfirmationModal', this.setModalData); + }, + beforeDestroy() { + eventHub.$off('openConfirmationModal', this.setModalData); + }, + methods: { + setModalData(data) { + this.pipelineId = data.pipelineId; + this.endpoint = data.endpoint; + this.type = data.type; + }, + onSubmit() { + eventHub.$emit('postAction', this.endpoint); + }, + }, }; </script> <template> @@ -74,7 +120,20 @@ :auto-devops-help-path="autoDevopsHelpPath" :view-type="viewType" /> - <stop-confirmation-modal /> - <retry-confirmation-modal /> + <modal + id="confirmation-modal" + :title="modalTitle" + :text="modalText" + kind="danger" + :primary-button-label="primaryButtonLabel" + @submit="onSubmit" + > + <template + slot="body" + slot-scope="props" + > + <p v-html="props.text"></p> + </template> + </modal> </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 0e3a10ed7f4..33d441e573e 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue @@ -305,9 +305,10 @@ css-class="js-pipelines-retry-button btn-default btn-retry" title="Retry" icon="repeat" - :id="pipeline.id" + :pipeline-id="pipeline.id" data-toggle="modal" - data-target="#retry-confirmation-modal" + data-target="#confirmation-modal" + type="retry" /> <async-button-component @@ -316,9 +317,10 @@ css-class="js-pipelines-cancel-button btn-remove" title="Cancel" icon="close" - :id="pipeline.id" + :pipeline-id="pipeline.id" data-toggle="modal" - data-target="#stop-confirmation-modal" + data-target="#confirmation-modal" + type="stop" /> </div> </div> diff --git a/app/assets/javascripts/pipelines/components/retry_confirmation_modal.vue b/app/assets/javascripts/pipelines/components/retry_confirmation_modal.vue deleted file mode 100644 index e2ac08d67bc..00000000000 --- a/app/assets/javascripts/pipelines/components/retry_confirmation_modal.vue +++ /dev/null @@ -1,65 +0,0 @@ -<script> - import modal from '~/vue_shared/components/modal.vue'; - import { s__, sprintf } from '~/locale'; - import eventHub from '../event_hub'; - - export default { - components: { - modal, - }, - data() { - return { - id: '', - callback: () => {}, - }; - }, - computed: { - title() { - return sprintf(s__('Pipeline|Retry pipeline #%{id}?'), { - id: `'${this.id}'`, - }, false); - }, - text() { - return sprintf(s__('Pipeline|You’re about to retry pipeline %{id}.'), { - id: `<strong>#${this.id}</strong>`, - }, false); - }, - primaryButtonLabel() { - return s__('Pipeline|Retry pipeline'); - }, - }, - created() { - eventHub.$on('actionConfirmationModal', this.updateModal); - }, - beforeDestroy() { - eventHub.$off('actionConfirmationModal', this.updateModal); - }, - methods: { - updateModal(action) { - this.id = action.id; - this.callback = action.callback; - }, - onSubmit() { - this.callback(); - }, - }, - }; -</script> - -<template> - <modal - id="retry-confirmation-modal" - :title="title" - :text="text" - kind="danger" - :primary-button-label="primaryButtonLabel" - @submit="onSubmit" - > - <template - slot="body" - slot-scope="props" - > - <p v-html="props.text"></p> - </template> - </modal> -</template> diff --git a/app/assets/javascripts/pipelines/components/stop_confirmation_modal.vue b/app/assets/javascripts/pipelines/components/stop_confirmation_modal.vue deleted file mode 100644 index d737d567787..00000000000 --- a/app/assets/javascripts/pipelines/components/stop_confirmation_modal.vue +++ /dev/null @@ -1,65 +0,0 @@ -<script> - import modal from '~/vue_shared/components/modal.vue'; - import { s__, sprintf } from '~/locale'; - import eventHub from '../event_hub'; - - export default { - components: { - modal, - }, - data() { - return { - id: '', - callback: () => {}, - }; - }, - computed: { - title() { - return sprintf(s__('Pipeline|Stop pipeline #%{id}?'), { - id: `'${this.id}'`, - }, false); - }, - text() { - return sprintf(s__('Pipeline|You’re about to stop pipeline %{id}.'), { - id: `<strong>#${this.id}</strong>`, - }, false); - }, - primaryButtonLabel() { - return s__('Pipeline|Stop pipeline'); - }, - }, - created() { - eventHub.$on('actionConfirmationModal', this.updateModal); - }, - beforeDestroy() { - eventHub.$off('actionConfirmationModal', this.updateModal); - }, - methods: { - updateModal(action) { - this.id = action.id; - this.callback = action.callback; - }, - onSubmit() { - this.callback(); - }, - }, - }; -</script> - -<template> - <modal - id="stop-confirmation-modal" - :title="title" - :text="text" - kind="danger" - :primary-button-label="primaryButtonLabel" - @submit="onSubmit" - > - <template - slot="body" - slot-scope="props" - > - <p v-html="props.text"></p> - </template> - </modal> -</template> diff --git a/spec/javascripts/pipelines/async_button_spec.js b/spec/javascripts/pipelines/async_button_spec.js index 8ce33d410a7..e0ea3649646 100644 --- a/spec/javascripts/pipelines/async_button_spec.js +++ b/spec/javascripts/pipelines/async_button_spec.js @@ -15,7 +15,8 @@ describe('Pipelines Async Button', () => { title: 'Foo', icon: 'repeat', cssClass: 'bar', - id: 123, + pipelineId: 123, + type: 'explode', }, }).$mount(); }); @@ -39,8 +40,9 @@ describe('Pipelines Async Button', () => { describe('With confirm dialog', () => { it('should call the service when confimation is positive', () => { - eventHub.$on('actionConfirmationModal', (data) => { - expect(data.id).toEqual(123); + eventHub.$on('openConfirmationModal', (data) => { + expect(data.pipelineId).toEqual(123); + expect(data.type).toEqual('explode'); }); component = new AsyncButtonComponent({ @@ -49,7 +51,8 @@ describe('Pipelines Async Button', () => { title: 'Foo', icon: 'fa fa-foo', cssClass: 'bar', - id: 123, + pipelineId: 123, + type: 'explode', }, }).$mount(); |