Use axios request to interact with API instead of UJS

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

@@ -62,7 +62,7 @@ export default {
     @click="onClickAction"
     v-tooltip
     :title="tooltipText"
-    class="btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper"
+    class="js-ci-action btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper"
     :class="cssClass"
     data-container="body"
     :disabled="isDisabled"

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

-<script>
-  import icon from '../../../vue_shared/components/icon.vue';
-  import tooltip from '../../../vue_shared/directives/tooltip';
-
-  /**
-   * 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 {
-    components: {
-      icon,
-    },
-
-    directives: {
-      tooltip,
-    },
-    props: {
-      tooltipText: {
-        type: String,
-        required: true,
-      },
-
-      link: {
-        type: String,
-        required: true,
-      },
-
-      actionMethod: {
-        type: String,
-        required: true,
-      },
-
-      actionIcon: {
-        type: String,
-        required: true,
-      },
-    },
-  };
-</script>
-<template>
-  <a
-    v-tooltip
-    :data-method="actionMethod"
-    :title="tooltipText"
-    :href="link"
-    rel="nofollow"
-    class="ci-action-icon-wrapper js-ci-status-icon"
-    data-container="body"
-    aria-label="Job's action"
-  >
-    <icon :name="actionIcon" />
-  </a>
-</template>

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

 <script>
   import $ from 'jquery';
-  import jobNameComponent from './job_name_component.vue';
-  import jobComponent from './job_component.vue';
+  import JobNameComponent from './job_name_component.vue';
+  import JobComponent from './job_component.vue';
   import tooltip from '../../../vue_shared/directives/tooltip';
 
   /**
@@ -33,8 +33,8 @@
     },
 
     components: {
-      jobComponent,
-      jobNameComponent,
+      JobComponent,
+      JobNameComponent,
     },
 
     props: {
@@ -56,17 +56,17 @@
 
     methods: {
       /**
-     * When the user right clicks or cmd/ctrl + click in the job name
-     * the dropdown should not be closed and the link should open in another tab,
-     * so we stop propagation of the click event inside the dropdown.
+       * When the user right clicks or cmd/ctrl + click in the job name or the action icon
+       * the dropdown should not be closed so we stop propagation of the click event inside the dropdown.
        *
        * Since this component is rendered multiple times per page we need to guarantee we only
        * target the click event of this component.
        */
       stopDropdownClickPropagation() {
-        $(this.$el
-          .querySelectorAll('.js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item'))
-          .on('click', (e) => {
+        $(
+          '.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item',
+          this.$el,
+        ).on('click', (e) => {
             e.stopPropagation();
           });
       },
@@ -101,7 +101,6 @@
             :key="i">
             <job-component
               :job="item"
-              :is-dropdown="true"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
             />
           </li>

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';
 
@@ -32,7 +31,6 @@ import tooltip from '../../../vue_shared/directives/tooltip';
 export default {
   components: {
     ActionComponent,
-    DropdownActionComponent,
     JobNameComponent,
   },
 
@@ -51,12 +49,6 @@ export default {
       default: '',
     },
 
-    isDropdown: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
     actionDisabled: {
       type: String,
       required: false,
@@ -134,19 +126,11 @@ export default {
     </div>
 
     <action-component
-      v-if="hasAction && !isDropdown"
+      v-if="hasAction"
       :tooltip-text="status.action.title"
       :link="status.action.path"
       :action-icon="status.action.icon"
       :button-disabled="actionDisabled"
     />
-
-    <dropdown-action-component
-      v-if="hasAction && isDropdown"
-      :tooltip-text="status.action.title"
-      :link="status.action.path"
-      :action-icon="status.action.icon"
-      :action-method="status.action.method"
-    />
   </div>
 </template>

app/assets/stylesheets/pages/pipelines.scss

@@ -497,6 +497,14 @@
     margin-bottom: 10px;
     white-space: normal;
 
+    .ci-job-dropdown-container {
+      // override dropdown.scss
+      .dropdown-menu li button {
+        padding: 0;
+        text-align: center;
+      }
+    }
+
     // ensure .build-content has hover style when action-icon is hovered
     .ci-job-dropdown-container:hover .build-content {
       @extend .build-content:hover;

spec/javascripts/pipelines/graph/dropdown_action_component_spec.js

-import Vue from 'vue';
-import dropdownActionComponent from '~/pipelines/components/graph/dropdown_action_component.vue';
-
-describe('action component', () => {
-  let component;
-
-  beforeEach((done) => {
-    const DropdownActionComponent = Vue.extend(dropdownActionComponent);
-    component = new DropdownActionComponent({
-      propsData: {
-        tooltipText: 'bar',
-        link: 'foo',
-        actionMethod: 'post',
-        actionIcon: 'cancel',
-      },
-    }).$mount();
-
-    Vue.nextTick(done);
-  });
-
-  it('should render a link', () => {
-    expect(component.$el.getAttribute('href')).toEqual('foo');
-  });
-
-  it('should render the provided title as a bootstrap tooltip', () => {
-    expect(component.$el.getAttribute('data-original-title')).toEqual('bar');
-  });
-
-  it('should render an svg', () => {
-    expect(component.$el.querySelector('svg')).toBeDefined();
-  });
-});

spec/javascripts/pipelines/graph/job_component_spec.js

@@ -93,17 +93,6 @@ describe('pipeline graph job component', () => {
     });
   });
 
-  describe('dropdown', () => {
-    it('should render the dropdown action icon', () => {
-      component = mountComponent(JobComponent, {
-        job: mockJob,
-        isDropdown: true,
-      });
-
-      expect(component.$el.querySelector('a.ci-action-icon-wrapper')).toBeDefined();
-    });
-  });
-
   it('should render provided class name', () => {
     component = mountComponent(JobComponent, {
       job: mockJob,