diff options
Diffstat (limited to 'app/assets/javascripts/custom_emoji/components/delete_item.vue')
-rw-r--r-- | app/assets/javascripts/custom_emoji/components/delete_item.vue | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/app/assets/javascripts/custom_emoji/components/delete_item.vue b/app/assets/javascripts/custom_emoji/components/delete_item.vue new file mode 100644 index 00000000000..9d13d40dc47 --- /dev/null +++ b/app/assets/javascripts/custom_emoji/components/delete_item.vue @@ -0,0 +1,90 @@ +<script> +import * as Sentry from '@sentry/browser'; +import { uniqueId } from 'lodash'; +import { GlButton, GlTooltipDirective, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui'; +import { createAlert } from '~/alert'; +import { __ } from '~/locale'; +import deleteCustomEmojiMutation from '../queries/delete_custom_emoji.mutation.graphql'; + +export default { + name: 'DeleteItem', + components: { + GlButton, + GlModal, + GlSprintf, + }, + directives: { + GlTooltip: GlTooltipDirective, + GlModal: GlModalDirective, + }, + props: { + emoji: { + type: Object, + required: true, + }, + }, + data() { + return { + isDeleting: false, + modalId: uniqueId('delete-custom-emoji-'), + }; + }, + methods: { + showModal() { + this.$refs['delete-modal'].show(); + }, + async onDelete() { + this.isDeleting = true; + + try { + await this.$apollo.mutate({ + mutation: deleteCustomEmojiMutation, + variables: { + id: this.emoji.id, + }, + update: (cache) => { + const cacheId = cache.identify(this.emoji); + cache.evict({ id: cacheId }); + }, + }); + } catch (e) { + createAlert(__('Failed to delete custom emoji. Please try again.')); + Sentry.captureException(e); + } + }, + }, + actionPrimary: { text: __('Delete'), attributes: { variant: 'danger' } }, + actionSecondary: { text: __('Cancel'), attributes: { variant: 'default' } }, +}; +</script> + +<template> + <div> + <gl-button + v-gl-tooltip + icon="remove" + :aria-label="__('Delete custom emoji')" + :title="__('Delete custom emoji')" + :loading="isDeleting" + data-testid="delete-button" + @click="showModal" + /> + <gl-modal + ref="delete-modal" + :title="__('Delete custom emoji')" + :action-primary="$options.actionPrimary" + :action-secondary="$options.actionSecondary" + :modal-id="modalId" + size="sm" + @primary="onDelete" + > + <gl-sprintf + :message="__('Are you sure you want to delete %{name}? This action cannot be undone.')" + > + <template #name + ><strong>{{ emoji.name }}</strong></template + > + </gl-sprintf> + </gl-modal> + </div> +</template> |