Use axios request to interact with API instead of UJS

4 files changed, 16 insertions, 86 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index e99d949801f..558bf812fef 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/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"
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
deleted file mode 100644
index 7c4fd65e36f..00000000000
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<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>
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
index be213c2ee78..30e40259146 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -1,7 +1,7 @@
 <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.
-     *
-     * Since this component is rendered multiple times per page we need to guarantee we only
-     * target the click event of this component.
-     */
+       * 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>
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index c6e5ae6df41..29680235a9e 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -1,6 +1,5 @@
 <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>