Bug RHOAIENG-39096: Fix race condition when deleting projects quickly (#546)

## Summary

Fixes a race condition that occurred when deleting multiple projects in
quick succession.

## Problem

When deleting two projects rapidly:
1. First deletion invalidates `projectKeys.lists()`
2. This triggers a refetch of the project list from backend
3. Second deletion happens before the refetch completes
4. State becomes inconsistent, causing "project not found" errors

## Solution

Implemented optimistic updates with proper error handling in the
`useDeleteProject` hook:

- **Optimistic updates**: Projects are immediately removed from the
cache before the API call completes
- **Cancel in-flight queries**: Prevents race conditions by canceling
any ongoing refetches
- **Proper rollback**: Restores previous state on errors (except 404s,
which are fine)
- **Handles both response types**: Works with paginated and legacy list
query responses
- **Updates totalCount**: Correctly decrements count in paginated
responses
- **Idempotent deletion**: Silently ignores "not found" errors (project
already deleted)

## Testing

- ✅ Frontend builds successfully with no TypeScript errors
- ✅ Linting passes without issues
- ✅ Projects are removed from UI immediately on deletion
- ✅ Multiple rapid deletions no longer cause race conditions
- ✅ Error handling properly restores state on non-404 failures

## Files Changed

- `components/frontend/src/services/queries/use-projects.ts`

## Related Issue

https://issues.redhat.com/browse/RHOAIENG-39096

Co-authored-by: Ambient Code <ambient-code@users.noreply.github.com>
Co-authored-by: Claude (claude-sonnet-4-5) <noreply@anthropic.com>

Author: 3 people

components/frontend/src/services/queries/use-projects.ts

@@ -98,17 +98,71 @@ export function useUpdateProject() {
 
 /**
  * Hook to delete a project
+ *
+ * Implements optimistic updates to prevent race conditions when deleting
+ * multiple projects in quick succession.
  */
 export function useDeleteProject() {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: (name: string) => projectsApi.deleteProject(name),
+    onMutate: async (name) => {
+      // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
+      await queryClient.cancelQueries({ queryKey: projectKeys.lists() });
+
+      // Snapshot all list queries for rollback on error
+      const previousQueries = new Map<string, unknown>();
+      const queries = queryClient.getQueriesData({ queryKey: projectKeys.lists() });
+      queries.forEach(([queryKey, data]) => {
+        previousQueries.set(JSON.stringify(queryKey), data);
+      });
+
+      // Optimistically remove the project from all list queries
+      queryClient.setQueriesData(
+        { queryKey: projectKeys.lists() },
+        (old: unknown) => {
+          // Handle paginated response
+          if (old && typeof old === 'object' && 'items' in old) {
+            const paginatedData = old as { items: Project[]; totalCount?: number };
+            return {
+              ...paginatedData,
+              items: paginatedData.items.filter((p) => p.name !== name),
+              totalCount: paginatedData.totalCount ? paginatedData.totalCount - 1 : undefined,
+            };
+          }
+          // Handle legacy array response
+          if (Array.isArray(old)) {
+            return old.filter((p: Project) => p.name !== name);
+          }
+          return old;
+        }
+      );
+
+      // Return context with the snapshots
+      return { previousQueries };
+    },
+    onError: (err, name, context) => {
+      // Check if this is a "not found" error (which is fine during deletion)
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      const isNotFoundError =
+        errorMessage.toLowerCase().includes('not found') ||
+        errorMessage.includes('404');
+
+      // Only rollback if it's NOT a "not found" error
+      if (!isNotFoundError && context?.previousQueries) {
+        // Restore all previous query states
+        context.previousQueries.forEach((data, keyString) => {
+          const queryKey = JSON.parse(keyString);
+          queryClient.setQueryData(queryKey, data);
+        });
+      }
+      // Silently ignore "not found" errors during deletion - the project is already gone
+    },
     onSuccess: (_data, name) => {
-      // Remove from cache
+      // Remove the detailed project query from cache
       queryClient.removeQueries({ queryKey: projectKeys.detail(name) });
-      // Invalidate lists
-      queryClient.invalidateQueries({ queryKey: projectKeys.lists() });
+      // No need to invalidate lists - already optimistically updated
     },
   });
 }