Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

1 files changed, 37 insertions, 22 deletions

diff --git a/app/assets/javascripts/runner/components/runner_type_tabs.vue b/app/assets/javascripts/runner/components/runner_type_tabs.vue
index b767dafaccf..25ed6600dc9 100644
--- a/app/assets/javascripts/runner/components/runner_type_tabs.vue
+++ b/app/assets/javascripts/runner/components/runner_type_tabs.vue
@@ -1,27 +1,21 @@
 <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';
+import {
+  INSTANCE_TYPE,
+  GROUP_TYPE,
+  PROJECT_TYPE,
+  I18N_ALL_TYPES,
+  I18N_INSTANCE_TYPE,
+  I18N_GROUP_TYPE,
+  I18N_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,
-  },
-];
+const I18N_TAB_TITLES = {
+  [INSTANCE_TYPE]: I18N_INSTANCE_TYPE,
+  [GROUP_TYPE]: I18N_GROUP_TYPE,
+  [PROJECT_TYPE]: I18N_PROJECT_TYPE,
+};
 
 export default {
   components: {
@@ -29,12 +23,34 @@ export default {
     GlTab,
   },
   props: {
+    runnerTypes: {
+      type: Array,
+      required: false,
+      default: () => [INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE],
+    },
     value: {
       type: Object,
       required: true,
       validator: searchValidator,
     },
   },
+  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', {
@@ -47,13 +63,12 @@ export default {
       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"
+      v-for="tab in tabs"
       :key="`${tab.runnerType}`"
       :active="isTabActive(tab)"
       @click="onTabSelected(tab)"