fix(ui): confirm deletion [EE-4612] (#8868)

app/docker/views/images/images.html

@@ -54,8 +54,8 @@
       order-by="RepoTags"
       show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
       download-action="downloadAction"
-      remove-action="removeAction"
+      remove-action="confirmRemove"
-      force-remove-action="confirmRemovalAction"
+      force-remove-action="confirmForceRemove"
       export-in-progress="state.exportInProgress"
       refresh-callback="getImages"
     ></images-datatable>

app/docker/views/images/imagesController.js

@@ -1,8 +1,7 @@
 import _ from 'lodash-es';
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
-import { ModalType } from '@@/modals';
 import { confirmImageExport } from '@/react/docker/images/common/ConfirmExportModal';
-import { confirm } from '@@/modals/confirm';
+import { confirmDestructive } from '@@/modals/confirm';
 import { buildConfirmButton } from '@@/modals/utils';
 
 angular.module('portainer.docker').controller('ImagesController', [
@@ -15,7 +14,8 @@ angular.module('portainer.docker').controller('ImagesController', [
   'FileSaver',
   'Blob',
   'endpoint',
-  function ($scope, $state, Authentication, ImageService, Notifications, HttpRequestHelper, FileSaver, Blob, endpoint) {
+  '$async',
+  function ($scope, $state, Authentication, ImageService, Notifications, HttpRequestHelper, FileSaver, Blob, endpoint, $async) {
     $scope.endpoint = endpoint;
     $scope.isAdmin = Authentication.isAdmin();
 
@@ -54,14 +54,39 @@ angular.module('portainer.docker').controller('ImagesController', [
         });
     };
 
-    $scope.confirmRemovalAction = function (selectedItems, force) {
+    $scope.confirmForceRemove = confirmForceRemove;
-      confirmImageForceRemoval().then((confirmed) => {
+    function confirmForceRemove(selectedItems, force) {
+      return $async(async () => {
+        const confirmed = await 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.',
+          confirmButton: buildConfirmButton('Remove the image', 'danger'),
+        });
+
         if (!confirmed) {
           return;
         }
+
         $scope.removeAction(selectedItems, force);
       });
-    };
+    }
+
+    $scope.confirmRemove = confirmRemove;
+    function confirmRemove(selectedItems) {
+      return $async(async () => {
+        const confirmed = await 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?',
+          confirmButton: buildConfirmButton('Remove the image', 'danger'),
+        });
+
+        if (!confirmed) {
+          return;
+        }
+
+        $scope.removeAction(selectedItems, false);
+      });
+    }
 
     function isAuthorizedToDownload(selectedItems) {
       for (var i = 0; i < selectedItems.length; i++) {
@@ -161,12 +186,3 @@ angular.module('portainer.docker').controller('ImagesController', [
     initView();
   },
 ]);
-
-function confirmImageForceRemoval() {
-  return confirm({
-    title: 'Are you sure?',
-    modalType: ModalType.Destructive,
-    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.',
-    confirmButton: buildConfirmButton('Remove the image', 'danger'),
-  });
-}

app/edge/views/edge-stacks/edgeStacksView/edgeStacksViewController.js

@@ -1,4 +1,6 @@
 import _ from 'lodash-es';
+import { confirmDestructive } from '@@/modals/confirm';
+import { buildConfirmButton } from '@@/modals/utils';
 
 export class EdgeStacksViewController {
   /* @ngInject */
@@ -25,6 +27,16 @@ export class EdgeStacksViewController {
   }
 
   async removeActionAsync(stacks) {
+    const confirmed = await confirmDestructive({
+      title: 'Are you sure?',
+      message: 'Are you sure you want to remove the selected Edge stack(s)?',
+      confirmButton: buildConfirmButton('Remove', 'danger'),
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
     for (let stack of stacks) {
       try {
         await this.EdgeStackService.remove(stack.Id);

app/portainer/views/groups/groupsController.js

@@ -1,5 +1,7 @@
 import angular from 'angular';
 import _ from 'lodash-es';
+import { confirmDestructive } from '@@/modals/confirm';
+import { buildConfirmButton } from '@@/modals/utils';
 
 angular.module('portainer.app').controller('GroupsController', GroupsController);
 
@@ -11,6 +13,16 @@ function GroupsController($scope, $state, $async, GroupService, Notifications) {
   }
 
   async function removeActionAsync(selectedItems) {
+    const confirmed = await confirmDestructive({
+      title: 'Are you sure?',
+      message: 'Are you sure you want to remove the selected environment group(s)?',
+      confirmButton: buildConfirmButton('Remove', 'danger'),
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
     for (let group of selectedItems) {
       try {
         await GroupService.deleteGroup(group.Id);

app/portainer/views/tags/tagsController.js

@@ -1,5 +1,7 @@
 import angular from 'angular';
 import _ from 'lodash-es';
+import { confirmDestructive } from '@@/modals/confirm';
+import { buildConfirmButton } from '@@/modals/utils';
 
 angular.module('portainer.app').controller('TagsController', TagsController);
 
@@ -30,6 +32,16 @@ function TagsController($scope, $state, $async, TagService, Notifications) {
   }
 
   async function removeActionAsync(tags) {
+    const confirmed = await confirmDestructive({
+      title: 'Are you sure?',
+      message: 'Are you sure you want to remove the selected tag(s)?',
+      confirmButton: buildConfirmButton('Remove', 'danger'),
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
     for (let tag of tags) {
       try {
         await TagService.deleteTag(tag.Id);