1 files changed, 22 insertions, 8 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;
+        }
       },
     },
   };