diff options
Diffstat (limited to 'app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue')
-rw-r--r-- | app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue new file mode 100644 index 00000000000..f857c96c9d1 --- /dev/null +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue @@ -0,0 +1,109 @@ +<script> +import { GlModal, GlSprintf, GlFormInput } from '@gitlab/ui'; +import { n__ } from '~/locale'; +import { + REMOVE_TAG_CONFIRMATION_TEXT, + REMOVE_TAGS_CONFIRMATION_TEXT, + DELETE_IMAGE_CONFIRMATION_TITLE, + DELETE_IMAGE_CONFIRMATION_TEXT, +} from '../../constants'; + +export default { + components: { + GlModal, + GlSprintf, + GlFormInput, + }, + props: { + itemsToBeDeleted: { + type: Array, + required: false, + default: () => [], + }, + deleteImage: { + type: Boolean, + default: false, + required: false, + }, + }, + data() { + return { + projectPath: '', + }; + }, + computed: { + imageProjectPath() { + return this.itemsToBeDeleted[0]?.project?.path; + }, + modalTitle() { + if (this.deleteImage) { + return DELETE_IMAGE_CONFIRMATION_TITLE; + } + return n__( + 'ContainerRegistry|Remove tag', + 'ContainerRegistry|Remove tags', + this.itemsToBeDeleted.length, + ); + }, + modalDescription() { + if (this.deleteImage) { + return { + message: DELETE_IMAGE_CONFIRMATION_TEXT, + item: this.imageProjectPath, + }; + } + if (this.itemsToBeDeleted.length > 1) { + return { + message: REMOVE_TAGS_CONFIRMATION_TEXT, + item: this.itemsToBeDeleted.length, + }; + } + + const [first] = this.itemsToBeDeleted; + return { + message: REMOVE_TAG_CONFIRMATION_TEXT, + item: first?.path, + }; + }, + disablePrimaryButton() { + return this.deleteImage && this.projectPath !== this.imageProjectPath; + }, + }, + methods: { + show() { + this.$refs.deleteModal.show(); + }, + }, +}; +</script> + +<template> + <gl-modal + ref="deleteModal" + modal-id="delete-tag-modal" + ok-variant="danger" + :action-primary="{ + text: __('Delete'), + attributes: [{ variant: 'danger' }, { disabled: disablePrimaryButton }], + }" + :action-cancel="{ text: __('Cancel') }" + @primary="$emit('confirmDelete')" + @cancel="$emit('cancelDelete')" + @change="projectPath = ''" + > + <template #modal-title>{{ modalTitle }}</template> + <p v-if="modalDescription" data-testid="description"> + <gl-sprintf :message="modalDescription.message"> + <template #item> + <b>{{ modalDescription.item }}</b> + </template> + <template #code> + <code>{{ modalDescription.item }}</code> + </template> + </gl-sprintf> + </p> + <div v-if="deleteImage"> + <gl-form-input v-model="projectPath" /> + </div> + </gl-modal> +</template> |