fix(metadata): add mutli endpoint delete api EE-6872 (#11550)

app/react/portainer/environments/ListView/ListView.tsx

@@ -1,8 +1,6 @@
 import { useStore } from 'zustand';
-import _ from 'lodash';
 
 import { environmentStore } from '@/react/hooks/current-environment-store';
-import { notifySuccess } from '@/portainer/services/notifications';
 
 import { PageHeader } from '@@/PageHeader';
 import { confirmDelete } from '@@/modals/confirm';
@@ -44,15 +42,11 @@ export function ListView() {
     }
 
     deletionMutation.mutate(
-      environments.map((e) => e.Id),
-      {
-        onSuccess() {
-          notifySuccess(
-            'Environments successfully removed',
-            _.map(environments, 'Name').join(', ')
-          );
-        },
-      }
+      environments.map((e) => ({
+        id: e.Id,
+        deleteCluster: false,
+        name: e.Name,
+      }))
     );
   }
 }

app/react/portainer/environments/ListView/useDeleteEnvironmentsMutation.ts

@@ -1,12 +1,9 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { promiseSequence } from '@/portainer/helpers/promise-utils';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
-import {
-  mutationOptions,
-  withError,
-  withInvalidate,
-} from '@/react-tools/react-query';
+import { withError } from '@/react-tools/react-query';
+import { notifyError, notifySuccess } from '@/portainer/services/notifications';
+import { pluralize } from '@/portainer/helpers/strings';
 
 import { buildUrl } from '../environment.service/utils';
 import { EnvironmentId } from '../types';
@@ -14,22 +11,54 @@ import { EnvironmentId } from '../types';
 export function useDeleteEnvironmentsMutation() {
   const queryClient = useQueryClient();
   return useMutation(
-    (environments: EnvironmentId[]) =>
-      promiseSequence(
-        environments.map(
-          (environmentId) => () => deleteEnvironment(environmentId)
-        )
-      ),
-    mutationOptions(
-      withError('Unable to delete environment(s)'),
-      withInvalidate(queryClient, [['environments']])
-    )
+    async (
+      environments: {
+        id: EnvironmentId;
+        name: string;
+        deleteCluster?: boolean;
+      }[]
+    ) => {
+      const resps = await deleteEnvironments(environments);
+      const successfulDeletions = resps.filter((r) => r.err === null);
+      const failedDeletions = resps.filter((r) => r.err !== null);
+      return { successfulDeletions, failedDeletions };
+    },
+    {
+      ...withError('Unable to delete environment(s)'),
+      onSuccess: ({ successfulDeletions, failedDeletions }) => {
+        queryClient.invalidateQueries(['environments']);
+        // show an error message for each env that failed to delete
+        failedDeletions.forEach((deletion) => {
+          notifyError(
+            `Failed to remove environment`,
+            new Error(deletion.err ? deletion.err.Message : '') as Error
+          );
+        });
+        // show one summary message for all successful deletes
+        if (successfulDeletions.length) {
+          notifySuccess(
+            `${pluralize(
+              successfulDeletions.length,
+              'Environment'
+            )} successfully removed`,
+            successfulDeletions.map((deletion) => deletion.name).join(', ')
+          );
+        }
+      },
+    }
   );
 }
 
-async function deleteEnvironment(id: EnvironmentId) {
+async function deleteEnvironments(
+  environments: { id: EnvironmentId; deleteCluster?: boolean }[]
+) {
   try {
-    await axios.delete(buildUrl(id));
+    const { data } = await axios.post<
+      { name: string; err: { Message: string } | null }[]
+    >(buildUrl(undefined, 'remove'), {
+      environments,
+    });
+    return data;
   } catch (e) {
     throw parseAxiosError(e as Error, 'Unable to delete environment');
   }