Stop redirecting the page in graph main actions

app/assets/javascripts/pipelines/components/graph/action_component.vue

 <script>
-  import tooltip from '../../../vue_shared/directives/tooltip';
-  import icon from '../../../vue_shared/components/icon.vue';
-  import { dasherize } from '../../../lib/utils/text_utility';
-  /**
+import $ from 'jquery';
+import tooltip from '../../../vue_shared/directives/tooltip';
+import Icon from '../../../vue_shared/components/icon.vue';
+import { dasherize } from '../../../lib/utils/text_utility';
+import eventHub from '../../event_hub';
+/**
  * Renders either a cancel, retry or play icon pointing to the given path.
-   * TODO: Remove UJS from here and use an async request instead.
  */
-  export default {
+export default {
   components: {
-      icon,
+    Icon,
   },
 
   directives: {
@@ -26,35 +27,46 @@
       required: true,
     },
 
-      actionMethod: {
+    actionIcon: {
       type: String,
       required: true,
     },
 
-      actionIcon: {
+    buttonDisabled: {
       type: String,
-        required: true,
+      required: false,
+      default: null,
     },
   },
-
   computed: {
     cssClass() {
       const actionIconDash = dasherize(this.actionIcon);
       return `${actionIconDash} js-icon-${actionIconDash}`;
     },
+    isDisabled() {
+      return this.buttonDisabled === this.link;
+    },
+  },
+
+  methods: {
+    onClickAction() {
+      $(this.$el).tooltip('hide');
+      eventHub.$emit('graphAction', this.link);
+    },
   },
-  };
+};
 </script>
 <template>
-  <a
+  <button
+    type="button"
+    @click="onClickAction"
     v-tooltip
-    :data-method="actionMethod"
     :title="tooltipText"
-    :href="link"
-    class="ci-action-icon-container ci-action-icon-wrapper"
+    class="btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper"
     :class="cssClass"
     data-container="body"
+    :disabled="isDisabled"
   >
     <icon :name="actionIcon" />
-  </a>
+  </button>
 </template>

app/assets/javascripts/pipelines/components/graph/graph_component.vue

 <script>
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-  import stageColumnComponent from './stage_column_component.vue';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import StageColumnComponent from './stage_column_component.vue';
 
-  export default {
+export default {
   components: {
-      stageColumnComponent,
-      loadingIcon,
+    StageColumnComponent,
+    LoadingIcon,
   },
 
   props: {
@@ -17,6 +17,11 @@
       type: Object,
       required: true,
     },
+    actionDisabled: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
 
   computed: {
@@ -48,7 +53,7 @@
       return className;
     },
   },
-  };
+};
 </script>
 <template>
   <div class="build-content middle-block js-pipeline-graph">
@@ -70,6 +75,7 @@
           :key="stage.name"
           :stage-connector-class="stageConnectorClass(index, stage)"
           :is-first-column="isFirstColumn(index)"
+          :action-disabled="actionDisabled"
         />
       </ul>
     </div>

app/assets/javascripts/pipelines/components/graph/job_component.vue

 <script>
-  import actionComponent from './action_component.vue';
-  import dropdownActionComponent from './dropdown_action_component.vue';
-  import jobNameComponent from './job_name_component.vue';
-  import tooltip from '../../../vue_shared/directives/tooltip';
+import ActionComponent from './action_component.vue';
+import DropdownActionComponent from './dropdown_action_component.vue';
+import JobNameComponent from './job_name_component.vue';
+import tooltip from '../../../vue_shared/directives/tooltip';
 
-  /**
+/**
  * Renders the badge for the pipeline graph and the job's dropdown.
  *
  * The following object should be provided as `job`:
@@ -29,11 +29,11 @@
  * }
  */
 
-  export default {
+export default {
   components: {
-      actionComponent,
-      dropdownActionComponent,
-      jobNameComponent,
+    ActionComponent,
+    DropdownActionComponent,
+    JobNameComponent,
   },
 
   directives: {
@@ -56,6 +56,12 @@
       required: false,
       default: false,
     },
+
+    actionDisabled: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
 
   computed: {
@@ -90,7 +96,7 @@
       return this.job.status && this.job.status.action && this.job.status.action.path;
     },
   },
-  };
+};
 </script>
 <template>
   <div class="ci-job-component">
@@ -132,7 +138,7 @@
       :tooltip-text="status.action.title"
       :link="status.action.path"
       :action-icon="status.action.icon"
-      :action-method="status.action.method"
+      :button-disabled="actionDisabled"
     />
 
     <dropdown-action-component

app/assets/javascripts/pipelines/components/graph/stage_column_component.vue

 <script>
-  import jobComponent from './job_component.vue';
-  import dropdownJobComponent from './dropdown_job_component.vue';
+import JobComponent from './job_component.vue';
+import DropdownJobComponent from './dropdown_job_component.vue';
 
-  export default {
+export default {
   components: {
-      jobComponent,
-      dropdownJobComponent,
+    JobComponent,
+    DropdownJobComponent,
   },
   props: {
     title: {
@@ -29,6 +29,11 @@
       required: false,
       default: '',
     },
+    actionDisabled: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
 
   methods: {
@@ -44,7 +49,7 @@
       return index === 0 && !this.isFirstColumn ? 'left-connector' : '';
     },
   },
-  };
+};
 </script>
 <template>
   <li
@@ -69,6 +74,7 @@
             v-if="job.size === 1"
             :job="job"
             css-class-job-name="build-content"
+            :action-disabled="actionDisabled"
           />
 
           <dropdown-job-component

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -25,13 +25,36 @@ export default () => {
     data() {
       return {
         mediator,
+        actionDisabled: null,
       };
     },
+    created() {
+      eventHub.$on('graphAction', this.postAction);
+    },
+    beforeDestroy() {
+      eventHub.$off('graphAction', this.postAction);
+    },
+    methods: {
+      postAction(action) {
+        this.actionDisabled = action;
+
+        this.mediator.service.postAction(action)
+          .then(() => {
+            this.mediator.refreshPipeline();
+            this.actionDisabled = null;
+          })
+          .catch(() => {
+            this.actionDisabled = null;
+            Flash(__('An error occurred while making the request.'));
+          });
+      },
+    },
     render(createElement) {
       return createElement('pipeline-graph', {
         props: {
           isLoading: this.mediator.state.isLoading,
           pipeline: this.mediator.store.state.pipeline,
+          actionDisabled: this.actionDisabled,
         },
       });
     },

app/assets/javascripts/pipelines/pipeline_details_mediator.js

@@ -52,8 +52,11 @@ export default class pipelinesMediator {
   }
 
   refreshPipeline() {
-    this.service.getPipeline()
+    this.poll.stop();
+
+    return this.service.getPipeline()
       .then(response => this.successCallback(response))
-      .catch(() => this.errorCallback());
+      .catch(() => this.errorCallback())
+      .finally(() => this.poll.restart());
   }
 }

app/assets/stylesheets/pages/pipelines.scss

@@ -495,17 +495,17 @@
         svg {
           fill: $gl-text-color-secondary;
           position: relative;
-          left: 5px;
-          top: 2px;
-          width: 18px;
-          height: 18px;
+          left: 1px;
+          top: -1px;
+          width: 16px;
+          height: 16px;
         }
 
         &.play {
           svg {
-            width: #{$ci-action-icon-size - 8};
-            height: #{$ci-action-icon-size - 8};
-            left: 8px;
+            width: 16px;
+            height: 16px;
+            left: 3px;
           }
         }
       }

changelogs/unreleased/fl-fix-annoying-actions.yml

+---
+title: Stop redirecting the page in pipeline main actions
+merge_request:
+author:
+type: fixed

spec/javascripts/pipelines/graph/action_component_spec.js

 import Vue from 'vue';
 import actionComponent from '~/pipelines/components/graph/action_component.vue';
+import eventHub from '~/pipelines/event_hub';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('pipeline graph action component', () => {
   let component;
 
   beforeEach((done) => {
     const ActionComponent = Vue.extend(actionComponent);
-    component = new ActionComponent({
-      propsData: {
+    component = mountComponent(ActionComponent, {
       tooltipText: 'bar',
       link: 'foo',
-        actionMethod: 'post',
       actionIcon: 'cancel',
-      },
-    }).$mount();
+    });
 
     Vue.nextTick(done);
   });
 
-  it('should render a link', () => {
-    expect(component.$el.getAttribute('href')).toEqual('foo');
+  afterEach(() => {
+    component.$destroy();
+  });
+
+  it('should emit an event with the provided link', () => {
+    eventHub.$on('graphAction', (link) => {
+      expect(link).toEqual('foo');
+    });
   });
 
   it('should render the provided title as a bootstrap tooltip', () => {