feat(FR-1014): implement text file editor for NEO File Explorer #4966

limshyun · 2026-01-07T08:49:46Z

Summary

Implement the ability to directly edit and save simple text files within the NEO File Explorer.

Background

Users frequently need to modify configuration files such as yaml, toml, and json within vfolders for model serving. Currently, this requires downloading the file → editing locally → re-uploading, which results in a poor user experience.

Implementation

Key Features

Edit button in More menu: Added dropdown menu with edit option in File Explorer controls
Text file detection: Supports .txt, .md, .json, .yaml, .yml, .xml, .csv, .js, .ts, .jsx, .tsx, .py, .sh, .bash, .html, .css, .scss, .less, .sql, .log, .env, .conf, .config, .ini, .toml
CodeMirror editor: Full-featured text editor with syntax highlighting
File operations: Download → Edit → Upload workflow using existing APIs

Components Added

TextFileEditorModal.tsx: Main editor modal with BAICodeEditor
Enhanced FileItemControls.tsx: Added More menu with Edit option
Enhanced BAIFileExplorer.tsx: Added enableEdit and onClickEditFile props
Updated FolderExplorerModal.tsx: Integration with TextFileEditorModal

Technical Details

File Reading: request_download_token → fetch → blob.text()
File Saving: Modified content → new File() → FileUploadManager.uploadFiles() (overwrites)
Permissions: Requires write_content permission
Size Limit: baiClient._config.maxFileUploadSize

i18n Support

comp:FileExplorer.EditFile: "Edit"
data.explorer.EditFile: "Edit File"
`data.explorer.FailedToLoadFile": "Failed to load file"

Checklist:

Documentation (PR description)
Minimum required manager version (N/A - client-side feature)
Specific setting for review: Test with various text files in File Explorer
Minimum requirements: write_content permission on vfolder
Test cases: Edit .txt, .yaml, .json files; verify save/cancel functionality

test

2026-01-09.5.48.50.mov

cla-assistant · 2026-01-07T08:50:04Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

cla-assistant · 2026-01-07T08:50:05Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

github-actions · 2026-01-07T08:51:36Z

Coverage report for `./packages/backend.ai-ui`

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	62.41% (-1.09% 🔻)	259/415
🔴	Branches	41.83% (-0.47% 🔻)	151/361
🔴	Functions	48.94% (-1.06% 🔻)	46/94
🟡	Lines	64.01% (-1.14% 🔻)	233/364

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🟡	helper/index.ts	61.01% (-2.88% 🔻)	43.75% (-1.12% 🔻)	53.33% (-3.81% 🔻)	64.06% (-3.46% 🔻)

Test suite run success

186 tests passing in 9 suites.

Report generated by 🧪jest coverage report action from db0061c

github-actions · 2026-01-07T08:52:20Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	4.9% (-0.02% 🔻)	589/12026
🔴	Branches	4.46% (-0.02% 🔻)	377/8462
🔴	Functions	2.74% (-0.01% 🔻)	101/3687
🔴	Lines	4.73% (-0.01% 🔻)	555/11744

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🔴	`...` / TextFileEditorModal.tsx	0%	0%	0%	0%

Test suite run success

173 tests passing in 13 suites.

Report generated by 🧪jest coverage report action from db0061c

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…ext files

…files

…editor

…button

limshyun · 2026-01-08T03:43:27Z

This PR continues the work from #4943, which was closed during Jira issue number correction (FR-1869 → FR-1014). @nowgnuesLee Could you please tag Copilot as a reviewer? The previous Copilot review comments on #4943 were very helpful and we'd like to continue addressing them here.

packages/backend.ai-ui/src/components/baiClient/FileExplorer/FileItemControls.tsx

react/src/components/TextFileEditorModal.tsx

…props

…ions - Replace useEffect-based file loading with useTanQuery - Replace manual save handling with useTanMutation - Add useErrorMessageResolver for standardized error handling - Replace Button with BAIButton in FileItemControls - Add Tooltip to More options dropdown button - Replace Typography.Text with BAIText - Replace Alert with BAIAlert - Make onRequestClose success parameter optional

ironAiken2

When I edit one file, the editor shows the changes made to other files. And I think it would be good to include the text file editing feature in the BUI. What do you think?

packages/backend.ai-ui/src/components/baiClient/FileExplorer/FileItemControls.tsx

react/src/components/TextFileEditorModal.tsx

…anagement - Use BAIButton action prop for automatic loading state in download button - Replace isEdited state with null-check pattern for cleaner content tracking - Add user-friendly error messages with BAILogger for detailed error logging - Add FailedToLoadFileDescription i18n key for all 21 supported languages - Replace useMutation with useTanMutation for consistency - Remove unnecessary Tooltip wrapper from more options dropdown

- Add tooltip to explain why file editing is disabled for unsupported formats - Show tooltip when file is a directory or not a text file - Add UnsupportedFileFormat i18n key to all 21 locale files

agatha197

Screen.Recording.Jan.9.2026.from.Graphite.mov

When I edit the text file, the file browser is closed and frozen. I cannot re-open the file browser before refreshing. I made the text file by this way.

In the terminal, touch test.txt
Add some contents
Upload that file

limshyun · 2026-01-09T08:48:15Z

3.

Screen.Recording.Jan.9.2026.from.Graphite.mov
When I edit the text file, the file browser is closed and frozen. I cannot re-open the file browser before refreshing. I made the text file by this way.

In the terminal, touch test.txt

Add some contents

Upload that file

This issue has been fixed in commit fc42770. The problem was that the getLanguageFromExtension function was returning raw file extensions (like txt, md, py) directly to CodeMirror, but CodeMirror doesn't recognize these as valid language names. This caused CodeMirror to fail when trying to load syntax highlighting, which froze the file browser.

The fix includes:

Created a proper extensionToLanguageMap that maps file extensions to valid CodeMirror language names (e.g., txt → markdown, py → python, sh → shell)
Added a new getCodeMirrorLanguage helper function that returns the correct CodeMirror language name
Moved this logic to the shared backend.ai-ui package for reusability
Please pull the latest changes and try again. If you still experience the issue after updating, let me know.

github-actions bot assigned limshyun Jan 7, 2026

github-actions bot added area:ux UI / UX issue. area:i18n Localization size:L 100~500 LoC labels Jan 7, 2026

limshyun and others added 10 commits January 8, 2026 12:36

feat(i18n): add EditFile translation to all locale files

cc2b62c

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

feat(FileExplorer): add file edit menu item

788065b

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

fix(FileExplorer): add stopPropagation to prevent event bubbling

a7c4cf5

🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

feat(TextFileEditor): add TextFileEditorModal component for editing t…

d55d08d

…ext files

feat(TextFileEditor): implement file save functionality

108203b

feat(i18n): add EditFile and FailedToLoadFile translations

3b40ebb

feat(FileExplorer): add enableEdit prop to disable edit for non-text …

786dc5e

…files

style(TextFileEditor): make modal full width with min-width for code …

40aab9e

…editor

refactor(FileExplorer): extract TEXT_FILE_EXTENSIONS to shared helper

ad69a0c

feat(FileExplorer): add aria-label for accessibility on more options …

2029a95

…button

limshyun force-pushed the feat/FR-1014/text-file-editor branch from 34bddf9 to 2029a95 Compare January 8, 2026 03:37

limshyun requested review from agatha197, ironAiken2, nowgnuesLee and yomybaby January 8, 2026 09:40

nowgnuesLee requested changes Jan 8, 2026

View reviewed changes

limshyun added 2 commits January 9, 2026 11:19

refactor(FileItemControls): add use memo directive and clean up icon …

0bee9f0

…props

limshyun requested a review from nowgnuesLee January 9, 2026 03:28

ironAiken2 requested changes Jan 9, 2026

View reviewed changes

feat(FileExplorer): add tooltip for unsupported file format in edit menu

d8514bc

- Add tooltip to explain why file editing is disabled for unsupported formats - Show tooltip when file is a directory or not a text file - Add UnsupportedFileFormat i18n key to all 21 locale files

limshyun requested a review from ironAiken2 January 9, 2026 07:24

agatha197 requested changes Jan 9, 2026

View reviewed changes

limshyun added 2 commits January 9, 2026 17:39

refactor(TextFileEditor): add proper CodeMirror language mapping

fc42770

feat(BAICodeEditor): add dynamic theme based on site light/dark mode

db0061c

limshyun requested a review from agatha197 January 9, 2026 08:48

feat(FR-1014): implement text file editor for NEO File Explorer #4966

Are you sure you want to change the base?

feat(FR-1014): implement text file editor for NEO File Explorer #4966

Conversation

limshyun commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Background

Implementation

Key Features

Components Added

Technical Details

i18n Support

test

Uh oh!

cla-assistant bot commented Jan 7, 2026

Uh oh!

cla-assistant bot commented Jan 7, 2026

Uh oh!

github-actions bot commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./packages/backend.ai-ui

Test suite run success

Uh oh!

github-actions bot commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./react

Test suite run success

Uh oh!

limshyun commented Jan 8, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ironAiken2 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

agatha197 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

limshyun commented Jan 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

limshyun commented Jan 7, 2026 •

edited

Loading

github-actions bot commented Jan 7, 2026 •

edited

Loading

Coverage report for `./packages/backend.ai-ui`

github-actions bot commented Jan 7, 2026 •

edited

Loading

Coverage report for `./react`

ironAiken2 left a comment •

edited

Loading

agatha197 left a comment •

edited

Loading