Fix: race conditions for deletions

src/lib/actions/analytics.ts

@@ -277,6 +277,7 @@ export enum Submit {
     DatabaseDelete = 'submit_database_delete',
     DatabaseUpdateName = 'submit_database_update_name',
     DatabaseImportCsv = 'submit_database_import_csv',
+    DatabaseBackupDelete = 'submit_database_backup_delete',
 
     ColumnCreate = 'submit_column_create',
     ColumnUpdate = 'submit_column_update',

src/lib/components/multiSelectTable.svelte

@@ -1,5 +1,13 @@
 <script lang="ts" module>
-    export type DeleteOperationState = Error | void;
+    export type DeleteOperationState = {
+        error?: Error;
+        deleted: string[];
+    } | void;
+
+    export type DeleteOperation = (
+        deleteFn: (id: string) => Promise<unknown>,
+        batchSize?: number
+    ) => Promise<Exclude<DeleteOperationState, void>>;
 </script>
 
 <script lang="ts">
@@ -40,7 +48,14 @@
         children: Snippet<[root: TableRootProps]>;
         deleteContent?: Snippet<[count: number]>;
         deleteContentNotice?: Snippet;
-        onDelete?: (selectedRows: string[]) => Promise<DeleteOperationState> | DeleteOperationState;
+        onDelete?: (
+            batchDelete: DeleteOperation,
+            /**
+             * this is useful when you have a custom deletion logic
+             * and the default `batchDelete` helper doesn't fit the use-case!
+             */
+            selectedRows: string[]
+        ) => Promise<DeleteOperationState> | DeleteOperationState;
         onCancel?: () => Promise<void> | void;
     } = $props();
 
@@ -49,10 +64,8 @@
     let onDeleteError: string | null = $state(null);
     let showConfirmDeletion: boolean = $state(false);
 
-    function notifySuccess() {
+    function notifySuccess(count: number) {
         if (!showSuccessNotification) return;
-
-        const count = selectedRows.length;
         if (count === 0) return;
 
         const label = `${resource}${count > 1 ? 's' : ''}`;
@@ -71,6 +84,75 @@
 
         return `${resource}s`;
     }
+
+    async function batchDelete(
+        ids: string[],
+        deleteFn: (id: string) => Promise<unknown>,
+        batchSize: number | undefined = undefined
+    ): Promise<Exclude<DeleteOperationState, void>> {
+        const deleted: string[] = [];
+        let firstError: Error | undefined;
+
+        // prevent infinite loop
+        if (batchSize !== undefined) {
+            batchSize = Math.max(1, Math.floor(Math.abs(batchSize)));
+        }
+
+        async function processBatch(batch: string[]) {
+            // build promises
+            const results = await Promise.allSettled(batch.map((id) => deleteFn(id)));
+
+            results.forEach((result, index) => {
+                if (result.status === 'fulfilled') {
+                    // success, log it!
+                    deleted.push(batch[index]);
+                } else if (!firstError) {
+                    // error
+                    firstError =
+                        result.reason instanceof Error
+                            ? result.reason
+                            : new Error(String(result.reason));
+                }
+            });
+        }
+
+        // batch when needed.
+        // example: >= 100 items to delete!
+        if (batchSize && batchSize < ids.length) {
+            for (let i = 0; i < ids.length; i += batchSize) {
+                const batch = ids.slice(i, i + batchSize);
+                await processBatch(batch);
+            }
+        } else {
+            await processBatch(ids);
+        }
+
+        return {
+            deleted,
+            error: firstError
+        };
+    }
+
+    async function consumeDeleteOperation() {
+        const state = await onDelete?.((deleteFn, batchSize) => {
+            return batchDelete(selectedRows, deleteFn, batchSize);
+        }, selectedRows);
+
+        if (!state) {
+            return false;
+        }
+
+        const deletedCount = state.deleted.length;
+        selectedRows = selectedRows.filter((id) => !state.deleted.includes(id));
+
+        if (state.error) {
+            onDeleteError = `Some ${getPluralResource()} were not deleted. Error: ${state.error.message}`;
+            return false;
+        }
+
+        notifySuccess(deletedCount);
+        return true;
+    }
 </script>
 
 {#key computeKey}
@@ -104,13 +186,7 @@
                         if (confirmDeletion) {
                             showConfirmDeletion = true;
                         } else {
-                            const state = await onDelete?.(selectedRows);
-                            if (state instanceof Error) {
-                                // user should handle error on their own!
-                            } else {
-                                notifySuccess();
-                                selectedRows = [];
-                            }
+                            await consumeDeleteOperation();
                         }
                     }}>Delete</Button>
             </svelte:fragment>
@@ -129,16 +205,13 @@
                 disableModal = true;
                 onDeleteError = null;
 
-                const state = await onDelete?.(selectedRows);
-                if (state instanceof Error) {
-                    disableModal = false;
-                    onDeleteError = state.message || `Failed to delete ${resource}s`;
-                } else {
-                    notifySuccess();
-                    selectedRows = [];
-                    disableModal = false;
+                const allDeleted = await consumeDeleteOperation();
+
+                if (allDeleted) {
                     showConfirmDeletion = false;
                 }
+
+                disableModal = false;
             }}>
             <Typography.Text>
                 {@const selectionCount = selectedRows.length}

src/routes/(console)/project-[region]-[project]/auth/+page.svelte

@@ -9,6 +9,7 @@
     import {
         AvatarInitials,
         Copy,
+        type DeleteOperation,
         type DeleteOperationState,
         Empty,
         EmptySearch,
@@ -60,20 +61,22 @@
         );
     }
 
-    async function handleDelete(selectedRows: string[]): Promise<DeleteOperationState> {
-        const promises = selectedRows.map((userId) => {
-            return sdk.forProject(page.params.region, page.params.project).users.delete({ userId });
-        });
+    async function handleDelete(batchDelete: DeleteOperation): Promise<DeleteOperationState> {
+        const result = await batchDelete((userId) =>
+            sdk.forProject(page.params.region, page.params.project).users.delete({ userId })
+        );
 
         try {
-            await Promise.all(promises);
-            trackEvent(Submit.UserDelete, { total: selectedRows.length });
-        } catch (error) {
-            trackError(error, Submit.UserDelete);
-            return error;
+            if (result.error) {
+                trackError(result.error, Submit.UserDelete);
+            } else {
+                trackEvent(Submit.UserDelete, { total: result.deleted.length });
+            }
         } finally {
             await invalidate(Dependencies.USERS);
         }
+
+        return result;
     }
 </script>
 

src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte

@@ -12,6 +12,7 @@
         SearchQuery,
         PaginationWithLimit,
         type DeleteOperationState,
+        type DeleteOperation,
         MultiSelectionTable
     } from '$lib/components';
     import Create from '../createTeam.svelte';
@@ -44,20 +45,22 @@
         );
     };
 
-    async function handleDelete(selectedRows: string[]): Promise<DeleteOperationState> {
-        const promises = selectedRows.map((teamId) => {
-            return sdk.forProject(page.params.region, page.params.project).teams.delete({ teamId });
-        });
+    async function handleDelete(batchDelete: DeleteOperation): Promise<DeleteOperationState> {
+        const result = await batchDelete((teamId) =>
+            sdk.forProject(page.params.region, page.params.project).teams.delete({ teamId })
+        );
 
         try {
-            await Promise.all(promises);
-            trackEvent(Submit.TeamDelete, { total: selectedRows.length });
-        } catch (error) {
-            trackError(error, Submit.TeamDelete);
-            return error;
+            if (result.error) {
+                trackError(result.error, Submit.TeamDelete);
+            } else {
+                trackEvent(Submit.TeamDelete, { total: result.deleted.length });
+            }
         } finally {
             await invalidate(Dependencies.TEAMS);
         }
+
+        return result;
     }
 </script>
 

src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/members/+page.svelte

@@ -6,6 +6,7 @@
         AvatarInitials,
         PaginationWithLimit,
         MultiSelectionTable,
+        type DeleteOperation,
         type DeleteOperationState
     } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -29,23 +30,25 @@
     let showDelete = $state(false);
     let selectedMembership: Models.Membership | null = $state(null);
 
-    async function handleBulkDelete(selectedRows: string[]): Promise<DeleteOperationState> {
-        const promises = selectedRows.map((membershipId) => {
-            return sdk.forProject(page.params.region, page.params.project).teams.deleteMembership({
+    async function handleBulkDelete(batchDelete: DeleteOperation): Promise<DeleteOperationState> {
+        const result = await batchDelete((membershipId) =>
+            sdk.forProject(page.params.region, page.params.project).teams.deleteMembership({
                 teamId: page.params.team,
                 membershipId
-            });
-        });
+            })
+        );
 
         try {
-            await Promise.all(promises);
-            trackEvent(Submit.MembershipUpdate, { total: selectedRows.length });
-        } catch (error) {
-            trackError(error, Submit.MembershipUpdate);
-            return error;
+            if (result.error) {
+                trackError(result.error, Submit.MembershipUpdate);
+            } else {
+                trackEvent(Submit.MembershipUpdate, { total: result.deleted.length });
+            }
         } finally {
             await invalidate(Dependencies.MEMBERSHIPS);
         }
+
+        return result;
     }
 </script>
 

src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/table.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-    import { type DeleteOperationState, Id, MultiSelectionTable } from '$lib/components';
+    import {
+        type DeleteOperationState,
+        type DeleteOperation,
+        Id,
+        MultiSelectionTable
+    } from '$lib/components';
     import type { PageData } from './$types';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
     import { sdk } from '$lib/stores/sdk';
@@ -21,22 +26,24 @@
         columns: Column[];
     } = $props();
 
-    async function handleDelete(selectedRows: string[]): Promise<DeleteOperationState> {
-        const promises = selectedRows.map((id) => {
-            return sdk
+    async function handleDelete(batchDelete: DeleteOperation): Promise<DeleteOperationState> {
+        const result = await batchDelete((id) =>
+            sdk
                 .forProject(page.params.region, page.params.project)
-                .users.deleteIdentity({ identityId: id });
-        });
+                .users.deleteIdentity({ identityId: id })
+        );
 
         try {
-            await Promise.all(promises);
-            trackEvent(Submit.UserIdentityDelete, { total: selectedRows.length });
-        } catch (error) {
-            trackError(error, Submit.UserIdentityDelete);
-            return error;
+            if (result.error) {
+                trackError(result.error, Submit.UserIdentityDelete);
+            } else {
+                trackEvent(Submit.UserIdentityDelete, { total: result.deleted.length });
+            }
         } finally {
             await invalidate(Dependencies.USER_IDENTITIES);
         }
+
+        return result;
     }
 </script>
 

src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte

@@ -4,6 +4,7 @@
     import {
         AvatarInitials,
         type DeleteOperationState,
+        type DeleteOperation,
         MultiSelectionTable
     } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -23,29 +24,31 @@
     let showDelete = $state(false);
     let selectedMembership: Models.Membership | null = $state(null);
 
-    async function handleBulkDelete(selectedRows: string[]): Promise<DeleteOperationState> {
+    async function handleBulkDelete(batchDelete: DeleteOperation): Promise<DeleteOperationState> {
         // Precompute a lookup map from membershipId to teamId for efficient access
         const membershipIdToTeamId: Record<string, string> = {};
         for (const membership of data.memberships.memberships) {
             membershipIdToTeamId[membership.$id] = membership.teamId;
         }
 
-        const promises = selectedRows.map((membershipId) =>
+        const result = await batchDelete((membershipId) =>
             sdk.forProject(page.params.region, page.params.project).teams.deleteMembership({
                 teamId: membershipIdToTeamId[membershipId] || '',
                 membershipId
             })
         );
 
         try {
-            await Promise.all(promises);
-            trackEvent(Submit.MembershipUpdate, { total: selectedRows.length });
-        } catch (error) {
-            trackError(error, Submit.MembershipUpdate);
-            return error;
+            if (result.error) {
+                trackError(result.error, Submit.MembershipUpdate);
+            } else {
+                trackEvent(Submit.MembershipUpdate, { total: result.deleted.length });
+            }
         } finally {
             await invalidate(Dependencies.MEMBERSHIPS);
         }
+
+        return result;
     }
 </script>