82a4324b17
mara, reviewing the swarm-ui destroy-trigger PR: "why the extra styling? shouldnt there be a component that does this already?" There wasnt one -- Dialog is deliberately content-agnostic (see its own file-top comment), so the destroy confirm had grown its own page-scoped .agents-destroy-confirm/-actions CSS for what is really a generic "message + cancel/confirm button row" shape. Extracted ui/confirm-dialog/ConfirmDialog.tsx: wraps Dialog, owns the button row, leaves the message body to the caller via children. AgentsPage now uses it instead of a bare Dialog + bespoke CSS; deleted the now-unused AgentsPage.css.
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
// <ConfirmDialog> — a `Dialog` pre-wired for the "message + cancel/confirm
|
|
// button row" shape every confirm-before-acting flow needs. Extracted out
|
|
// of AgentsPage's destroy confirmation on mara's review question ("why the
|
|
// extra styling? shouldnt there be a component that does this already?")
|
|
// — there wasn't one yet, so that page had grown its own
|
|
// `.agents-destroy-confirm`/`-actions` layout CSS for what turns out to be
|
|
// a generic shape. `Dialog` itself stays opinion-free about content (see
|
|
// its own file-top comment); this is the one layer up that isn't, so a
|
|
// future confirm flow gets the button row for free instead of another
|
|
// page-scoped CSS file.
|
|
//
|
|
// The message itself stays caller-owned via `children` — only the dialog
|
|
// wiring, spacing, and button row are shared.
|
|
import type { ComponentChildren } from "preact";
|
|
import { Button } from "../button/Button.js";
|
|
import { Dialog } from "../dialog/Dialog.js";
|
|
import "./ConfirmDialog.css";
|
|
|
|
export function ConfirmDialog({
|
|
open,
|
|
label,
|
|
onCancel,
|
|
onConfirm,
|
|
confirmLabel = "confirm",
|
|
cancelLabel = "cancel",
|
|
confirmDisabled = false,
|
|
children,
|
|
}: {
|
|
open: boolean;
|
|
label: string;
|
|
onCancel: () => void;
|
|
onConfirm: () => void;
|
|
confirmLabel?: string;
|
|
cancelLabel?: string;
|
|
confirmDisabled?: boolean;
|
|
children: ComponentChildren;
|
|
}) {
|
|
return (
|
|
<Dialog open={open} onClose={onCancel} label={label}>
|
|
<div class="confirm-dialog">
|
|
<div class="confirm-dialog-body">{children}</div>
|
|
<div class="confirm-dialog-actions">
|
|
<Button onClick={onCancel}>{cancelLabel}</Button>
|
|
<Button
|
|
variant="primary"
|
|
onClick={onConfirm}
|
|
disabled={confirmDisabled}
|
|
>
|
|
{confirmLabel}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
);
|
|
}
|