diff options
Diffstat (limited to 'app/assets/javascripts/registry/explorer/components/details_page/delete_modal.vue')
-rw-r--r-- | app/assets/javascripts/registry/explorer/components/details_page/delete_modal.vue | 37 |
1 files changed, 28 insertions, 9 deletions
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/delete_modal.vue b/app/assets/javascripts/registry/explorer/components/details_page/delete_modal.vue index 96f221bf71d..0432cf1123c 100644 --- a/app/assets/javascripts/registry/explorer/components/details_page/delete_modal.vue +++ b/app/assets/javascripts/registry/explorer/components/details_page/delete_modal.vue @@ -1,7 +1,12 @@ <script> import { GlModal, GlSprintf } from '@gitlab/ui'; import { n__ } from '~/locale'; -import { REMOVE_TAG_CONFIRMATION_TEXT, REMOVE_TAGS_CONFIRMATION_TEXT } from '../../constants/index'; +import { + REMOVE_TAG_CONFIRMATION_TEXT, + REMOVE_TAGS_CONFIRMATION_TEXT, + DELETE_IMAGE_CONFIRMATION_TITLE, + DELETE_IMAGE_CONFIRMATION_TEXT, +} from '../../constants'; export default { components: { @@ -14,9 +19,17 @@ export default { required: false, default: () => [], }, + deleteImage: { + type: Boolean, + default: false, + required: false, + }, }, computed: { - modalAction() { + modalTitle() { + if (this.deleteImage) { + return DELETE_IMAGE_CONFIRMATION_TITLE; + } return n__( 'ContainerRegistry|Remove tag', 'ContainerRegistry|Remove tags', @@ -24,14 +37,19 @@ export default { ); }, modalDescription() { + if (this.deleteImage) { + return { + message: DELETE_IMAGE_CONFIRMATION_TEXT, + }; + } if (this.itemsToBeDeleted.length > 1) { return { message: REMOVE_TAGS_CONFIRMATION_TEXT, item: this.itemsToBeDeleted.length, }; } - const [first] = this.itemsToBeDeleted; + const [first] = this.itemsToBeDeleted; return { message: REMOVE_TAG_CONFIRMATION_TEXT, item: first?.path, @@ -51,16 +69,17 @@ export default { ref="deleteModal" modal-id="delete-tag-modal" ok-variant="danger" - @ok="$emit('confirmDelete')" + :action-primary="{ text: __('Confirm'), attributes: { variant: 'danger' } }" + :action-cancel="{ text: __('Cancel') }" + @primary="$emit('confirmDelete')" @cancel="$emit('cancelDelete')" > - <template #modal-title>{{ modalAction }}</template> - <template #modal-ok>{{ modalAction }}</template> + <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 #item> + <b>{{ modalDescription.item }}</b> + </template> </gl-sprintf> </p> </gl-modal> |