1 files changed, 21 insertions, 9 deletions

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 35fd7fff6d3..b299d7c40fe 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 { GlBadge, GlLink } from '@gitlab/ui';
 import { createAlert } from '~/flash';
-import { fetchPolicies } from '~/lib/graphql';
 import { updateHistory } from '~/lib/utils/url_utility';
 import { formatNumber } from '~/locale';
+import { fetchPolicies } from '~/lib/graphql';
 
 import RegistrationDropdown from '../components/registration/registration_dropdown.vue';
 import RunnerFilteredSearchBar from '../components/runner_filtered_search_bar.vue';
@@ -14,6 +14,7 @@ import RunnerPagination from '../components/runner_pagination.vue';
 import RunnerTypeTabs from '../components/runner_type_tabs.vue';
 import RunnerActionsCell from '../components/cells/runner_actions_cell.vue';
 
+import { pausedTokenConfig } from '../components/search_tokens/paused_token_config';
 import { statusTokenConfig } from '../components/search_tokens/status_token_config';
 import {
   GROUP_FILTERED_SEARCH_NAMESPACE,
@@ -35,7 +36,7 @@ import { captureException } from '../sentry_utils';
 
 const runnersCountSmartQuery = {
   query: groupRunnersCountQuery,
-  fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
+  fetchPolicy: fetchPolicies.NETWORK_ONLY,
   update(data) {
     return data?.group?.runners?.count;
   },
@@ -85,10 +86,7 @@ export default {
   apollo: {
     runners: {
       query: groupRunnersQuery,
-      // Runners can be updated by users directly in this list.
-      // A "cache and network" policy prevents outdated filtered
-      // results.
-      fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
+      fetchPolicy: fetchPolicies.NETWORK_ONLY,
       variables() {
         return this.variables;
       },
@@ -192,7 +190,7 @@ export default {
       return !this.runnersLoading && !this.runners.items.length;
     },
     searchTokens() {
-      return [statusTokenConfig];
+      return [pausedTokenConfig, statusTokenConfig];
     },
     filteredSearchNamespace() {
       return `${GROUP_FILTERED_SEARCH_NAMESPACE}/${this.groupFullPath}`;
@@ -241,9 +239,18 @@ export default {
     editUrl(runner) {
       return this.runners.urlsById[runner.id]?.edit;
     },
+    refetchFilteredCounts() {
+      this.$apollo.queries.allRunnersCount.refetch();
+      this.$apollo.queries.groupRunnersCount.refetch();
+      this.$apollo.queries.projectRunnersCount.refetch();
+    },
+    onToggledPaused() {
+      // When a runner is Paused, the tab count can
+      // become stale, refetch outdated counts.
+      this.refetchFilteredCounts();
+    },
     onDeleted({ message }) {
       this.$root.$toast?.show(message);
-      this.$apollo.queries.runners.refetch();
     },
     reportToSentry(error) {
       captureException({ error, component: this.$options.name });
@@ -302,7 +309,12 @@ export default {
           </gl-link>
         </template>
         <template #runner-actions-cell="{ runner }">
-          <runner-actions-cell :runner="runner" :edit-url="editUrl(runner)" @deleted="onDeleted" />
+          <runner-actions-cell
+            :runner="runner"
+            :edit-url="editUrl(runner)"
+            @toggledPaused="onToggledPaused"
+            @deleted="onDeleted"
+          />
         </template>
       </runner-list>
       <runner-pagination