1 files changed, 92 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_pipelines_index/components/async_button.js b/app/assets/javascripts/vue_pipelines_index/components/async_button.js
new file mode 100644
index 00000000000..aaebf29d8ae
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/async_button.js
@@ -0,0 +1,92 @@
+/* eslint-disable no-new, no-alert */
+/* global Flash */
+import '~/flash';
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+
+    title: {
+      type: String,
+      required: true,
+    },
+
+    icon: {
+      type: String,
+      required: true,
+    },
+
+    cssClass: {
+      type: String,
+      required: true,
+    },
+
+    confirmActionMessage: {
+      type: String,
+      required: false,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  computed: {
+    iconClass() {
+      return `fa fa-${this.icon}`;
+    },
+
+    buttonClass() {
+      return `btn has-tooltip ${this.cssClass}`;
+    },
+  },
+
+  methods: {
+    onClick() {
+      if (this.confirmActionMessage && confirm(this.confirmActionMessage)) {
+        this.makeRequest();
+      } else if (!this.confirmActionMessage) {
+        this.makeRequest();
+      }
+    },
+
+    makeRequest() {
+      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.');
+      });
+    },
+  },
+
+  template: `
+    <button
+      type="button"
+      @click="onClick"
+      :class="buttonClass"
+      :title="title"
+      :aria-label="title"
+      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>
+  `,
+};