1 files changed, 123 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/runner_type_tabs.vue b/app/assets/javascripts/ci/runner/components/runner_type_tabs.vue
new file mode 100644
index 00000000000..584236168ac
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/components/runner_type_tabs.vue
@@ -0,0 +1,123 @@
+<script>
+import { GlBadge, GlTabs, GlTab } from '@gitlab/ui';
+import { searchValidator } from '~/ci/runner/runner_search_utils';
+import { formatNumber } from '~/locale';
+import {
+  INSTANCE_TYPE,
+  GROUP_TYPE,
+  PROJECT_TYPE,
+  I18N_ALL_TYPES,
+  I18N_INSTANCE_TYPE,
+  I18N_GROUP_TYPE,
+  I18N_PROJECT_TYPE,
+} from '../constants';
+import RunnerCount from './stat/runner_count.vue';
+
+const I18N_TAB_TITLES = {
+  [INSTANCE_TYPE]: I18N_INSTANCE_TYPE,
+  [GROUP_TYPE]: I18N_GROUP_TYPE,
+  [PROJECT_TYPE]: I18N_PROJECT_TYPE,
+};
+
+const TAB_COUNT_REF = 'tab-count';
+
+export default {
+  components: {
+    GlBadge,
+    GlTabs,
+    GlTab,
+    RunnerCount,
+  },
+  props: {
+    runnerTypes: {
+      type: Array,
+      required: false,
+      default: () => [INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE],
+    },
+    value: {
+      type: Object,
+      required: true,
+      validator: searchValidator,
+    },
+    countScope: {
+      type: String,
+      required: true,
+    },
+    countVariables: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    tabs() {
+      const tabs = this.runnerTypes.map((runnerType) => ({
+        title: I18N_TAB_TITLES[runnerType],
+        runnerType,
+      }));
+
+      // Always add a "All" tab that resets filters
+      return [
+        {
+          title: I18N_ALL_TYPES,
+          runnerType: null,
+        },
+        ...tabs,
+      ];
+    },
+  },
+  methods: {
+    onTabSelected({ runnerType }) {
+      this.$emit('input', {
+        ...this.value,
+        runnerType,
+        pagination: { page: 1 },
+      });
+    },
+    isTabActive({ runnerType }) {
+      return runnerType === this.value.runnerType;
+    },
+    tabBadgeCountVariables(runnerType) {
+      return { ...this.countVariables, type: runnerType };
+    },
+    tabCount(count) {
+      if (typeof count === 'number') {
+        return formatNumber(count);
+      }
+      return '';
+    },
+
+    // Component API
+    refetch() {
+      // Refresh all of the counts here, can be called by parent component
+      this.$refs[TAB_COUNT_REF].forEach((countComponent) => {
+        countComponent.refetch();
+      });
+    },
+  },
+  TAB_COUNT_REF,
+};
+</script>
+<template>
+  <gl-tabs v-bind="$attrs" data-testid="runner-type-tabs">
+    <gl-tab
+      v-for="tab in tabs"
+      :key="`${tab.runnerType}`"
+      :active="isTabActive(tab)"
+      @click="onTabSelected(tab)"
+    >
+      <template #title>
+        {{ tab.title }}
+        <runner-count
+          #default="{ count }"
+          :ref="$options.TAB_COUNT_REF"
+          :scope="countScope"
+          :variables="tabBadgeCountVariables(tab.runnerType)"
+        >
+          <gl-badge v-if="tabCount(count)" class="gl-ml-1" size="sm">
+            {{ tabCount(count) }}
+          </gl-badge>
+        </runner-count>
+      </template>
+    </gl-tab>
+  </gl-tabs>
+</template>