debian-mirror-gitlab/app/assets/javascripts/runner/components/runner_delete_button.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

180 lines
4.4 KiB
Vue
Raw Normal View History

2022-05-07 20:08:51 +05:30
<script>
import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
import runnerDeleteMutation from '~/runner/graphql/shared/runner_delete.mutation.graphql';
import { createAlert } from '~/flash';
import { sprintf } from '~/locale';
import { captureException } from '~/runner/sentry_utils';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
2022-06-21 17:19:12 +05:30
import {
I18N_DELETE_DISABLED_MANY_PROJECTS,
I18N_DELETE_DISABLED_UNKNOWN_REASON,
I18N_DELETE_RUNNER,
I18N_DELETED_TOAST,
} from '../constants';
2022-05-07 20:08:51 +05:30
import RunnerDeleteModal from './runner_delete_modal.vue';
export default {
name: 'RunnerDeleteButton',
components: {
GlButton,
RunnerDeleteModal,
},
directives: {
GlTooltip: GlTooltipDirective,
GlModal: GlModalDirective,
},
props: {
runner: {
type: Object,
required: true,
validator: (runner) => {
return runner?.id && runner?.shortSha;
},
},
2022-06-21 17:19:12 +05:30
disabled: {
type: Boolean,
required: false,
default: false,
},
2022-05-07 20:08:51 +05:30
compact: {
type: Boolean,
required: false,
default: false,
},
},
emits: ['deleted'],
data() {
return {
deleting: false,
};
},
computed: {
runnerId() {
return getIdFromGraphQLId(this.runner.id);
},
runnerName() {
return `#${this.runnerId} (${this.runner.shortSha})`;
},
runnerDeleteModalId() {
return `delete-runner-modal-${this.runnerId}`;
},
icon() {
if (this.compact) {
return 'close';
}
return '';
},
buttonContent() {
if (this.compact) {
return null;
}
return I18N_DELETE_RUNNER;
},
buttonClass() {
// Ensure a square button is shown when compact: true.
// Without this class we will have distorted/rectangular button.
if (this.compact) {
return 'btn-icon';
}
return null;
},
ariaLabel() {
if (this.compact) {
return I18N_DELETE_RUNNER;
}
return null;
},
tooltip() {
2022-06-21 17:19:12 +05:30
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.
2022-05-07 20:08:51 +05:30
// Also prevent a "sticky" tooltip: If this button is
// disabled, mouseout listeners don't run leaving the tooltip stuck
if (this.compact && !this.deleting) {
return I18N_DELETE_RUNNER;
}
return '';
},
2022-06-21 17:19:12 +05:30
wrapperTabindex() {
if (this.disabled) {
// Trigger tooltip on keyboard-focusable wrapper
// See https://bootstrap-vue.org/docs/directives/tooltip
return '0';
}
return null;
},
2022-05-07 20:08:51 +05:30
},
methods: {
async onDelete() {
// Deleting stays "true" until this row is removed,
// should only change back if the operation fails.
this.deleting = true;
try {
2022-06-21 17:19:12 +05:30
await this.$apollo.mutate({
2022-05-07 20:08:51 +05:30
mutation: runnerDeleteMutation,
variables: {
input: {
id: this.runner.id,
},
},
2022-06-21 17:19:12 +05:30
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();
},
2022-05-07 20:08:51 +05:30
});
} catch (e) {
this.onError(e);
}
},
onError(error) {
2022-06-21 17:19:12 +05:30
this.deleting = false;
2022-05-07 20:08:51 +05:30
const { message } = error;
createAlert({ message });
captureException({ error, component: this.$options.name });
},
},
};
</script>
<template>
2022-06-21 17:19:12 +05:30
<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"
2022-07-16 23:28:13 +05:30
category="secondary"
v-bind="$attrs"
2022-06-21 17:19:12 +05:30
>
{{ buttonContent }}
</gl-button>
2022-05-07 20:08:51 +05:30
<runner-delete-modal
:modal-id="runnerDeleteModalId"
:runner-name="runnerName"
@primary="onDelete"
/>
2022-06-21 17:19:12 +05:30
</div>
2022-05-07 20:08:51 +05:30
</template>