Skip to content

Fix file mount UI update issues#954

Merged
hanzjk merged 2 commits into
wso2:mainfrom
hanzjk:oc-1.0.1
May 25, 2026
Merged

Fix file mount UI update issues#954
hanzjk merged 2 commits into
wso2:mainfrom
hanzjk:oc-1.0.1

Conversation

@hanzjk
Copy link
Copy Markdown
Contributor

@hanzjk hanzjk commented May 25, 2026

Purpose

Describe the problems, issues, or needs driving this feature/fix and include links to related issues in the following format: Resolves issue1, issue2, etc.

Goals

Describe the solutions that this feature/fix will introduce to resolve the problems described above

Approach

Describe how you are implementing the solutions. Include an animated GIF or screenshot if the change affects the UI (email documentation@wso2.com to review all UI text). Include a link to a Markdown file or Google doc if the feature write-up is too long to paste here.

User stories

Summary of user stories addressed by this change>

Release note

Brief description of the new feature or bug fix as it will appear in the release notes

Documentation

Link(s) to product documentation that addresses the changes of this PR. If no doc impact, enter �N/A� plus brief explanation of why there�s no doc impact

Training

Link to the PR for changes to the training content in https://github.com/wso2/WSO2-Training, if applicable

Certification

Type �Sent� when you have provided new/updated certification questions, plus four answers for each question (correct answer highlighted in bold), based on this change. Certification questions/answers should be sent to certification@wso2.com and NOT pasted in this PR. If there is no impact on certification exams, type �N/A� and explain why.

Marketing

Link to drafts of marketing content that will describe and promote this feature, including product page changes, technical articles, blog posts, videos, etc., if applicable

Automation tests

  • Unit tests

    Code coverage information

  • Integration tests

    Details about the test cases and coverage

Security checks

Samples

Provide high-level details about the samples related to this feature

Related PRs

List any other related PRs

Migrations (if applicable)

Describe migration steps and platforms on which migration has been tested

Test environment

List all JDK versions, operating systems, databases, and browser/versions on which this feature/fix was tested

Learning

Describe the research phase and any blog posts, patterns, libraries, or add-ons you used to solve the problem.

Summary by CodeRabbit

  • New Features

    • Added explicit edit mode for file mounts with state restoration on cancel.
    • File content can now be edited and restored to its previous state when canceled.
  • UI Changes

    • Updated file mount editor to display a collapsed view when not editing and expanded editor view only during editing.
    • Replaced icon-based controls with text "Cancel" and "Update" buttons for existing items.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 25, 2026

Warning

Review limit reached

@hanzjk, we couldn't start this review because you've used your available PR reviews for now.

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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 21b5f883-d079-4d00-9532-d6cb36e2c4e7

📥 Commits

Reviewing files that changed from the base of the PR and between bdd5ad2 and eaeaccb.

📒 Files selected for processing (2)
  • console/workspaces/libs/shared-component/src/components/FileMountSection.tsx
  • console/workspaces/libs/views/src/component/FileMountEditor/FileMountEditor.tsx
📝 Walkthrough

Walkthrough

FileMountEditor refactors from secret-locked inline editing to explicit edit-mode state machine with snapshot restoration. Parent FileMountSection wires a cancel callback that resets edit flags, coordinating the collapse back to read-only display.

Changes

Edit-Mode State Machine

Layer / File(s) Summary
Edit-mode contract and state machine
console/workspaces/libs/views/src/component/FileMountEditor/FileMountEditor.tsx
FileMountEditorProps adds optional onSecretEditCancel callback. Icon imports updated to include CheckIcon. Core state machine introduced: isEditing boolean and snapshot enable enter/cancel/update handlers; canceling restores fields from snapshot and invokes optional callback.
Collapsed and expanded UI rendering
console/workspaces/libs/views/src/component/FileMountEditor/FileMountEditor.tsx
When not editing, component returns collapsed read-only row with file name, mount path, secret indicator, and edit/delete actions. When editing, expanded view shows "File Content" input with state-dependent placeholder/type, always-visible file upload controls and error alert, and "Cancel"/"Update" buttons for non-new items.
Parent callback integration
console/workspaces/libs/shared-component/src/components/FileMountSection.tsx
FileMountSection passes onSecretEditCancel handler to each FileMountEditor, resetting isSecretEdited flag to false for the corresponding file mount by index when cancel is invoked.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 The editor now knows when to show, when to hide,
Edit modes dance with snapshots as guide,
Cancel restores what once was before,
Parent whispers callbacks, no secrets ignored anymore! 📝✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The pull request description contains only template placeholders with no substantive content—all sections remain as boilerplate questions with no answers provided. Fill in the template sections with actual details: Purpose (state the UI issues being fixed), Goals, Approach (explain the state machine refactor), test coverage, and security checks.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: refactoring file mount UI components to fix state management issues with secret editing and cancel-to-restore behavior.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 lift

Avoid using the array index for FileMountEditor’s key and onSecretEditCancel target in FileMountSection.

In console/workspaces/libs/shared-component/src/components/FileMountSection.tsx (lines 87-107), FileMountEditor is keyed with file-${index} and onSecretEditCancel clears isSecretEdited by 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 React key and 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

📥 Commits

Reviewing files that changed from the base of the PR and between ebf2f34 and bdd5ad2.

📒 Files selected for processing (2)
  • console/workspaces/libs/shared-component/src/components/FileMountSection.tsx
  • console/workspaces/libs/views/src/component/FileMountEditor/FileMountEditor.tsx

Comment thread console/workspaces/libs/views/src/component/FileMountEditor/FileMountEditor.tsx Outdated
Comment thread console/workspaces/libs/views/src/component/FileMountEditor/FileMountEditor.tsx Outdated
@hanzjk hanzjk merged commit dcb4732 into wso2:main May 25, 2026
5 checks passed
RAVEENSR pushed a commit to RAVEENSR/agent-manager that referenced this pull request May 27, 2026
Fix file mount UI update issues
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants