Remove use of callback in pipeline stop/retry modals
Make changes to names of events and variables Combine stop and retry modals into 1 Fix lint issues Add comment about usage of eventHub instead of props
This commit is contained in:
parent
46d59a5d24
commit
e887e85871
|
@ -31,10 +31,14 @@
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
id: {
|
pipelineId: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -46,17 +50,27 @@
|
||||||
return `btn ${this.cssClass}`;
|
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: {
|
methods: {
|
||||||
onClick() {
|
onClick() {
|
||||||
eventHub.$emit('actionConfirmationModal', {
|
eventHub.$emit('openConfirmationModal', {
|
||||||
id: this.id,
|
pipelineId: this.pipelineId,
|
||||||
callback: this.makeRequest,
|
endpoint: this.endpoint,
|
||||||
|
type: this.type,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
makeRequest() {
|
setLoading(endpoint) {
|
||||||
this.isLoading = true;
|
if (endpoint === this.endpoint) {
|
||||||
|
this.isLoading = true;
|
||||||
eventHub.$emit('postAction', this.endpoint);
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
|
import modal from '~/vue_shared/components/modal.vue';
|
||||||
|
import { s__, sprintf } from '~/locale';
|
||||||
import pipelinesTableRowComponent from './pipelines_table_row.vue';
|
import pipelinesTableRowComponent from './pipelines_table_row.vue';
|
||||||
import stopConfirmationModal from './stop_confirmation_modal.vue';
|
import eventHub from '../event_hub';
|
||||||
import retryConfirmationModal from './retry_confirmation_modal.vue';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Pipelines Table Component.
|
* Pipelines Table Component.
|
||||||
|
@ -11,8 +12,7 @@
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
pipelinesTableRowComponent,
|
pipelinesTableRowComponent,
|
||||||
stopConfirmationModal,
|
modal,
|
||||||
retryConfirmationModal,
|
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
pipelines: {
|
pipelines: {
|
||||||
|
@ -33,6 +33,52 @@
|
||||||
required: true,
|
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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
@ -74,7 +120,20 @@
|
||||||
:auto-devops-help-path="autoDevopsHelpPath"
|
:auto-devops-help-path="autoDevopsHelpPath"
|
||||||
:view-type="viewType"
|
:view-type="viewType"
|
||||||
/>
|
/>
|
||||||
<stop-confirmation-modal />
|
<modal
|
||||||
<retry-confirmation-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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -305,9 +305,10 @@
|
||||||
css-class="js-pipelines-retry-button btn-default btn-retry"
|
css-class="js-pipelines-retry-button btn-default btn-retry"
|
||||||
title="Retry"
|
title="Retry"
|
||||||
icon="repeat"
|
icon="repeat"
|
||||||
:id="pipeline.id"
|
:pipeline-id="pipeline.id"
|
||||||
data-toggle="modal"
|
data-toggle="modal"
|
||||||
data-target="#retry-confirmation-modal"
|
data-target="#confirmation-modal"
|
||||||
|
type="retry"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<async-button-component
|
<async-button-component
|
||||||
|
@ -316,9 +317,10 @@
|
||||||
css-class="js-pipelines-cancel-button btn-remove"
|
css-class="js-pipelines-cancel-button btn-remove"
|
||||||
title="Cancel"
|
title="Cancel"
|
||||||
icon="close"
|
icon="close"
|
||||||
:id="pipeline.id"
|
:pipeline-id="pipeline.id"
|
||||||
data-toggle="modal"
|
data-toggle="modal"
|
||||||
data-target="#stop-confirmation-modal"
|
data-target="#confirmation-modal"
|
||||||
|
type="stop"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
|
|
@ -15,7 +15,8 @@ describe('Pipelines Async Button', () => {
|
||||||
title: 'Foo',
|
title: 'Foo',
|
||||||
icon: 'repeat',
|
icon: 'repeat',
|
||||||
cssClass: 'bar',
|
cssClass: 'bar',
|
||||||
id: 123,
|
pipelineId: 123,
|
||||||
|
type: 'explode',
|
||||||
},
|
},
|
||||||
}).$mount();
|
}).$mount();
|
||||||
});
|
});
|
||||||
|
@ -39,8 +40,9 @@ describe('Pipelines Async Button', () => {
|
||||||
|
|
||||||
describe('With confirm dialog', () => {
|
describe('With confirm dialog', () => {
|
||||||
it('should call the service when confimation is positive', () => {
|
it('should call the service when confimation is positive', () => {
|
||||||
eventHub.$on('actionConfirmationModal', (data) => {
|
eventHub.$on('openConfirmationModal', (data) => {
|
||||||
expect(data.id).toEqual(123);
|
expect(data.pipelineId).toEqual(123);
|
||||||
|
expect(data.type).toEqual('explode');
|
||||||
});
|
});
|
||||||
|
|
||||||
component = new AsyncButtonComponent({
|
component = new AsyncButtonComponent({
|
||||||
|
@ -49,7 +51,8 @@ describe('Pipelines Async Button', () => {
|
||||||
title: 'Foo',
|
title: 'Foo',
|
||||||
icon: 'fa fa-foo',
|
icon: 'fa fa-foo',
|
||||||
cssClass: 'bar',
|
cssClass: 'bar',
|
||||||
id: 123,
|
pipelineId: 123,
|
||||||
|
type: 'explode',
|
||||||
},
|
},
|
||||||
}).$mount();
|
}).$mount();
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue