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 @@
@@ -74,7 +120,20 @@
:auto-devops-help-path="autoDevopsHelpPath"
:view-type="viewType"
/>
-
-
+
+
+
+
+
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"
/>
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 @@
-
-
-
-
-
-
-
-
-
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 @@
-
-
-
-
-
-
-
-
-
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();