From cfe0d3092d8ecb061c656d433f6ce36669b87fd0 Mon Sep 17 00:00:00 2001 From: Chaim Lev-Ari Date: Sat, 19 Aug 2023 19:19:02 +0300 Subject: [PATCH] feat(ui): add confirmation to delete actions [EE-4612] (#10003) --- .../views/images/edit/imageController.js | 55 ++++++++++++------- app/docker/views/images/imagesController.js | 5 +- .../edgeGroupsViewController.js | 5 ++ .../edgeJobsView/edgeJobsViewController.js | 2 +- 4 files changed, 43 insertions(+), 24 deletions(-) diff --git a/app/docker/views/images/edit/imageController.js b/app/docker/views/images/edit/imageController.js index af7f421e9..ef017e2d7 100644 --- a/app/docker/views/images/edit/imageController.js +++ b/app/docker/views/images/edit/imageController.js @@ -1,6 +1,7 @@ import _ from 'lodash-es'; import { PorImageRegistryModel } from 'Docker/models/porImageRegistry'; import { confirmImageExport } from '@/react/docker/images/common/ConfirmExportModal'; +import { confirmDelete } from '@@/modals/confirm'; angular.module('portainer.docker').controller('ImageController', [ '$async', @@ -120,30 +121,42 @@ angular.module('portainer.docker').controller('ImageController', [ } $scope.removeTag = function (repository) { - ImageService.deleteImage(repository, false) - .then(function success() { - if ($scope.image.RepoTags.length === 1) { - Notifications.success('Image successfully deleted', repository); - $state.go('docker.images', {}, { reload: true }); - } else { - Notifications.success('Tag successfully deleted', repository); - $state.go('docker.images.image', { id: $transition$.params().id }, { reload: true }); - } - }) - .catch(function error(err) { - Notifications.error('Failure', err, 'Unable to remove image'); - }); + return $async(async () => { + if (!(await confirmDelete('Are you sure you want to delete this tag?'))) { + return; + } + + ImageService.deleteImage(repository, false) + .then(function success() { + if ($scope.image.RepoTags.length === 1) { + Notifications.success('Image successfully deleted', repository); + $state.go('docker.images', {}, { reload: true }); + } else { + Notifications.success('Tag successfully deleted', repository); + $state.go('docker.images.image', { id: $transition$.params().id }, { reload: true }); + } + }) + .catch(function error(err) { + Notifications.error('Failure', err, 'Unable to remove image'); + }); + }); }; $scope.removeImage = function (id) { - ImageService.deleteImage(id, false) - .then(function success() { - Notifications.success('Image successfully deleted', id); - $state.go('docker.images', {}, { reload: true }); - }) - .catch(function error(err) { - Notifications.error('Failure', err, 'Unable to remove image'); - }); + return $async(async () => { + if (!(await confirmDelete('Deleting this image will also delete all associated tags. Are you sure you want to delete this image?'))) { + return; + } + + ImageService.deleteImage(id, false) + .then(function success() { + Notifications.success('Image successfully deleted', id); + $state.go('docker.images', {}, { reload: true }); + }) + .catch(function error(err) { + Notifications.error('Failure', err, 'Unable to remove image'); + }); + }); }; function exportImage(image) { diff --git a/app/docker/views/images/imagesController.js b/app/docker/views/images/imagesController.js index bc5674b81..32893892a 100644 --- a/app/docker/views/images/imagesController.js +++ b/app/docker/views/images/imagesController.js @@ -57,7 +57,8 @@ angular.module('portainer.docker').controller('ImagesController', [ function confirmImageForceRemoval() { return confirmDestructive({ title: 'Are you sure?', - message: 'Forcing the removal of the image will remove the image even if it has multiple tags or if it is used by stopped containers.', + message: + "Forcing removal of an image will remove it even if it's used by stopped containers, and delete all associated tags. Are you sure you want to remove the selected image(s)?", confirmButton: buildConfirmButton('Remove the image', 'danger'), }); } @@ -65,7 +66,7 @@ angular.module('portainer.docker').controller('ImagesController', [ function confirmRegularRemove() { return confirmDestructive({ title: 'Are you sure?', - message: 'Removing the image will remove all tags associated to that image. Are you sure you want to remove the image?', + message: 'Removing an image will also delete all associated tags. Are you sure you want to remove the selected image(s)?', confirmButton: buildConfirmButton('Remove the image', 'danger'), }); } diff --git a/app/edge/views/edge-groups/edgeGroupsView/edgeGroupsViewController.js b/app/edge/views/edge-groups/edgeGroupsView/edgeGroupsViewController.js index 3bc259fcf..989cf3c49 100644 --- a/app/edge/views/edge-groups/edgeGroupsView/edgeGroupsViewController.js +++ b/app/edge/views/edge-groups/edgeGroupsView/edgeGroupsViewController.js @@ -1,4 +1,5 @@ import _ from 'lodash-es'; +import { confirmDelete } from '@@/modals/confirm'; export class EdgeGroupsController { /* @ngInject */ @@ -26,6 +27,10 @@ export class EdgeGroupsController { } async removeActionAsync(selectedItems) { + if (!(await confirmDelete('Do you want to remove the selected Edge Group(s)?'))) { + return; + } + for (let item of selectedItems) { try { await this.EdgeGroupService.remove(item.Id); diff --git a/app/edge/views/edge-jobs/edgeJobsView/edgeJobsViewController.js b/app/edge/views/edge-jobs/edgeJobsView/edgeJobsViewController.js index d61c2af99..a9da1aacd 100644 --- a/app/edge/views/edge-jobs/edgeJobsView/edgeJobsViewController.js +++ b/app/edge/views/edge-jobs/edgeJobsView/edgeJobsViewController.js @@ -15,7 +15,7 @@ export class EdgeJobsViewController { } removeAction(selectedItems) { - confirmDelete('Do you want to remove the selected edge job(s)?').then((confirmed) => { + confirmDelete('Do you want to remove the selected Edge job(s)?').then((confirmed) => { if (!confirmed) { return; }