Fix pipelines table update after action63590-pipeline-actions-cause-full-refresh

The pipelines table was showing the loading icon
after the user cancelled or retried a pipeline.
This fixes that so the pipeline updates without
removing the table from the DOM.

3 files changed, 13 insertions, 4 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 03d332cd430..d3ba0c97f6b 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -44,6 +44,11 @@ export default {
       cancelingPipeline: null,
     };
   },
+  watch: {
+    pipelines() {
+      this.cancelingPipeline = null;
+    },
+  },
   created() {
     eventHub.$on('openConfirmationModal', this.setModalData);
   },
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index e32e2f785bd..5275de3bc8b 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -241,7 +241,11 @@ export default {
       return this.cancelingPipeline === this.pipeline.id;
     },
   },
-
+  watch: {
+    pipeline() {
+      this.isRetrying = false;
+    },
+  },
   methods: {
     handleCancelClick() {
       eventHub.$emit('openConfirmationModal', {
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index 3cc9d0a3a4e..a6243366375 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -107,8 +107,8 @@ export default {
       }
       // Stop polling
       this.poll.stop();
-      // Update the table
-      return this.getPipelines().then(() => this.poll.restart());
+      // Restarting the poll also makes an initial request
+      this.poll.restart();
     },
     fetchPipelines() {
       if (!this.isMakingRequest) {
@@ -153,7 +153,7 @@ export default {
     postAction(endpoint) {
       this.service
         .postAction(endpoint)
-        .then(() => this.fetchPipelines())
+        .then(() => this.updateTable())
         .catch(() => Flash(__('An error occurred while making the request.')));
     },
   },