fixed background image not showing at desktop application (electron) #342
Conversation
📝 WalkthroughWalkthroughReplaces ad-hoc server URL building with a new getAuthenticatedImageUrl helper and updates UI components and a test to use it for authenticated image URLs and consistent cache-busting behavior. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (2)**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
🧬 Code graph analysis (1)apps/ui/tests/context/add-context-image.spec.ts (1)
🔇 Additional comments (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @yumesha, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request resolves a critical issue in the Electron desktop application where background images failed to load due to a recent change enforcing mandatory API authentication. By introducing a new utility function to construct image URLs with authentication credentials embedded as query parameters, the application can now correctly fetch and display images, bypassing the limitation of browsers not sending custom headers for image requests. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
@coderabbitai generate docstrings |
✅ Actions performedInitiated docstring generation; will generate only if new commits exist. |
|
Note Docstrings generation - SUCCESS |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request effectively resolves a critical bug where background images were not loading in the Electron application due to newly enforced authentication on API endpoints. The fix is well-designed, introducing a centralized helper function getAuthenticatedImageUrl to construct image URLs with the necessary API key as a query parameter. This is the correct approach for authenticating requests made via <img> tags or CSS properties. The new function is cleanly implemented and has been consistently applied across all relevant components, improving code maintainability while fixing the authentication issue.
Docstrings generation was requested by @yumesha. * #342 (comment) The following files were modified: * `apps/ui/src/components/dialogs/board-background-modal.tsx` * `apps/ui/src/components/ui/description-image-dropzone.tsx` * `apps/ui/src/components/views/board-view/hooks/use-board-background.ts` * `apps/ui/src/lib/api-fetch.ts`
|
@claude try to fix the e2e tests on this pr |
|
Claude finished @webdevcody's task in 5m 12s —— View job E2E Test Fix - Ready for Manual ApplicationRoot Cause IdentifiedThe failing test was Problem: The test used manual UI-based authentication instead of the SolutionUpdate lines 119-136 in Replace this: test('should import an image file to context', async ({ page }) => {
await setupProjectWithFixture(page, getFixturePath());
await page.goto('/');
await waitForNetworkIdle(page);
// Check if we're on the login screen and authenticate if needed
const loginInput = page.locator('input[type="password"][placeholder*="API key"]');
const isLoginScreen = await loginInput.isVisible({ timeout: 2000 }).catch(() => false);
if (isLoginScreen) {
const apiKey = process.env.AUTOMAKER_API_KEY || 'test-api-key-for-e2e-tests';
await loginInput.fill(apiKey);
await page.locator('button:has-text("Login")').click();
await page.waitForURL('**/', { timeout: 5000 });
await waitForNetworkIdle(page);
}
await navigateToContext(page);With this: test('should import an image file to context', async ({ page }) => {
await setupProjectWithFixture(page, getFixturePath());
await authenticateForTests(page);
await page.goto('/');
await waitForNetworkIdle(page);
await navigateToContext(page);This aligns with how other working context tests (like Why I Couldn't PushThis PR appears to be from a fork ( @webdevcody or @yumesha - Please apply the above fix manually to the PR branch. It's a simple 13-line reduction that replaces manual auth with the proper helper function. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/ui/tests/context/add-context-image.spec.ts (1)
121-121: Verify authentication succeeded.The
authenticateForTestsfunction returns a boolean indicating success, but this return value is not checked. If authentication fails silently, the test will fail later with less actionable error messages when image upload requests receive 401 responses.🔎 Suggested improvement
- await authenticateForTests(page); + const authenticated = await authenticateForTests(page); + expect(authenticated).toBe(true);
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/ui/tests/context/add-context-image.spec.ts
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Always import from shared packages (@automaker/*), never from old relative paths
Files:
apps/ui/tests/context/add-context-image.spec.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
resolveModelString()from @automaker/model-resolver to convert model aliases (haiku, sonnet, opus) to full model names
Files:
apps/ui/tests/context/add-context-image.spec.ts
🧬 Code graph analysis (1)
apps/ui/tests/context/add-context-image.spec.ts (1)
apps/ui/tests/utils/api/client.ts (1)
authenticateForTests(357-361)
🔇 Additional comments (1)
apps/ui/tests/context/add-context-image.spec.ts (1)
119-148: Test structure and authentication flow look good.The authentication is correctly positioned after project setup and before navigation. The test properly handles file creation/cleanup and uses appropriate Playwright patterns for waiting and assertions.
2 participants
The Breaking Commit:
d68de99
Author: Test User test@example.com
Date: Mon Dec 29 16:16:28 2025 -0500
"adding more security to api endpoints to require api token for all access, no by passing"
What Changed:
Before this commit, the auth middleware had:
// If no API key is configured, allow all requests
if (!API_KEY) {
next();
return;
}
After this commit, authentication became mandatory for all /api routes - no more bypassing. The middleware now auto-generates an API key and requires either:
Timeline:
The board background code built URLs like:
/api/fs/image?path=...&projectPath=...
But browsers can't send custom headers when loading images, and the code didn't include the apiKey query parameter, so requests got 401.
Summary by CodeRabbit
Refactor
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.