feat(ui): add confirmation to delete actions [EE-4612] (#10003)

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) {

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'),
       });
     }

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);

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;
       }