1 files changed, 14 insertions, 9 deletions
diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue
index 7bc1eb5d652..4a2da487e9b 100644
--- a/app/assets/javascripts/deploy_keys/components/action_btn.vue
+++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import eventHub from '../eventhub';
 
 export default {
   components: {
@@ -11,10 +10,6 @@ export default {
       type: Object,
       required: true,
     },
-    type: {
-      type: String,
-      required: true,
-    },
     category: {
       type: String,
       required: false,
@@ -30,6 +25,10 @@ export default {
       required: false,
       default: '',
     },
+    mutation: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
@@ -39,10 +38,15 @@ export default {
   methods: {
     doAction() {
       this.isLoading = true;
-
-      eventHub.$emit(`${this.type}.key`, this.deployKey, () => {
-        this.isLoading = false;
-      });
+      this.$apollo
+        .mutate({
+          mutation: this.mutation,
+          variables: { id: this.deployKey.id },
+        })
+        .catch((error) => this.$emit('error', error))
+        .finally(() => {
+          this.isLoading = false;
+        });
     },
   },
 };
@@ -50,6 +54,7 @@ export default {
 
 <template>
   <gl-button
+    v-bind="$attrs"
     :category="category"
     :variant="variant"
     :icon="icon"