fix(ide): show toast errors when code view cannot open element#3106
fix(ide): show toast errors when code view cannot open element#3106guangyang1206 wants to merge 1 commit into
Conversation
When 'View in Code' was clicked and the underlying metadata lookup failed (no active branch, missing branch data, or element metadata not yet indexed), the IdeManager silently logged console warnings and returned with no user feedback — leaving users confused about why nothing happened. Add actionable toast.error() messages for each early-return path so users receive clear feedback: - 'no active branch' → prompt to wait for project load - 'no branch data' → prompt branch data unavailable - 'no element metadata' → prompt project may still be indexing Fixes onlook-dev#318
|
@guangyang1206 is attempting to deploy a commit to the Onlook Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
📝 WalkthroughWalkthrough
ChangesError Notification Enhancement
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/client/src/components/store/editor/ide/index.ts`:
- Around line 23-39: Replace the three hardcoded toast.error strings with
localized next-intl message keys (e.g., ide.noActiveBranch, ide.noBranchData,
ide.noElementMetadata) by using the injected translator/util in this component
(or inject one if missing) instead of raw text; update the calls around
this.editorEngine.branches.getBranchDataById(activeBranchId) and
branchData.codeEditor.getJsxElementMetadata(oid) to call the translator (e.g.,
t('ide.noActiveBranch')) and pass those results into toast.error, and add the
corresponding keys to the next-intl messages for the component.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 06e6f9ea-f6af-4208-a06f-933d09b6c117
📒 Files selected for processing (1)
apps/web/client/src/components/store/editor/ide/index.ts
| toast.error('Cannot open code view — no active branch is loaded yet.'); | ||
| return; | ||
| } | ||
|
|
||
| const branchData = this.editorEngine.branches.getBranchDataById(activeBranchId); | ||
| if (!branchData) { | ||
| console.warn(`[IdeManager] No branch data found for branchId: ${activeBranchId}`); | ||
| toast.error('Cannot open code view — branch data is unavailable.'); | ||
| return; | ||
| } | ||
|
|
||
| // Get element metadata | ||
| const metadata = await branchData.codeEditor.getJsxElementMetadata(oid); | ||
| if (!metadata) { | ||
| console.warn(`[IdeManager] No metadata found for OID: ${oid}`); | ||
| toast.error('Cannot open code view — element metadata not found. The project may still be indexing; try again in a moment.'); | ||
| return; |
There was a problem hiding this comment.
Replace hardcoded toast messages with localized next-intl keys.
Lines 23, 30, and 38 introduce hardcoded user-facing copy. Please source these messages from next-intl (via injected translator/util), so they’re localizable and consistent with app i18n.
Suggested direction
- toast.error('Cannot open code view — no active branch is loaded yet.');
+ toast.error(t('ide.openCodeBlock.noActiveBranch'));
- toast.error('Cannot open code view — branch data is unavailable.');
+ toast.error(t('ide.openCodeBlock.noBranchData'));
- toast.error('Cannot open code view — element metadata not found. The project may still be indexing; try again in a moment.');
+ toast.error(t('ide.openCodeBlock.metadataNotFound'));As per coding guidelines, "Avoid hardcoded user-facing text; use next-intl messages/hooks instead".
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/client/src/components/store/editor/ide/index.ts` around lines 23 -
39, Replace the three hardcoded toast.error strings with localized next-intl
message keys (e.g., ide.noActiveBranch, ide.noBranchData, ide.noElementMetadata)
by using the injected translator/util in this component (or inject one if
missing) instead of raw text; update the calls around
this.editorEngine.branches.getBranchDataById(activeBranchId) and
branchData.codeEditor.getJsxElementMetadata(oid) to call the translator (e.g.,
t('ide.noActiveBranch')) and pass those results into toast.error, and add the
corresponding keys to the next-intl messages for the component.
1 participant
When 'View in Code' was clicked and the underlying metadata lookup failed (no active branch, missing branch data, or element metadata not yet indexed), the IdeManager silently logged console warnings and returned with no user feedback — leaving users confused about why nothing happened.
Add actionable toast.error() messages for each early-return path so users receive clear feedback:
Fixes #318
Description
When users click the "View in Code" button (or right-click → "View instance code") and the underlying
metadata lookup fails,
IdeManager.openCodeBlock()silently logs aconsole.warnand returns —leaving users with zero feedback about why nothing happened. This is the core of the UX problem
reported in #318 (originally about detecting missing VS Code / Cursor; the equivalent silent-failure
issue in the current web-based code panel is metadata being unavailable).
Changes
apps/web/client/src/components/store/editor/ide/index.tstoastfrom@onlook/ui/sonnerreturnearly-exits withtoast.error(…)messages:"Cannot open code view — no active branch is loaded yet.""Cannot open code view — branch data is unavailable.""Cannot open code view — element metadata not found. The project may still be indexing; try again in a moment."Why this matters
Users coming from component selection to code navigation have no indication when the code view
fails silently. The toast gives actionable context ("project may still be indexing") and matches
the UX pattern already used elsewhere in the store layer (e.g.,
branch/manager.ts).Related Issues
Fixes #318
Type of Change
Testing
Summary by CodeRabbit