1 files changed, 18 insertions, 2 deletions
diff --git a/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue b/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue
index 86ad912f017..c3f317b40b0 100644
--- a/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue
+++ b/app/assets/javascripts/runner/admin_runner_show/admin_runner_show_app.vue
@@ -1,19 +1,23 @@
 <script>
 import { GlTooltipDirective } from '@gitlab/ui';
-import { createAlert } from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/flash';
 import { TYPE_CI_RUNNER } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { redirectTo } from '~/lib/utils/url_utility';
+import RunnerDeleteButton from '../components/runner_delete_button.vue';
 import RunnerEditButton from '../components/runner_edit_button.vue';
 import RunnerPauseButton from '../components/runner_pause_button.vue';
 import RunnerHeader from '../components/runner_header.vue';
 import RunnerDetails from '../components/runner_details.vue';
 import { I18N_FETCH_ERROR } from '../constants';
-import runnerQuery from '../graphql/details/runner.query.graphql';
+import runnerQuery from '../graphql/show/runner.query.graphql';
 import { captureException } from '../sentry_utils';
+import { saveAlertToLocalStorage } from '../local_storage_alert/save_alert_to_local_storage';
 
 export default {
   name: 'AdminRunnerShowApp',
   components: {
+    RunnerDeleteButton,
     RunnerEditButton,
     RunnerPauseButton,
     RunnerHeader,
@@ -27,6 +31,10 @@ export default {
       type: String,
       required: true,
     },
+    runnersPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -52,6 +60,9 @@ export default {
     canUpdate() {
       return this.runner.userPermissions?.updateRunner;
     },
+    canDelete() {
+      return this.runner.userPermissions?.deleteRunner;
+    },
   },
   errorCaptured(error) {
     this.reportToSentry(error);
@@ -60,6 +71,10 @@ export default {
     reportToSentry(error) {
       captureException({ error, component: this.$options.name });
     },
+    onDeleted({ message }) {
+      saveAlertToLocalStorage({ message, variant: VARIANT_SUCCESS });
+      redirectTo(this.runnersPath);
+    },
   },
 };
 </script>
@@ -69,6 +84,7 @@ export default {
       <template #actions>
         <runner-edit-button v-if="canUpdate && runner.editAdminUrl" :href="runner.editAdminUrl" />
         <runner-pause-button v-if="canUpdate" :runner="runner" />
+        <runner-delete-button v-if="canDelete" :runner="runner" @deleted="onDeleted" />
       </template>
     </runner-header>