Mobile Settings: machine editor SheetForm (Slice 7)
Below md, the machine editor Dialog renders as a SheetForm (triggered by the same Edit/Add buttons via machineDialogOpen state). The shared MachineEditor body (fields + SSH validate button) renders inside the sheet; the ConfirmDialog is a sibling outside. Desktop Dialog is byte-for-byte identical. No navigation needed on close -- the Settings page content (tabbed cards, machine list) is always visible behind the sheet, so there is no stranding risk (unlike ServicePage where the sheet was the whole page). Added saveDisabled prop to SheetForm (additive, default false) so the machine editor can gate Save on required fields (name + host for SSH mode), matching the desktop DialogFooter confirmDisabled semantics. Scope note: SSHKeyManager is an inline two-panel layout (SelectionRailCard + SectionCard), not a dialog, and already stacks responsively via grid-cols-1 md:grid-cols-[...]. Wrapping it in SheetForm would break its always-visible selection rail. Left as-is. Tests: 3 new mobile cases (SheetForm render, save payload, cancel closes) + desktop unchanged. 113 tests pass; lint/build green. Refs openspec/changes/mobile-responsive-parity/ (spec R4, tasks slice 7).
This commit is contained in:
@@ -15,6 +15,8 @@ export interface SheetFormProps {
|
||||
isPending?: boolean;
|
||||
/** Override the Save button label (default "Save"). */
|
||||
saveLabel?: string;
|
||||
/** Disable the Save button (e.g. when required fields are empty). */
|
||||
saveDisabled?: boolean;
|
||||
children: React.ReactNode;
|
||||
/** Optional className applied to the scrolling body. */
|
||||
bodyClassName?: string;
|
||||
@@ -39,6 +41,7 @@ export function SheetForm({
|
||||
onSave,
|
||||
onCancel,
|
||||
isPending = false,
|
||||
saveDisabled = false,
|
||||
saveLabel = "Save",
|
||||
children,
|
||||
bodyClassName,
|
||||
@@ -75,7 +78,7 @@ export function SheetForm({
|
||||
<Button variant="outline" onClick={onCancel} disabled={isPending}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={onSave} disabled={isPending}>
|
||||
<Button onClick={onSave} disabled={isPending || saveDisabled}>
|
||||
{isPending ? (
|
||||
<>
|
||||
<Loader2 className="animate-spin" />
|
||||
|
||||
Reference in New Issue
Block a user