diff options
Diffstat (limited to 'app/assets/javascripts/runner/components/runner_type_tabs.vue')
-rw-r--r-- | app/assets/javascripts/runner/components/runner_type_tabs.vue | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/app/assets/javascripts/runner/components/runner_type_tabs.vue b/app/assets/javascripts/runner/components/runner_type_tabs.vue new file mode 100644 index 00000000000..b767dafaccf --- /dev/null +++ b/app/assets/javascripts/runner/components/runner_type_tabs.vue @@ -0,0 +1,66 @@ +<script> +import { GlTabs, GlTab } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import { searchValidator } from '~/runner/runner_search_utils'; +import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../constants'; + +const tabs = [ + { + title: s__('Runners|All'), + runnerType: null, + }, + { + title: s__('Runners|Instance'), + runnerType: INSTANCE_TYPE, + }, + { + title: s__('Runners|Group'), + runnerType: GROUP_TYPE, + }, + { + title: s__('Runners|Project'), + runnerType: PROJECT_TYPE, + }, +]; + +export default { + components: { + GlTabs, + GlTab, + }, + props: { + value: { + type: Object, + required: true, + validator: searchValidator, + }, + }, + methods: { + onTabSelected({ runnerType }) { + this.$emit('input', { + ...this.value, + runnerType, + pagination: { page: 1 }, + }); + }, + isTabActive({ runnerType }) { + return runnerType === this.value.runnerType; + }, + }, + tabs, +}; +</script> +<template> + <gl-tabs v-bind="$attrs" data-testid="runner-type-tabs"> + <gl-tab + v-for="tab in $options.tabs" + :key="`${tab.runnerType}`" + :active="isTabActive(tab)" + @click="onTabSelected(tab)" + > + <template #title> + <slot name="title" :tab="tab">{{ tab.title }}</slot> + </template> + </gl-tab> + </gl-tabs> +</template> |