Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

1 files changed, 59 insertions, 26 deletions

diff --git a/app/assets/javascripts/runner/components/runner_delete_button.vue b/app/assets/javascripts/runner/components/runner_delete_button.vue
index 854c983f4da..b58665ecbc9 100644
--- a/app/assets/javascripts/runner/components/runner_delete_button.vue
+++ b/app/assets/javascripts/runner/components/runner_delete_button.vue
@@ -5,7 +5,12 @@ import { createAlert } from '~/flash';
 import { sprintf } from '~/locale';
 import { captureException } from '~/runner/sentry_utils';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { I18N_DELETE_RUNNER, I18N_DELETED_TOAST } from '../constants';
+import {
+  I18N_DELETE_DISABLED_MANY_PROJECTS,
+  I18N_DELETE_DISABLED_UNKNOWN_REASON,
+  I18N_DELETE_RUNNER,
+  I18N_DELETED_TOAST,
+} from '../constants';
 import RunnerDeleteModal from './runner_delete_modal.vue';
 
 export default {
@@ -26,6 +31,11 @@ export default {
         return runner?.id && runner?.shortSha;
       },
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     compact: {
       type: Boolean,
       required: false,
@@ -75,7 +85,14 @@ export default {
       return null;
     },
     tooltip() {
-      // Only show tooltip when compact.
+      if (this.disabled && this.runner.projectCount > 1) {
+        return I18N_DELETE_DISABLED_MANY_PROJECTS;
+      }
+      if (this.disabled) {
+        return I18N_DELETE_DISABLED_UNKNOWN_REASON;
+      }
+
+      // Only show basic "delete" tooltip when compact.
       // Also prevent a "sticky" tooltip: If this button is
       // disabled, mouseout listeners don't run leaving the tooltip stuck
       if (this.compact && !this.deleting) {
@@ -83,6 +100,14 @@ export default {
       }
       return '';
     },
+    wrapperTabindex() {
+      if (this.disabled) {
+        // Trigger tooltip on keyboard-focusable wrapper
+        // See https://bootstrap-vue.org/docs/directives/tooltip
+        return '0';
+      }
+      return null;
+    },
   },
   methods: {
     async onDelete() {
@@ -90,31 +115,37 @@ export default {
       // should only change back if the operation fails.
       this.deleting = true;
       try {
-        const {
-          data: {
-            runnerDelete: { errors },
-          },
-        } = await this.$apollo.mutate({
+        await this.$apollo.mutate({
           mutation: runnerDeleteMutation,
           variables: {
             input: {
               id: this.runner.id,
             },
           },
+          update: (cache, { data }) => {
+            const { errors } = data.runnerDelete;
+
+            if (errors?.length) {
+              this.onError(new Error(errors.join(' ')));
+              return;
+            }
+
+            this.$emit('deleted', {
+              message: sprintf(I18N_DELETED_TOAST, { name: this.runnerName }),
+            });
+
+            // Remove deleted runner from the cache
+            const cacheId = cache.identify(this.runner);
+            cache.evict({ id: cacheId });
+            cache.gc();
+          },
         });
-        if (errors && errors.length) {
-          throw new Error(errors.join(' '));
-        } else {
-          this.$emit('deleted', {
-            message: sprintf(I18N_DELETED_TOAST, { name: this.runnerName }),
-          });
-        }
       } catch (e) {
-        this.deleting = false;
         this.onError(e);
       }
     },
     onError(error) {
+      this.deleting = false;
       const { message } = error;
 
       createAlert({ message });
@@ -125,20 +156,22 @@ export default {
 </script>
 
 <template>
-  <gl-button
-    v-gl-tooltip.hover.viewport="tooltip"
-    v-gl-modal="runnerDeleteModalId"
-    :aria-label="ariaLabel"
-    :icon="icon"
-    :class="buttonClass"
-    :loading="deleting"
-    variant="danger"
-  >
-    {{ buttonContent }}
+  <div v-gl-tooltip="tooltip" class="btn-group" :tabindex="wrapperTabindex">
+    <gl-button
+      v-gl-modal="runnerDeleteModalId"
+      :aria-label="ariaLabel"
+      :icon="icon"
+      :class="buttonClass"
+      :loading="deleting"
+      :disabled="disabled"
+      variant="danger"
+    >
+      {{ buttonContent }}
+    </gl-button>
     <runner-delete-modal
       :modal-id="runnerDeleteModalId"
       :runner-name="runnerName"
       @primary="onDelete"
     />
-  </gl-button>
+  </div>
 </template>