Fix: Use Authenticated API for Frontend File Downloads

[google-labs-jules]

This change addresses a bug where the frontend file download mechanism was not sending authentication headers. The fix involves updating the frontend to use an authenticated API client to fetch the file as a blob and then initiating the download from the browser. Unit tests have been added to verify the new functionality.

---

PR created automatically by Jules for task 5205579993703176681

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

---

For security, I will only act on instructions from the user who triggered this task.

[github-actions]

🚀 Development Environment Options

This repository supports Dev Containers for a consistent development environment.

Option 1: GitHub Codespaces (Recommended)

Create a cloud-based development environment:

1. Click the green Code button above
2. Select the Codespaces tab
3. Click Create codespace on fix-frontend-download-auth
4. Wait 2-3 minutes for environment setup
5. Start coding with all tools pre-configured!

Option 2: VS Code Dev Containers (Local)

Use Dev Containers on your local machine:

1. Install Docker Desktop
2. Install VS Code
3. Install the Dev Containers extension
4. Clone this PR branch locally
5. Open in VS Code and click "Reopen in Container" when prompted

Option 3: Traditional Local Setup

Set up the development environment manually:

# Clone the repository
git clone https://github.com/manavgup/rag_modulo.git
cd rag_modulo
git checkout fix-frontend-download-auth

# Initialize development environment
make dev-init
make dev-build
make dev-up
make dev-validate

Available Commands

Once in your development environment:

make help           # Show all available commands
make dev-validate   # Validate environment setup
make test-atomic    # Run atomic tests
make test-unit      # Run unit tests
make lint          # Run linting

Services Available

When running make dev-up:

• Backend API: http://localhost:8000
• Frontend: http://localhost:3000
• MLflow: http://localhost:5001

---

This automated message helps reviewers quickly set up the development environment.

[claude]

Pull Request Review: Fix Frontend File Downloads with Authentication

Overview

This PR addresses an authentication bug in the frontend file download mechanism. The changes update the download flow to use an authenticated API client instead of creating direct download links.

---

Strengths

1. Security Improvement: The fix properly addresses the authentication issue by routing downloads through the authenticated apiClient instead of using direct URLs without auth headers.

2. Good Test Coverage: Comprehensive unit tests added for both success and error scenarios in LightweightCollectionDetail.test.tsx.

3. Proper Resource Cleanup: The implementation correctly cleans up blob URLs using window.URL.revokeObjectURL() to prevent memory leaks.

4. Consistent Error Handling: Error notifications are properly displayed to users when downloads fail.

---

Issues and Concerns

Critical: Missing Backend Endpoint

The frontend is calling apiClient.downloadDocument(collection.id, file.id) which maps to GET /api/collections/{collectionId}/documents/{documentId}/download

However, I cannot find this endpoint in the backend codebase. I reviewed backend/rag_solution/router/collection_router.py and other routers - No matching endpoint found.

Action Required:

• Verify the backend endpoint exists at the expected path
• If it does not exist, this PR will not work and needs a backend implementation
• If it exists in a different location, please document where

Test Quality Issues

1. Incomplete DOM Interaction Verification (LightweightCollectionDetail.test.tsx:84)

The test only verifies a link element was created, but does not verify:

• The link href was set to the blob URL
• The link download attribute was set to the filename
• The link was clicked
• The link was removed from the DOM
• revokeObjectURL was called

2. Missing Test Coverage:

• No test for null/undefined collection scenario
• No test for blob creation failure
• No test for revokeObjectURL being called

Code Quality

1. Potential Race Condition (LightweightCollectionDetail.tsx:164)

While there is an early return for !collection, if collection becomes null between the check and the API call, this could fail. Consider using a local reference to prevent this race condition.

2. Missing Type Definition: Ensure TypeScript interfaces are properly updated for the downloadDocument method.

Performance Considerations

The blob download approach is correct for authenticated downloads, but consider:

• Large files will be loaded entirely into memory before download starts
• No progress indication for large file downloads
• Consider adding file size warnings or streaming for very large files

Security Notes

Good: Downloads now require authentication
Good: Using blob URLs prevents direct file path exposure
Consider: Add Content-Disposition header verification on backend to prevent XSS via filename manipulation

---

Recommendations

1. CRITICAL: Verify/implement the backend download endpoint before merging
2. HIGH: Improve test coverage to verify complete download flow
3. MEDIUM: Add progress indication for large file downloads
4. MEDIUM: Consider adding file size limits or warnings in the UI
5. LOW: Add JSDoc comments to the new downloadDocument method

---

Testing Checklist

Before merging, please verify:

• Backend endpoint /api/collections/{id}/documents/{doc_id}/download exists and requires authentication
• Download works for various file types (PDF, images, text, etc.)
• Download works for files with special characters in names
• Download works for large files (>10MB)
• Error handling works when backend is unavailable
• Error handling works when user lacks permission to download
• Blob cleanup properly prevents memory leaks in long-running sessions

---

Minor Notes

1. Verification Script (jules-scratch/verification/verify_download.py): Good to include manual verification, but this file should probably not be committed to the main repo.

2. Jest Configuration (package.json): The addition of transformIgnorePatterns is correct for handling ES modules in axios, but ensure this does not break other tests.

---

Verdict

HOLD - Cannot approve until the backend endpoint existence is confirmed. The frontend implementation looks reasonable, but it will fail at runtime if the backend does not support this endpoint.

Once the backend endpoint is confirmed/implemented, the remaining issues are mostly minor improvements that could be addressed in follow-up work.