feat(FR-3154): add reusable BAIVFolderMountConfigInput component

[nowgnuesLee]

Stacked on #7931 · Part of FR-3059 (#7756) · Resolves FR-3154

Summary

• Add BAIVFolderMountConfigInput, a reusable, schema-agnostic controlled input for configuring vfolder mounts (packages/backend.ai-ui/src/components/fragments/).
• Composes BAIVFolderSelect (multiple) to pick folders; each selected folder renders as a row below the select with:
  • a mount destination (alias) input — path inside the container (empty falls back to /home/work/{name}),
  • an optional subpath free-text input — which subfolder of the vfolder to mount as the source (empty = root),
  • a remove (✕) button.
• Emits a single VFolderMountConfigValue[] value via value / onChange, so it wraps in one Form.Item and the consumer maps it to any mount mutation input. No GraphQL/schema coupling.
• Inline validation: alias format (^[a-zA-Z0-9_/.-]*$), alias overlap between folders, and relative-subpath / no-.. checks.
• Adds BUI i18n keys (comp:BAIVFolderMountConfigInput) for en and ko.

Notes

• Standalone component only. Wiring it into session creation / Deployment revision pages is a follow-up (out of scope for this stack, per the spec).

Verification (scripts/verify.sh)

• Relay / Lint / Format: PASS
• backend.ai-ui package tsc --noEmit: 0 errors
• The single TypeScript failure reported by verify.sh is pre-existing on main (unrelated Relay input-type mismatch in react/src/pages/AdminDeploymentPresetSettingPage.tsx, service.port: number | null vs number) and is not introduced by this PR.

Test plan

• Selecting multiple vfolders adds a row per folder with alias + subpath inputs
• Remove (✕) clears the row and its alias/subpath values
• Invalid alias format, overlapping mount paths, and invalid subpath show inline errors
• Empty mount destination shows the effective default path as helper text

[nowgnuesLee]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(FR-3155): add Storybook story for BAIVFolderMountConfigInput #7933
• feat(FR-3154): add reusable BAIVFolderMountConfigInput component #7932 👈 (View in Graphite)
• docs(FR-3153): add VFolder mount subpath/alias config component spec #7931
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage Report for backend-ai-ui-coverage (./packages/backend.ai-ui)

Status	Category	Percentage	Covered / Total
🔵	Lines	10.77%	558 / 5181
🔵	Statements	9.09%	621 / 6830
🔵	Functions	11.81%	137 / 1160
🔵	Branches	7.58%	507 / 6688

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/backend.ai-ui/src/components/fragments/BAIVFolderMountConfigInput.tsx	0%	0%	0%	0%	52-438
packages/backend.ai-ui/src/components/fragments/BAIVFolderSelect.tsx	0%	0%	0%	0%	52-377
packages/backend.ai-ui/src/components/fragments/index.ts	100%	100%	100%	100%

Generated in workflow #2279 for commit 6ab430b by the Vitest Coverage Report Action

[Copilot]

Pull request overview

Adds a new reusable Backend.AI UI fragment component to configure vfolder mounts (alias/mount destination + optional subpath) as a single controlled VFolderMountConfigValue[] payload, intended to be schema-agnostic and embeddable in a single Form.Item.

Changes:

• Added BAIVFolderMountConfigInput fragment component composing BAIVFolderSelect (multi) and per-folder alias/subpath inputs with inline validation UI.
• Exported the new component + types from the fragments barrel.
• Added comp:BAIVFolderMountConfigInput i18n keys across BUI locale JSONs (with localized strings for en/ko and English fallbacks elsewhere).

Reviewed changes

Copilot reviewed 23 out of 23 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/backend.ai-ui/src/locale/zh-TW.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/zh-CN.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/vi.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/tr.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/th.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/ru.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/pt.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/pt-BR.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/pl.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/ms.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/mn.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/ko.json	Adds localized Korean strings for comp:BAIVFolderMountConfigInput.
packages/backend.ai-ui/src/locale/ja.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/it.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/id.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/fr.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/fi.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/es.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/en.json	Adds English strings for comp:BAIVFolderMountConfigInput.
packages/backend.ai-ui/src/locale/el.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/locale/de.json	Adds comp:BAIVFolderMountConfigInput strings (English fallback).
packages/backend.ai-ui/src/components/fragments/index.ts	Re-exports BAIVFolderMountConfigInput and its public types.
packages/backend.ai-ui/src/components/fragments/BAIVFolderMountConfigInput.tsx	Implements the reusable controlled mount-config input UI and validation display.

[agatha197]

Review — actionable items

This is an additive BUI primitive with no consumer wired yet, so none of these block today. Listing what should be fixed before the first consumer wires it in.

Correctness

• Single source of truth for mountDestination. Display/validation recompute the destination every render (destinationByVFolderId, ~L197-205 / L307-313), but the emitted value uses the stored entry.mountDestination written across four handlers. These can diverge. Please settle on one — emit the recomputed value, or validate the stored one.
• onChange updates name without recomputing mountDestination (~L267-270). The existing-entry branch returns { ...existing, name: resolvedName } while leaving mountDestination at ${basePath}${uuid}. Because onResolvedNamesChange is guarded by !entry.name, the UI self-corrects but the emitted value can still carry the UUID-based path. Recompute via inputToMountDestination(...) in that branch.
• Alias inputs desync on external value re-drive (~L133-160). aliasInputs re-seeds only via the selectedIdsKey (id-set) effect and preserves existing ids verbatim. If a controlled parent re-drives value with the same vfolderId set but different mountDestinations (reset/discard, async setFieldsValue), the local alias text goes stale. Reconcile against a destinations digest, re-deriving next[id] when the stored mountDestination no longer matches the local alias (mirrors VFolderTable's aliasMap reconcile).

Parity / contract

• Missing auto-mount collision check (destinationCounts, ~L193-198). Only within-selection overlap is detected. The legacy VFolderTable this component claims to mirror also rejects collisions with auto-mounted (dotfile) folders (FolderAliasOverlappingToAutoMount). Either accept the auto-mount folder names as a prop and include them in the overlap set, or document the limitation in the JSDoc.
• Validation contract is advisory-only. The overlap/alias validators are module-private and the emitted VFolderMountConfigValue[] exposes no validity surface, so the JSDoc "wrap in one Form.Item" guidance is misleading (that wrapper gets no rules). Please either export the validators or expose a status / onValidityChange surface, and correct the JSDoc accordingly.

i18n

• 19 locales were seeded with verbatim English (locale/{ja,th,de,…}.json, 11 keys × 19 = 209 English values). This diverges from the full-translation precedent (FR-3032). Please run fw:i18n before merge, or scope this PR to en + ko and let the translation flow backfill the rest — avoid committing English into non-en files.

UI / layout

• Remove (✕) button vertical alignment. The row uses align="start", so when the alias column shows its helper text (the resolved /home/work/... path) the row grows taller and the ✕ button sticks to the top instead of lining up with the inputs. Please vertically center the ✕ with the input row (e.g. align it to the input height rather than the full, helper-text-inclusive row height).

  

Nit

• Use named gap tokens. gap={token.sizeXXS} (L208, L289, L320) should be gap="xxs" to match the BUI convention (the file already mixes both).

[nowgnuesLee]

Review — actionable items

This is an additive BUI primitive with no consumer wired yet, so none of these block today. Listing what should be fixed before the first consumer wires it in.

Correctness

• Single source of truth for mountDestination. Display/validation recompute the destination every render (destinationByVFolderId, ~L197-205 / L307-313), but the emitted value uses the stored entry.mountDestination written across four handlers. These can diverge. Please settle on one — emit the recomputed value, or validate the stored one.
• onChange updates name without recomputing mountDestination (~L267-270). The existing-entry branch returns { ...existing, name: resolvedName } while leaving mountDestination at ${basePath}${uuid}. Because onResolvedNamesChange is guarded by !entry.name, the UI self-corrects but the emitted value can still carry the UUID-based path. Recompute via inputToMountDestination(...) in that branch.
• Alias inputs desync on external value re-drive (~L133-160). aliasInputs re-seeds only via the selectedIdsKey (id-set) effect and preserves existing ids verbatim. If a controlled parent re-drives value with the same vfolderId set but different mountDestinations (reset/discard, async setFieldsValue), the local alias text goes stale. Reconcile against a destinations digest, re-deriving next[id] when the stored mountDestination no longer matches the local alias (mirrors VFolderTable's aliasMap reconcile).

Parity / contract

• Missing auto-mount collision check (destinationCounts, ~L193-198). Only within-selection overlap is detected. The legacy VFolderTable this component claims to mirror also rejects collisions with auto-mounted (dotfile) folders (FolderAliasOverlappingToAutoMount). Either accept the auto-mount folder names as a prop and include them in the overlap set, or document the limitation in the JSDoc.
• Validation contract is advisory-only. The overlap/alias validators are module-private and the emitted VFolderMountConfigValue[] exposes no validity surface, so the JSDoc "wrap in one Form.Item" guidance is misleading (that wrapper gets no rules). Please either export the validators or expose a status / onValidityChange surface, and correct the JSDoc accordingly.

i18n

• 19 locales were seeded with verbatim English (locale/{ja,th,de,…}.json, 11 keys × 19 = 209 English values). This diverges from the full-translation precedent (FR-3032). Please run fw:i18n before merge, or scope this PR to en + ko and let the translation flow backfill the rest — avoid committing English into non-en files.

UI / layout

• Remove (✕) button vertical alignment. The row uses align="start", so when the alias column shows its helper text (the resolved /home/work/... path) the row grows taller and the ✕ button sticks to the top instead of lining up with the inputs. Please vertically center the ✕ with the input row (e.g. align it to the input height rather than the full, helper-text-inclusive row height).

  

Nit

• Use named gap tokens. gap={token.sizeXXS} (L208, L289, L320) should be gap="xxs" to match the BUI convention (the file already mixes both).

​I applied. Thanks!

[agatha197]

A couple of consistency nits on the columnLabel header helper — see the inline comment. Both are about reusing the existing shared help-icon component and dropping the hardcoded pixel size.

[agatha197]

One more nit on the remove-icon size — see inline.