Add latest changes from gitlab-org/gitlab@master

3 files changed, 108 insertions, 38 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)"
diff --git a/app/assets/javascripts/runner/constants.js b/app/assets/javascripts/runner/constants.js
index ad0437d84ef..221696836ac 100644
--- a/app/assets/javascripts/runner/constants.js
+++ b/app/assets/javascripts/runner/constants.js
@@ -2,12 +2,16 @@ import { __, s__ } from '~/locale';
 
 export const RUNNER_PAGE_SIZE = 20;
 export const RUNNER_JOB_COUNT_LIMIT = 1000;
-export const GROUP_RUNNER_COUNT_LIMIT = 1000;
 
 export const I18N_FETCH_ERROR = s__('Runners|Something went wrong while fetching runner data.');
 export const I18N_DETAILS_TITLE = s__('Runners|Runner #%{runner_id}');
 
 // Type
+
+export const I18N_ALL_TYPES = s__('Runners|All');
+export const I18N_INSTANCE_TYPE = s__('Runners|Instance');
+export const I18N_GROUP_TYPE = s__('Runners|Group');
+export const I18N_PROJECT_TYPE = s__('Runners|Project');
 export const I18N_INSTANCE_RUNNER_DESCRIPTION = s__('Runners|Available to all projects');
 export const I18N_GROUP_RUNNER_DESCRIPTION = s__(
   'Runners|Available to all projects and subgroups in the group',
diff --git a/app/assets/javascripts/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/runner/group_runners/group_runners_app.vue
index 3a7b58e3dc9..c4ee0ad4dfb 100644
--- a/app/assets/javascripts/runner/group_runners/group_runners_app.vue
+++ b/app/assets/javascripts/runner/group_runners/group_runners_app.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlBadge, GlLink } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import { fetchPolicies } from '~/lib/graphql';
 import { updateHistory } from '~/lib/utils/url_utility';
-import { formatNumber, sprintf, s__ } from '~/locale';
+import { formatNumber } from '~/locale';
 
 import RegistrationDropdown from '../components/registration/registration_dropdown.vue';
 import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue';
@@ -18,7 +18,7 @@ import {
   I18N_FETCH_ERROR,
   GROUP_FILTERED_SEARCH_NAMESPACE,
   GROUP_TYPE,
-  GROUP_RUNNER_COUNT_LIMIT,
+  PROJECT_TYPE,
   STATUS_ONLINE,
   STATUS_OFFLINE,
   STATUS_STALE,
@@ -46,6 +46,7 @@ const runnersCountSmartQuery = {
 export default {
   name: 'GroupRunnersApp',
   components: {
+    GlBadge,
     GlLink,
     RegistrationDropdown,
     RunnerFilteredSearchBar,
@@ -131,6 +132,33 @@ export default {
         };
       },
     },
+    allRunnersCount: {
+      ...runnersCountSmartQuery,
+      variables() {
+        return {
+          ...this.countVariables,
+          type: null,
+        };
+      },
+    },
+    groupRunnersCount: {
+      ...runnersCountSmartQuery,
+      variables() {
+        return {
+          ...this.countVariables,
+          type: GROUP_TYPE,
+        };
+      },
+    },
+    projectRunnersCount: {
+      ...runnersCountSmartQuery,
+      variables() {
+        return {
+          ...this.countVariables,
+          type: PROJECT_TYPE,
+        };
+      },
+    },
   },
   computed: {
     variables() {
@@ -139,23 +167,17 @@ export default {
         groupFullPath: this.groupFullPath,
       };
     },
+    countVariables() {
+      // Exclude pagination variables, leave only filters variables
+      const { sort, before, last, after, first, ...countVariables } = this.variables;
+      return countVariables;
+    },
     runnersLoading() {
       return this.$apollo.queries.runners.loading;
     },
     noRunnersFound() {
       return !this.runnersLoading && !this.runners.items.length;
     },
-    groupRunnersCount() {
-      if (this.groupRunnersLimitedCount > GROUP_RUNNER_COUNT_LIMIT) {
-        return `${formatNumber(GROUP_RUNNER_COUNT_LIMIT)}+`;
-      }
-      return formatNumber(this.groupRunnersLimitedCount);
-    },
-    runnerCountMessage() {
-      return sprintf(s__('Runners|Runners in this group: %{groupRunnersCount}'), {
-        groupRunnersCount: this.groupRunnersCount,
-      });
-    },
     searchTokens() {
       return [statusTokenConfig];
     },
@@ -179,10 +201,31 @@ export default {
     this.reportToSentry(error);
   },
   methods: {
+    tabCount({ runnerType }) {
+      let count;
+      switch (runnerType) {
+        case null:
+          count = this.allRunnersCount;
+          break;
+        case GROUP_TYPE:
+          count = this.groupRunnersCount;
+          break;
+        case PROJECT_TYPE:
+          count = this.projectRunnersCount;
+          break;
+        default:
+          return null;
+      }
+      if (typeof count === 'number') {
+        return formatNumber(count);
+      }
+      return null;
+    },
     reportToSentry(error) {
       captureException({ error, component: this.$options.name });
     },
   },
+  TABS_RUNNER_TYPES: [GROUP_TYPE, PROJECT_TYPE],
   GROUP_TYPE,
 };
 </script>
@@ -198,9 +241,17 @@ export default {
     <div class="gl-display-flex gl-align-items-center">
       <runner-type-tabs
         v-model="search"
+        :runner-types="$options.TABS_RUNNER_TYPES"
         content-class="gl-display-none"
         nav-class="gl-border-none!"
-      />
+      >
+        <template #title="{ tab }">
+          {{ tab.title }}
+          <gl-badge v-if="tabCount(tab)" class="gl-ml-1" size="sm">
+            {{ tabCount(tab) }}
+          </gl-badge>
+        </template>
+      </runner-type-tabs>
 
       <registration-dropdown
         class="gl-ml-auto"