convert pipeline async_button component to vue template

3 files changed, 27 insertions, 25 deletions

diff --git a/app/assets/javascripts/vue_pipelines_index/components/async_button.js b/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
index 58b8db4d519..02edb55233c 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/async_button.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/async_button.vue
@@ -1,3 +1,4 @@
+<script>
 /* eslint-disable no-new, no-alert */
 /* global Flash */
 import '~/flash';
@@ -65,29 +66,30 @@ export default {
       this.isLoading = true;
 
       this.service.postAction(this.endpoint)
-      .then(() => {
-        this.isLoading = false;
-        eventHub.$emit('refreshPipelines');
-      })
-      .catch(() => {
-        this.isLoading = false;
-        new Flash('An error occured while making the request.');
-      });
+        .then(() => {
+          this.isLoading = false;
+          eventHub.$emit('refreshPipelines');
+        })
+        .catch(() => {
+          this.isLoading = false;
+          new Flash('An error occured while making the request.');
+        });
     },
   },
-
-  template: `
-    <button
-      type="button"
-      @click="onClick"
-      :class="buttonClass"
-      :title="title"
-      :aria-label="title"
-      data-container="body"
-      data-placement="top"
-      :disabled="isLoading">
-      <i :class="iconClass" aria-hidden="true"/>
-      <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading" />
-    </button>
-  `,
 };
+</script>
+
+<template>
+  <button
+    type="button"
+    @click="onClick"
+    :class="buttonClass"
+    :title="title"
+    :aria-label="title"
+    data-container="body"
+    data-placement="top"
+    :disabled="isLoading">
+    <i :class="iconClass" aria-hidden="true"/>
+    <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading"
+  />
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
index f5b3cb9214e..8ebe12cb1c5 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 
-import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button';
+import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button.vue';
 import PipelinesActionsComponent from '../../vue_pipelines_index/components/pipelines_actions';
 import PipelinesArtifactsComponent from '../../vue_pipelines_index/components/pipelines_artifacts';
 import PipelinesStatusComponent from '../../vue_pipelines_index/components/status';
diff --git a/spec/javascripts/vue_pipelines_index/async_button_spec.js b/spec/javascripts/vue_pipelines_index/async_button_spec.js
index bc8e504c413..6e910d2dc71 100644
--- a/spec/javascripts/vue_pipelines_index/async_button_spec.js
+++ b/spec/javascripts/vue_pipelines_index/async_button_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import asyncButtonComp from '~/vue_pipelines_index/components/async_button';
+import asyncButtonComp from '~/vue_pipelines_index/components/async_button.vue';
 
 describe('Pipelines Async Button', () => {
   let component;