1 files changed, 80 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/runner_header_actions.vue b/app/assets/javascripts/ci/runner/components/runner_header_actions.vue
new file mode 100644
index 00000000000..bc6f184bd4d
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/components/runner_header_actions.vue
@@ -0,0 +1,80 @@
+<script>
+import { GlDisclosureDropdown } from '@gitlab/ui';
+
+import RunnerDeleteButton from './runner_delete_button.vue';
+import RunnerEditButton from './runner_edit_button.vue';
+import RunnerPauseButton from './runner_pause_button.vue';
+
+import RunnerEditDisclosureDropdownItem from './runner_edit_disclosure_dropdown_item.vue';
+import RunnerPauseDisclosureDropdownItem from './runner_pause_disclosure_dropdown_item.vue';
+import RunnerDeleteDisclosureDropdownItem from './runner_delete_disclosure_dropdown_item.vue';
+
+export default {
+  name: 'RunnerHeaderActions',
+  components: {
+    GlDisclosureDropdown,
+
+    RunnerDeleteButton,
+    RunnerEditButton,
+    RunnerPauseButton,
+
+    RunnerEditDisclosureDropdownItem,
+    RunnerPauseDisclosureDropdownItem,
+    RunnerDeleteDisclosureDropdownItem,
+  },
+  props: {
+    runner: {
+      type: Object,
+      required: true,
+    },
+    editPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    canUpdate() {
+      return this.runner.userPermissions?.updateRunner;
+    },
+    canDelete() {
+      return this.runner.userPermissions?.deleteRunner;
+    },
+  },
+  methods: {
+    onDeleted(event) {
+      this.$emit('deleted', event);
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="canUpdate || canDelete">
+    <!-- sm and up screens -->
+    <div class="gl-display-none gl-sm-display-flex gl-gap-3">
+      <runner-edit-button v-if="canUpdate" :href="editPath" />
+      <runner-pause-button v-if="canUpdate" :runner="runner" />
+      <runner-delete-button v-if="canDelete" :runner="runner" @deleted="onDeleted" />
+    </div>
+
+    <!-- xs screens -->
+    <div class="gl-sm-display-none">
+      <gl-disclosure-dropdown
+        icon="ellipsis_v"
+        :toggle-text="s__('Runner|Runner actions')"
+        text-sr-only
+        category="tertiary"
+        no-caret
+      >
+        <runner-edit-disclosure-dropdown-item v-if="canUpdate" :href="editPath" />
+        <runner-pause-disclosure-dropdown-item v-if="canUpdate" :runner="runner" />
+        <runner-delete-disclosure-dropdown-item
+          v-if="canDelete"
+          :runner="runner"
+          @deleted="onDeleted"
+        />
+      </gl-disclosure-dropdown>
+    </div>
+  </div>
+</template>