Fix file mount UI update issues#954
Conversation
|
Warning Review limit reached
Your plan includes 1 review of capacity. Refill in 49 minutes and 3 seconds. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more review capacity refills, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthrough
ChangesEdit-Mode State Machine
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 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 |
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
console/workspaces/libs/shared-component/src/components/FileMountSection.tsx (1)
87-89:⚠️ Potential issue | 🟠 Major | 🏗️ Heavy liftAvoid using the array index for
FileMountEditor’skeyandonSecretEditCanceltarget inFileMountSection.In
console/workspaces/libs/shared-component/src/components/FileMountSection.tsx(lines 87-107),FileMountEditoris keyed withfile-${index}andonSecretEditCancelclearsisSecretEditedby matching the positional index (i === index). With row add/remove/reorder, React can reuse the wrong instance and the cancel action can update the wrong item—use a stable per-row id (e.g.,item.id) for both the Reactkeyand the cancel/update logic.🤖 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 `@console/workspaces/libs/shared-component/src/components/FileMountSection.tsx` around lines 87 - 89, The FileMountEditor instances are keyed and referenced by the array index which breaks stability on add/remove/reorder; update FileMountSection to use a stable per-row identifier (e.g., item.id) instead of `index` for the React `key` on <FileMountEditor> and change the cancel/edit logic in `onSecretEditCancel` / any `isSecretEdited` checks to match by `item.id` (or another unique id field) rather than `i === index`, ensuring the correct row instance is targeted when cancelling or updating secrets.
🤖 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
`@console/workspaces/libs/views/src/component/FileMountEditor/FileMountEditor.tsx`:
- Around line 59-60: The code computes isNew from live field values, so it
changes after edits; capture the initial "new" state once at mount and use that
immutable flag for isEditing initialization and cancel/update behavior. Create a
stable flag (e.g., useRef to store the initial isNew) and initialize isEditing
with that flag (useState(initialIsNewRef.current)), then update Cancel/Update
logic to read the immutable initial flag (initialIsNewRef.current) instead of
recomputing isNew. Apply the same change to the other instance referenced around
the 240-249 block so both places use the captured initialIsNewRef rather than
live field-derived isNew.
- Around line 63-66: The snapshot currently saved in useState only captures key,
mountPath, and content in handleEnableEditing, so toggling "Mark as Secret"
(isSensitive) isn't preserved; update the snapshot to include isSensitive (e.g.,
snapshot type -> { key, mountPath, content, isSensitive }), setSnapshot in
handleEnableEditing to capture the current isSensitive value, and when restoring
on cancel (the logic that reads snapshot and reapplies fields at cancel/restore)
make sure it also reapplies isSensitive so the secret toggle is correctly rolled
back.
- Around line 68-71: The current logic in FileMountEditor.tsx sets
isEditingSecret and then calls onContentChange('') for existing sensitive
secrets, which improperly marks secrets as edited when the user merely enters
edit mode; remove the onContentChange('') call from the block that runs when
isExistingSecret && isSensitive and instead only invoke onContentChange from the
actual user input/change handler (e.g., the secret input's onChange or onSave
flow) so that a secret is marked edited only when the user modifies it; update
any related handlers (the secret input change handler or save handler) to handle
initializing/clearing content explicitly when the user performs an action.
---
Outside diff comments:
In
`@console/workspaces/libs/shared-component/src/components/FileMountSection.tsx`:
- Around line 87-89: The FileMountEditor instances are keyed and referenced by
the array index which breaks stability on add/remove/reorder; update
FileMountSection to use a stable per-row identifier (e.g., item.id) instead of
`index` for the React `key` on <FileMountEditor> and change the cancel/edit
logic in `onSecretEditCancel` / any `isSecretEdited` checks to match by
`item.id` (or another unique id field) rather than `i === index`, ensuring the
correct row instance is targeted when cancelling or updating secrets.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 35c892af-423f-4e3b-a493-32a3da38ddc1
📒 Files selected for processing (2)
console/workspaces/libs/shared-component/src/components/FileMountSection.tsxconsole/workspaces/libs/views/src/component/FileMountEditor/FileMountEditor.tsx
Fix file mount UI update issues
Purpose
Goals
Approach
User stories
Release note
Documentation
Training
Certification
Marketing
Automation tests
Security checks
Samples
Related PRs
Migrations (if applicable)
Test environment
Learning
Summary by CodeRabbit
New Features
UI Changes