Bug RHOAIENG-46360: Fix session deletion delay with optimistic updates

[Gkrumbach07]

Summary

Fixes session deletion delay by implementing optimistic updates in the useDeleteSession React Query hook.

Problem

Users experienced a delay when deleting sessions - after clicking OK on the confirmation popup, it took several seconds for the session to disappear from the UI. The click appeared unresponsive because the UI waited for the backend DELETE request to complete.

Root Cause

The useDeleteSession hook in components/frontend/src/services/queries/use-sessions.ts only performed cache invalidation after the backend responded (in onSuccess). There was no optimistic update, so users had to wait for the network request to complete before seeing any UI change.

Solution

Implemented optimistic updates with proper error rollback:

Changes to useDeleteSession hook:

• onMutate: Immediately removes the session from all cached queries before the API call

  • Cancels ongoing refetches to prevent race conditions
  • Snapshots previous data for rollback capability
  • Handles both paginated (ListAgenticSessionsPaginatedResponse) and non-paginated (array) list formats
  • Updates all query variants (different pagination params)

• onError: Restores all previous query data if the deletion fails

  • Ensures users see the session reappear if backend fails
  • Provides proper error handling and rollback

• onSuccess: Cleans up and ensures cache consistency

  • Removes detail query from cache
  • Marks list queries as stale (non-blocking)

Benefits

• ✅ Instant UI feedback - Session disappears immediately when user clicks OK
• ✅ Better UX - No more waiting for network requests
• ✅ Error resilience - Session reappears if deletion fails
• ✅ Type-safe - Proper TypeScript type guards
• ✅ Race condition prevention - Queries are cancelled before updates

Testing

• Verified type safety with AgenticSession type guards
• Verified error rollback logic handles failures correctly
• Verified support for both paginated and legacy list formats
• Verified race condition prevention via query cancellation
• Code reviewed for proper error handling

Jira

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

Files Changed

• components/frontend/src/services/queries/use-sessions.ts (useDeleteSession hook)

Complexity

Medium - Standard React Query optimistic update pattern

Estimated Effort

1-2 hours (investigation + implementation)

[github-actions]

Claude Code Review

Summary

This PR implements optimistic updates for session deletion to provide instant UI feedback. The implementation follows React Query best practices with proper type guards, error rollback, and cache invalidation.

Issues by Severity

Critical Issues

1. Missing Type Import for ListAgenticSessionsPaginatedResponse
Lines 243-248 check for paginated format but the type is not imported. While it works via duck typing, it violates type safety standards.

2. Inconsistent Cache Invalidation
Lines 277-280 use refetchType: none which differs from all other mutations that use refetchType: all. Should document this decision or change for consistency.

Major Issues

3. Fragile Query Key Access
Line 238 hardcodes queryKey[2]. If sessionKeys.list format changes, this breaks silently.

Minor Issues

4. Unused projectName in onError - Line 262
5. Missing User Error Notification - Session reappears on error but no toast/alert
6. No Automated Tests - Complex logic should have unit tests

Positive Highlights

✅ Excellent problem analysis
✅ Proper React Query patterns
✅ Race condition prevention
✅ Error resilience with rollback
✅ Handles both paginated and legacy formats
✅ Updates all query variants
✅ Good type narrowing
✅ Consistent code style

Recommendations

Priority 1:

1. Add ListAgenticSessionsPaginatedResponse import and type guard
2. Document or change refetchType decision

Priority 2:
3. Add user error notification
4. Make query key access type-safe

Priority 3:
5. Add automated tests

Final Verdict

✅ Approve with Minor Changes - Solid implementation. Critical issues are minor type safety improvements.

Great work on the UX improvement!

---

🔍 View AI decision process (logs available for 90 days)

📋 View memory system files loaded (click to expand)

What Amber Loaded for Code Review

Amber automatically loaded these repository standards from the memory system:

1. CLAUDE.md - Master project instructions, development standards
2. backend-development.md - Go backend, K8s integration patterns
3. frontend-development.md - NextJS, Shadcn UI, React Query patterns
4. security-standards.md - Auth, RBAC, token handling
5. k8s-client-usage.md - User token vs service account patterns
6. error-handling.md - Consistent error patterns
7. react-query-usage.md - Data fetching patterns

Impact: This review used your repository's specific code quality standards, security patterns, and best practices from the memory system (PRs #359, #360) - not just generic code review guidelines.