Add latest changes from gitlab-org/gitlab@master

5 files changed, 51 insertions, 17 deletions

diff --git a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
index 8aba91eedf7..9abd45424e7 100644
--- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/runner/admin_runners/admin_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';
@@ -37,7 +37,7 @@ import { captureException } from '../sentry_utils';
 
 const runnersCountSmartQuery = {
   query: runnersAdminCountQuery,
-  fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
+  fetchPolicy: fetchPolicies.NETWORK_ONLY,
   update(data) {
     return data?.runners?.count;
   },
@@ -78,10 +78,7 @@ export default {
   apollo: {
     runners: {
       query: runnersAdminQuery,
-      // 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;
       },
@@ -224,9 +221,19 @@ export default {
       }
       return '';
     },
+    refetchFilteredCounts() {
+      this.$apollo.queries.allRunnersCount.refetch();
+      this.$apollo.queries.instanceRunnersCount.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 });
@@ -289,6 +296,7 @@ export default {
           <runner-actions-cell
             :runner="runner"
             :edit-url="runner.editAdminUrl"
+            @toggledPaused="onToggledPaused"
             @deleted="onDeleted"
           />
         </template>
diff --git a/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue b/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue
index d3535f89427..7a4760f81ee 100644
--- a/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue
+++ b/app/assets/javascripts/runner/components/cells/runner_actions_cell.vue
@@ -23,7 +23,7 @@ export default {
       required: false,
     },
   },
-  emits: ['deleted'],
+  emits: ['toggledPaused', 'deleted'],
   computed: {
     canUpdate() {
       return this.runner.userPermissions?.updateRunner;
@@ -33,6 +33,9 @@ export default {
     },
   },
   methods: {
+    onToggledPaused() {
+      this.$emit('toggledPaused');
+    },
     onDeleted(value) {
       this.$emit('deleted', value);
     },
@@ -43,7 +46,12 @@ export default {
 <template>
   <gl-button-group>
     <runner-edit-button v-if="canUpdate && editUrl" :href="editUrl" />
-    <runner-pause-button v-if="canUpdate" :runner="runner" :compact="true" />
+    <runner-pause-button
+      v-if="canUpdate"
+      :runner="runner"
+      :compact="true"
+      @toggledPaused="onToggledPaused"
+    />
     <runner-delete-button
       :disabled="!canDelete"
       :runner="runner"
diff --git a/app/assets/javascripts/runner/components/runner_delete_button.vue b/app/assets/javascripts/runner/components/runner_delete_button.vue
index a546a2788de..f436ac0ce52 100644
--- a/app/assets/javascripts/runner/components/runner_delete_button.vue
+++ b/app/assets/javascripts/runner/components/runner_delete_button.vue
@@ -126,6 +126,11 @@ export default {
               id: this.runner.id,
             },
           },
+          update: (cache) => {
+            // Remove deleted runner from the cache
+            const cacheId = cache.identify(this.runner);
+            cache.evict({ id: cacheId });
+          },
         });
         if (errors && errors.length) {
           throw new Error(errors.join(' '));
diff --git a/app/assets/javascripts/runner/components/runner_pause_button.vue b/app/assets/javascripts/runner/components/runner_pause_button.vue
index c88634bfbd9..334e5f6023a 100644
--- a/app/assets/javascripts/runner/components/runner_pause_button.vue
+++ b/app/assets/javascripts/runner/components/runner_pause_button.vue
@@ -24,6 +24,7 @@ export default {
       default: false,
     },
   },
+  emits: ['toggledPaused'],
   data() {
     return {
       updating: false,
@@ -83,6 +84,7 @@ export default {
         if (errors && errors.length) {
           throw new Error(errors.join(' '));
         }
+        this.$emit('toggledPaused');
       } catch (e) {
         this.onError(e);
       } finally {
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..00b3cd36846 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';
@@ -35,7 +35,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 +85,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;
       },
@@ -241,9 +238,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 +308,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