diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue index 75a2ff421087217fd01028516113520251297639..f7cf90b61e902ffadc628463aaa18c3347e20688 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue @@ -141,6 +141,8 @@ export default { containerRepositoriesCount: 0, itemToDelete: {}, deleteAlertType: null, + deleteAlertMessage: null, + deleteImageErrorMessages: [], sorting: null, name: null, mutationLoading: false, @@ -197,11 +199,6 @@ export default { showConnectionError() { return this.config.connectionError || this.config.invalidPathError; }, - deleteImageAlertMessage() { - return this.deleteAlertType === 'success' - ? DELETE_IMAGE_SUCCESS_MESSAGE - : DELETE_IMAGE_ERROR_MESSAGE; - }, }, methods: { deleteImage(item) { @@ -210,7 +207,8 @@ export default { this.$refs.deleteModal.show(); }, dismissDeleteAlert() { - this.deleteAlertType = null; + this.setDeleteAlert(null, null); + this.itemToDelete = {}; }, fetchNextPage() { @@ -239,6 +237,20 @@ export default { }, 200); } }, + setDeleteAlert(alertType, alertMessage) { + this.deleteAlertType = alertType; + this.deleteAlertMessage = alertMessage; + }, + setDeleteErrorMessages(deleteErrorMessages = []) { + this.deleteImageErrorMessages = deleteErrorMessages ?? []; + }, + handleDeleteImageSuccess() { + this.setDeleteAlert('success', DELETE_IMAGE_SUCCESS_MESSAGE); + }, + handleDeleteImageError(errors = []) { + this.setDeleteAlert('danger', DELETE_IMAGE_ERROR_MESSAGE); + this.setDeleteErrorMessages(errors?.map(({ message }) => message)); + }, }, containerRegistryHelpUrl: helpPagePath('user/packages/container_registry/_index'), dockerConnectionErrorHelpUrl: helpPagePath( @@ -260,11 +272,19 @@ export default { dismissible @dismiss="dismissDeleteAlert" > - + + +
+ +