Fix pipelines table update after action

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.

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);
   },

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', {

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.')));
     },
   },

changelogs/unreleased/63590-pipeline-actions-cause-full-refresh.yml

+---
+title: Fix pipelines table to update without refreshing after action
+merge_request: 30190
+author:
+type: fixed

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);