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.

5 files changed, 20 insertions, 10 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.')));
     },
   },
diff --git a/changelogs/unreleased/63590-pipeline-actions-cause-full-refresh.yml b/changelogs/unreleased/63590-pipeline-actions-cause-full-refresh.yml
new file mode 100644
index 00000000000..a1e7d4679d8
--- /dev/null
+++ b/changelogs/unreleased/63590-pipeline-actions-cause-full-refresh.yml
@@ -0,0 +1,5 @@
+---
+title: Fix pipelines table to update without refreshing after action
+merge_request: 30190
+author:
+type: fixed
diff --git a/spec/javascripts/pipelines/pipelines_spec.js b/spec/javascripts/pipelines/pipelines_spec.js
index 78187b69563..daa898ca687 100644
--- a/spec/javascripts/pipelines/pipelines_spec.js
+++ b/spec/javascripts/pipelines/pipelines_spec.js
@@ -736,10 +736,9 @@ describe('Pipelines', () => {
     });
 
     describe('when a request is being made', () => {
-      it('stops polling, cancels the request, fetches pipelines & restarts polling', done => {
+      it('stops polling, cancels the request, & restarts polling', done => {
         spyOn(vm.poll, 'stop');
         spyOn(vm.poll, 'restart');
-        spyOn(vm, 'getPipelines').and.returnValue(Promise.resolve());
         spyOn(vm.service.cancelationSource, 'cancel').and.callThrough();
 
         setTimeout(() => {
@@ -754,7 +753,6 @@ describe('Pipelines', () => {
               expect(vm.poll.stop).toHaveBeenCalled();
 
               setTimeout(() => {
-                expect(vm.getPipelines).toHaveBeenCalled();
                 expect(vm.poll.restart).toHaveBeenCalled();
                 done();
               }, 0);
@@ -765,10 +763,9 @@ describe('Pipelines', () => {
     });
 
     describe('when no request is being made', () => {
-      it('stops polling, fetches pipelines & restarts polling', done => {
+      it('stops polling & restarts polling', done => {
         spyOn(vm.poll, 'stop');
         spyOn(vm.poll, 'restart');
-        spyOn(vm, 'getPipelines').and.returnValue(Promise.resolve());
 
         setTimeout(() => {
           vm.$el.querySelector('.js-builds-dropdown-button').click();
@@ -776,7 +773,6 @@ describe('Pipelines', () => {
           expect(vm.poll.stop).toHaveBeenCalled();
 
           setTimeout(() => {
-            expect(vm.getPipelines).toHaveBeenCalled();
             expect(vm.poll.restart).toHaveBeenCalled();
             done();
           }, 0);