fix: config profile form focus loss and path validation messages
- Fix React key stability in env vars, files, and mount file inputs to prevent focus loss on every keystroke - Improve validation error messages to explain Files vs Mounts - Add helper text in UI clarifying relative vs absolute paths Fixes focus loss bug and improves UX for path validation errors.
This commit is contained in:
@@ -343,8 +343,8 @@ export const ConfigProfilesPage = () => {
|
||||
|
||||
<div className="form-section">
|
||||
<h4>Environment Variables</h4>
|
||||
{Object.entries(formData.env_vars || {}).map(([key, value]) => (
|
||||
<div key={key} className="form-row">
|
||||
{Object.entries(formData.env_vars || {}).map(([key, value], idx) => (
|
||||
<div key={idx} className="form-row">
|
||||
<input
|
||||
type="text"
|
||||
value={key}
|
||||
@@ -387,8 +387,9 @@ export const ConfigProfilesPage = () => {
|
||||
|
||||
<div className="form-section">
|
||||
<h4>Files</h4>
|
||||
{Object.entries(formData.files || {}).map(([path, content]) => (
|
||||
<div key={path} className="file-entry">
|
||||
<p className="muted">Relative paths written to the instance directory. Use Mounts below for absolute container paths.</p>
|
||||
{Object.entries(formData.files || {}).map(([path, content], idx) => (
|
||||
<div key={idx} className="file-entry">
|
||||
<input
|
||||
type="text"
|
||||
value={path}
|
||||
@@ -414,6 +415,7 @@ export const ConfigProfilesPage = () => {
|
||||
|
||||
<div className="form-section">
|
||||
<h4>Mounts</h4>
|
||||
<p className="muted">Bind directories into the container at absolute paths. Files are relative to the mount target.</p>
|
||||
{(formData.mounts || []).map((mount, index) => (
|
||||
<div key={index} className="mount-entry card">
|
||||
<div className="form-row">
|
||||
@@ -442,8 +444,8 @@ export const ConfigProfilesPage = () => {
|
||||
</div>
|
||||
|
||||
<div className="mount-files">
|
||||
{Object.entries(mount.files).map(([path, content]) => (
|
||||
<div key={path} className="file-entry">
|
||||
{Object.entries(mount.files).map(([path, content], idx) => (
|
||||
<div key={idx} className="file-entry">
|
||||
<input
|
||||
type="text"
|
||||
value={path}
|
||||
|
||||
Reference in New Issue
Block a user