feat(FN-3402): address shell connection feedback in NativeShellConnectionMa

Addressed shell connection feedback for FN-3402 in Step 6, updating the NativeShellConnectionManager component and its test file with expanded test coverage and refinements based on review comments.

Fusion-Task-Id: FN-3402
This commit is contained in:
Fusion
2026-05-06 14:05:18 -07:00
committed by gsxdsm
parent bef30d6d55
commit d8f75202e9
2 changed files with 70 additions and 7 deletions

View File

@@ -14,14 +14,19 @@ export function NativeShellConnectionManager({ open, shellApi, shellState, onClo
() => shellState.profiles.find((profile) => profile.id === shellState.activeProfileId) ?? null,
[shellState.activeProfileId, shellState.profiles],
);
const [editingProfileId, setEditingProfileId] = useState<string | null>(null);
const [draft, setDraft] = useState<Partial<ShellConnectionProfile>>({});
const [error, setError] = useState<string | null>(null);
if (!open) return null;
const workingName = draft.name ?? activeProfile?.name ?? "";
const workingUrl = draft.serverUrl ?? activeProfile?.serverUrl ?? "";
const workingToken = draft.authToken ?? activeProfile?.authToken ?? "";
const isAddingConnection = editingProfileId === "__new__";
const editingProfile = isAddingConnection
? null
: shellState.profiles.find((profile) => profile.id === editingProfileId) ?? activeProfile;
const workingName = draft.name ?? editingProfile?.name ?? "";
const workingUrl = draft.serverUrl ?? editingProfile?.serverUrl ?? "";
const workingToken = draft.authToken ?? editingProfile?.authToken ?? "";
const saveCurrent = async () => {
setError(null);
@@ -32,12 +37,13 @@ export function NativeShellConnectionManager({ open, shellApi, shellState, onClo
throw new Error("Server URL must use http or https");
}
const saved = await shellApi.saveProfile({
id: activeProfile?.id,
id: isAddingConnection ? undefined : (editingProfileId ?? editingProfile?.id),
name: workingName || "Remote Server",
serverUrl: workingUrl,
authToken: workingToken || null,
});
await shellApi.setActiveProfile(saved.id);
setEditingProfileId(saved.id);
setDraft({});
} catch (nextError) {
setError((nextError as Error).message);
@@ -69,7 +75,17 @@ export function NativeShellConnectionManager({ open, shellApi, shellState, onClo
<div className="settings-muted">{profile.serverUrl}</div>
</div>
<div className="native-shell-connection-manager__profile-actions">
<button type="button" className="btn btn-sm" aria-label={`Edit ${profile.name}`} onClick={() => setDraft(profile)}>Edit</button>
<button
type="button"
className="btn btn-sm"
aria-label={`Edit ${profile.name}`}
onClick={() => {
setEditingProfileId(profile.id);
setDraft(profile);
}}
>
Edit
</button>
<button type="button" className="btn btn-sm" aria-label={`Use ${profile.name}`} onClick={() => void shellApi.setActiveProfile(profile.id)}>Use</button>
<button type="button" className="btn btn-sm btn-danger" aria-label={`Delete ${profile.name}`} onClick={() => void shellApi.deleteProfile(profile.id)}>Delete</button>
</div>
@@ -77,6 +93,25 @@ export function NativeShellConnectionManager({ open, shellApi, shellState, onClo
))}
</div>
<div className="native-shell-connection-manager__mode-row">
<button
type="button"
className="btn"
onClick={() => {
setEditingProfileId("__new__");
setDraft({ name: "", serverUrl: "", authToken: "" });
setError(null);
}}
>
Add connection
</button>
{shellState.host === "mobile-shell" && (
<button type="button" className="btn" onClick={() => void shellApi.startQrScan()}>
Scan QR
</button>
)}
</div>
<div className="form-group native-shell-connection-manager__editor">
<label htmlFor="native-shell-connection-manager-name">Name</label>
<input id="native-shell-connection-manager-name" className="input" value={workingName} onChange={(event) => setDraft((value) => ({ ...value, name: event.target.value }))} />