nsrb/jerapah-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): shared ConfirmDialog, FormControls, and Modal a11y

Browse Source 
Extract reusable confirm/modal shells and bordered form controls, adopt them across list pages and editors, and improve icon-button labels plus KvPage keyboard rows.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
nsrb
2026-08-21 22:08:23 +07:00
co-authored by Cursor
parent 9985ff3440
commit 3d25d8a614
27 changed files with 606 additions and 626 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/AuthEditorModal.jsx
+24 -23
View File
@@ -6,6 +6,7 @@ import {
useHttpPages,
useUpsertHttpAuth,
} from "../api/hooks.js";
import { FormInput, FormSelect } from "./FormControls.jsx";
function emptyCred(source = "literal") {
return { source, value: "", kv: "", namespace: "", secret: "" };
@@ -120,15 +121,15 @@ function CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
<div className="space-y-3 rounded-box border border-base-300 p-3">
<p className="text-sm font-medium">{label}</p>
<Field label="Source">
<select
className="select select-bordered w-full"
<FormSelect
className="w-full"
value={cred.source}
onChange={(e) => onChange({ ...cred, source: e.target.value, keep: false })}
>
<option value="literal">Plain text</option>
<option value="kv">From KV</option>
<option value="secret">From secret</option>
</select>
</FormSelect>
</Field>
{cred.source === "literal" ? (
<Field
@@ -140,9 +141,9 @@ function CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
}
>
<div className="flex w-full gap-1">
<input
<FormInput
type={masked && !show ? "password" : "text"}
className="input input-bordered w-full font-mono"
className="w-full font-mono"
value={cred.value}
onChange={(e) => onChange({ ...cred, value: e.target.value, keep: false })}
placeholder={
@@ -168,16 +169,16 @@ function CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
{cred.source === "kv" ? (
<>
<Field label="Namespace (optional)">
<input
className="input input-bordered w-full font-mono"
<FormInput
className="w-full font-mono"
placeholder="namespace"
value={cred.namespace}
onChange={(e) => onChange({ ...cred, namespace: e.target.value })}
/>
</Field>
<Field label="Key">
<input
className="input input-bordered w-full font-mono"
<FormInput
className="w-full font-mono"
placeholder="key"
value={cred.kv}
onChange={(e) => onChange({ ...cred, kv: e.target.value })}
@@ -191,8 +192,8 @@ function CredentialFields({ label, cred, onChange, allowEmpty, masked }) {
label="Secret name"
hint="Encrypted secret — value is never shown here. Manage it on the Secrets page."
>
<input
className="input input-bordered w-full font-mono"
<FormInput
className="w-full font-mono"
placeholder="secret name"
value={cred.secret}
onChange={(e) => onChange({ ...cred, secret: e.target.value })}
@@ -297,8 +298,8 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
) : (
<form className="mt-3 space-y-4" onSubmit={onSubmit}>
<Field label="Name">
<input
className="input input-bordered w-full font-mono"
<FormInput
className="w-full font-mono"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
required
@@ -308,15 +309,15 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
</Field>
<Field label="Type">
<select
className="select select-bordered w-full"
<FormSelect
className="w-full"
value={form.type}
onChange={(e) => setForm({ ...form, type: e.target.value })}
>
<option value="bearer">bearer</option>
<option value="basic">basic</option>
<option value="header">header</option>
</select>
</FormSelect>
</Field>
{form.type === "bearer" ? (
@@ -345,8 +346,8 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
{form.type === "header" ? (
<>
<Field label="Header name">
<input
className="input input-bordered w-full font-mono"
<FormInput
className="w-full font-mono"
value={form.header}
onChange={(e) => setForm({ ...form, header: e.target.value })}
required
@@ -362,9 +363,9 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
) : null}
<Field label="Unauthorized status (optional)">
<input
<FormInput
type="number"
className="input input-bordered w-full"
className="w-full"
value={form.unauthorized_status}
onChange={(e) => setForm({ ...form, unauthorized_status: e.target.value })}
min={100}
@@ -374,8 +375,8 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
</Field>
<Field label="Unauthorized response page (optional)">
<select
className="select select-bordered w-full"
<FormSelect
className="w-full"
value={form.unauthorized_response}
onChange={(e) => setForm({ ...form, unauthorized_response: e.target.value })}
>
@@ -385,7 +386,7 @@ export function AuthEditorModal({ mode, auth, onClose, onSaved }) {
{p.name}
</option>
))}
</select>
</FormSelect>
</Field>
{upsert.isError ? (
packages/web/src/components/ConfirmDialog.jsx
+55
View File
@@ -0,0 +1,55 @@
import { Modal } from "./Modal.jsx";
/**
* Shared confirm / delete dialog.
*
* @param {object} props
* @param {boolean} props.open
* @param {string} props.title
* @param {import("react").ReactNode} [props.message]
* @param {string} [props.confirmLabel]
* @param {string} [props.confirmClass]
* @param {boolean} [props.loading]
* @param {boolean} [props.pending] alias for loading
* @param {boolean} [props.confirmDisabled]
* @param {import("react").ReactNode} [props.error]
* @param {() => void} props.onCancel
* @param {() => void} props.onConfirm
*/
export function ConfirmDialog({
open,
title,
message,
confirmLabel = "Delete",
confirmClass = "btn-error",
loading,
pending,
confirmDisabled = false,
error,
onCancel,
onConfirm,
}) {
const busy = Boolean(loading ?? pending);
return (
<Modal open={open} onClose={onCancel} boxClassName="max-w-md" aria-label={title}>
<h3 className="font-bold">{title}</h3>
{message ? <div className="mt-2 text-sm opacity-70">{message}</div> : null}
{error ? <p className="text-error text-sm mt-2">{error}</p> : null}
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={onCancel} disabled={busy}>
Cancel
</button>
<button
type="button"
className={`btn ${confirmClass}`}
disabled={busy || confirmDisabled}
onClick={onConfirm}
>
{busy ? <span className="loading loading-spinner loading-xs" /> : null}
{confirmLabel}
</button>
</div>
</Modal>
);
}
packages/web/src/components/FormControls.jsx
+27
View File
@@ -0,0 +1,27 @@
/**
* Shared DaisyUI form controls — always bordered + sm.
*/
import { forwardRef } from "react";
export const FormInput = forwardRef(function FormInput({ className = "", ...props }, ref) {
return <input ref={ref} className={`input input-bordered input-sm ${className}`.trim()} {...props} />;
});
export const FormSelect = forwardRef(function FormSelect({ className = "", children, ...props }, ref) {
return (
<select ref={ref} className={`select select-bordered select-sm ${className}`.trim()} {...props}>
{children}
</select>
);
});
export const FormTextarea = forwardRef(function FormTextarea({ className = "", ...props }, ref) {
return (
<textarea
ref={ref}
className={`textarea textarea-bordered textarea-sm ${className}`.trim()}
{...props}
/>
);
});
packages/web/src/components/Modal.jsx
+85
View File
@@ -0,0 +1,85 @@
import { useEffect, useId, useRef } from "react";
/**
* DaisyUI modal shell with Escape, labeled backdrop close, and a light focus trap.
*
* @param {object} props
* @param {boolean} props.open
* @param {() => void} props.onClose
* @param {import("react").ReactNode} props.children
* @param {string} [props.boxClassName]
* @param {string} [props["aria-labelledby"]]
* @param {string} [props["aria-label"]]
*/
export function Modal({
open,
onClose,
children,
boxClassName = "",
"aria-labelledby": ariaLabelledBy,
"aria-label": ariaLabel,
}) {
const boxRef = useRef(/** @type {HTMLDivElement | null} */ (null));
const fallbackId = useId();
const labelledBy = ariaLabelledBy || (ariaLabel ? undefined : fallbackId);
useEffect(() => {
if (!open) return undefined;
const box = boxRef.current;
const previous = /** @type {HTMLElement | null} */ (document.activeElement);
function focusables() {
if (!box) return [];
return [
...box.querySelectorAll(
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
),
].filter((el) => el instanceof HTMLElement && !el.hasAttribute("disabled"));
}
const first = focusables()[0];
first?.focus();
function onKeyDown(e) {
if (e.key === "Escape") {
e.preventDefault();
onClose();
return;
}
if (e.key !== "Tab" || !box) return;
const items = focusables();
if (items.length === 0) return;
const firstEl = items[0];
const lastEl = items[items.length - 1];
if (e.shiftKey && document.activeElement === firstEl) {
e.preventDefault();
lastEl.focus();
} else if (!e.shiftKey && document.activeElement === lastEl) {
e.preventDefault();
firstEl.focus();
}
}
document.addEventListener("keydown", onKeyDown);
return () => {
document.removeEventListener("keydown", onKeyDown);
previous?.focus?.();
};
}, [open, onClose]);
if (!open) return null;
return (
<dialog className="modal modal-open" aria-modal="true" aria-labelledby={labelledBy} aria-label={ariaLabel}>
<div ref={boxRef} className={`modal-box ${boxClassName}`.trim()} id={ariaLabelledBy ? undefined : fallbackId}>
{children}
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" aria-label="Close dialog" onClick={onClose}>
close
</button>
</form>
</dialog>
);
}
packages/web/src/components/ProfileEditorModal.jsx
+13 -12
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { errorMessage } from "../api/client.js";
import { useOwners, useScripts, useUpsertProfile } from "../api/hooks.js";
import { FormInput, FormSelect } from "./FormControls.jsx";
import { ConfigFields } from "./workflow/ConfigFields.jsx";
/**
@@ -83,8 +84,8 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
<label className="form-control w-full">
<span className="label py-0 text-sm">Owner</span>
{owners.length > 0 ? (
<select
className="select w-full"
<FormSelect
className="w-full"
value={form.owner}
onChange={(e) => setForm({ ...form, owner: e.target.value })}
required
@@ -94,10 +95,10 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
{o}
</option>
))}
</select>
</FormSelect>
) : (
<input
className="input w-full"
<FormInput
className="w-full"
value={form.owner}
onChange={(e) => setForm({ ...form, owner: e.target.value })}
required
@@ -106,8 +107,8 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
</label>
<label className="form-control w-full">
<span className="label py-0 text-sm">Name</span>
<input
className="input w-full font-mono"
<FormInput
className="w-full font-mono"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
required
@@ -127,8 +128,8 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
)}
<label className="form-control w-full">
<span className="label py-0 text-sm">Script</span>
<select
className="select w-full font-mono"
<FormSelect
className="w-full font-mono"
value={form.script}
onChange={(e) => {
setForm({ ...form, script: e.target.value });
@@ -148,7 +149,7 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
{form.script && !scripts.some((s) => (typeof s === "string" ? s : s.name) === form.script) ? (
<option value={form.script}>{form.script}</option>
) : null}
</select>
</FormSelect>
</label>
{scriptChanged && usageCount > 0 ? (
<p className="text-warning text-sm">
@@ -159,8 +160,8 @@ export function ProfileEditorModal({ mode, initial, onClose, onSaved, usageCount
) : null}
<label className="form-control w-full">
<span className="label py-0 text-sm">Description</span>
<input
className="input w-full"
<FormInput
className="w-full"
value={form.description}
onChange={(e) => setForm({ ...form, description: e.target.value })}
maxLength={500}
packages/web/src/components/SecretEditorModal.jsx
+72 -77
View File
@@ -1,6 +1,8 @@
import { useState } from "react";
import { errorMessage } from "../api/client.js";
import { useOwners, useUpsertSecret } from "../api/hooks.js";
import { FormInput, FormSelect } from "./FormControls.jsx";
import { Modal } from "./Modal.jsx";
/**
* Add / replace an encrypted secret.
@@ -43,85 +45,78 @@ export function SecretEditorModal({
const title = mode === "add" ? "New secret" : `Replace ${form.owner}/${form.name}`;
return (
<dialog className="modal modal-open">
<div className="modal-box max-w-md">
<h3 className="font-bold">{title}</h3>
<form className="mt-3 space-y-2" onSubmit={onSubmit}>
{mode === "add" ? (
<>
<label className="form-control w-full">
<span className="label py-0 text-sm">Owner</span>
{owners.length > 0 ? (
<select
className="select w-full"
value={form.owner}
onChange={(e) => setForm({ ...form, owner: e.target.value })}
required
disabled={lockOwner}
>
{owners.map((o) => (
<option key={o} value={o}>
{o}
</option>
))}
</select>
) : (
<input
className="input w-full"
value={form.owner}
onChange={(e) => setForm({ ...form, owner: e.target.value })}
required
disabled={lockOwner}
/>
)}
</label>
<label className="form-control w-full">
<span className="label py-0 text-sm">Name</span>
<input
className="input w-full font-mono"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
<Modal open onClose={onClose} boxClassName="max-w-md" aria-label={title}>
<h3 className="font-bold">{title}</h3>
<form className="mt-3 space-y-2" onSubmit={onSubmit}>
{mode === "add" ? (
<>
<label className="form-control w-full">
<span className="label py-0 text-sm">Owner</span>
{owners.length > 0 ? (
<FormSelect
className="w-full"
value={form.owner}
onChange={(e) => setForm({ ...form, owner: e.target.value })}
required
pattern="[A-Za-z0-9._-]+"
title="Letters, numbers, dots, underscores, hyphens"
disabled={lockOwner}
>
{owners.map((o) => (
<option key={o} value={o}>
{o}
</option>
))}
</FormSelect>
) : (
<FormInput
className="w-full"
value={form.owner}
onChange={(e) => setForm({ ...form, owner: e.target.value })}
required
disabled={lockOwner}
/>
</label>
</>
) : null}
<label className="form-control w-full">
<span className="label py-0 text-sm">Value</span>
<input
type="password"
className="input w-full"
value={form.value}
onChange={(e) => setForm({ ...form, value: e.target.value })}
required
autoComplete="new-password"
/>
</label>
<p className="text-xs opacity-60">
Values are encrypted at rest and never shown again after save. Values shorter than 8
characters are not redacted from logs.
</p>
{upsert.isError ? (
<p className="text-error text-sm">{errorMessage(upsert.error)}</p>
) : null}
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={onClose}>
Cancel
</button>
<button type="submit" className="btn btn-primary" disabled={upsert.isPending}>
{upsert.isPending ? <span className="loading loading-spinner loading-xs" /> : null}
Save
</button>
</div>
</form>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={onClose}>
close
</button>
)}
</label>
<label className="form-control w-full">
<span className="label py-0 text-sm">Name</span>
<FormInput
className="w-full font-mono"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
required
pattern="[A-Za-z0-9._-]+"
title="Letters, numbers, dots, underscores, hyphens"
/>
</label>
</>
) : null}
<label className="form-control w-full">
<span className="label py-0 text-sm">Value</span>
<FormInput
type="password"
className="w-full"
value={form.value}
onChange={(e) => setForm({ ...form, value: e.target.value })}
required
autoComplete="new-password"
/>
</label>
<p className="text-xs opacity-60">
Values are encrypted at rest and never shown again after save. Values shorter than 8
characters are not redacted from logs.
</p>
{upsert.isError ? (
<p className="text-error text-sm">{errorMessage(upsert.error)}</p>
) : null}
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={onClose}>
Cancel
</button>
<button type="submit" className="btn btn-primary" disabled={upsert.isPending}>
{upsert.isPending ? <span className="loading loading-spinner loading-xs" /> : null}
Save
</button>
</div>
</form>
</dialog>
</Modal>
);
}
packages/web/src/components/UserEditorModal.jsx
+8 -7
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { errorMessage } from "../api/client.js";
import { useCreateUser, useUpdateUser } from "../api/hooks.js";
import { FormInput, FormSelect } from "./FormControls.jsx";
/**
* Add / edit a local user.
@@ -61,8 +62,8 @@ export function UserEditorModal({ mode, user, onClose, onSaved }) {
{mode === "add" ? (
<label className="form-control w-full">
<span className="label py-0 text-sm">Username</span>
<input
className="input w-full"
<FormInput
className="w-full"
value={form.username}
onChange={(e) => setForm({ ...form, username: e.target.value })}
required
@@ -73,9 +74,9 @@ export function UserEditorModal({ mode, user, onClose, onSaved }) {
<span className="label py-0 text-sm">
{mode === "add" ? "Password" : "New password"}
</span>
<input
<FormInput
type="password"
className="input w-full"
className="w-full"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
required={mode === "add"}
@@ -85,14 +86,14 @@ export function UserEditorModal({ mode, user, onClose, onSaved }) {
</label>
<label className="form-control w-full">
<span className="label py-0 text-sm">Role</span>
<select
className="select w-full"
<FormSelect
className="w-full"
value={form.role}
onChange={(e) => setForm({ ...form, role: e.target.value })}
>
<option value="operator">operator</option>
<option value="admin">admin</option>
</select>
</FormSelect>
</label>
{mutation.isError ? (
<p className="text-error text-sm">{errorMessage(mutation.error)}</p>
packages/web/src/components/VariableEditorModal.jsx
+18 -17
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { errorMessage } from "../api/client.js";
import { useOwners, useUpsertVariable } from "../api/hooks.js";
import { FormInput, FormSelect, FormTextarea } from "./FormControls.jsx";
const TYPES = ["string", "number", "boolean"];
@@ -83,8 +84,8 @@ export function VariableEditorModal({
<label className="form-control w-full">
<span className="label py-0 text-sm">Owner</span>
{owners.length > 0 ? (
<select
className="select w-full"
<FormSelect
className="w-full"
value={form.owner}
onChange={(e) => setForm({ ...form, owner: e.target.value })}
required
@@ -95,10 +96,10 @@ export function VariableEditorModal({
{o}
</option>
))}
</select>
</FormSelect>
) : (
<input
className="input w-full"
<FormInput
className="w-full"
value={form.owner}
onChange={(e) => setForm({ ...form, owner: e.target.value })}
required
@@ -108,8 +109,8 @@ export function VariableEditorModal({
</label>
<label className="form-control w-full">
<span className="label py-0 text-sm">Name</span>
<input
className="input w-full font-mono"
<FormInput
className="w-full font-mono"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
required
@@ -121,8 +122,8 @@ export function VariableEditorModal({
) : null}
<label className="form-control w-full">
<span className="label py-0 text-sm">Type</span>
<select
className="select w-full"
<FormSelect
className="w-full"
value={form.type}
onChange={(e) => onTypeChange(e.target.value)}
>
@@ -131,31 +132,31 @@ export function VariableEditorModal({
{t}
</option>
))}
</select>
</FormSelect>
</label>
<label className="form-control w-full">
<span className="label py-0 text-sm">Value</span>
{form.type === "boolean" ? (
<select
className="select w-full"
<FormSelect
className="w-full"
value={form.value === true ? "true" : "false"}
onChange={(e) => setForm({ ...form, value: e.target.value === "true" })}
>
<option value="true">true</option>
<option value="false">false</option>
</select>
</FormSelect>
) : form.type === "number" ? (
<input
<FormInput
type="number"
className="input w-full font-mono"
className="w-full font-mono"
value={form.value}
onChange={(e) => setForm({ ...form, value: e.target.value })}
required
step="any"
/>
) : (
<textarea
className="textarea w-full font-mono min-h-24"
<FormTextarea
className="w-full font-mono min-h-24"
value={form.value}
onChange={(e) => setForm({ ...form, value: e.target.value })}
spellCheck={false}
packages/web/src/components/workflow/AddScriptDialog.jsx
+3 -2
View File
@@ -1,5 +1,6 @@
import { useMemo, useState } from "react";
import { useProfiles, useScripts } from "../../api/hooks.js";
import { FormInput } from "../FormControls.jsx";
import { ScriptIcon } from "../ScriptIcon.jsx";
import { scriptTags } from "../../lib/script.js";
@@ -66,8 +67,8 @@ export function AddScriptDialog({ open, onClose, onPick, owner }) {
Profiles
</button>
</div>
<input
className="input input-sm w-full mt-3"
<FormInput
className="w-full mt-3"
placeholder={tab === "profiles" ? "Search profiles" : "Search scripts"}
value={q}
onChange={(e) => setQ(e.target.value)}
packages/web/src/components/workflow/ConfigFields.jsx
+17 -16
View File
@@ -4,6 +4,7 @@ import { LuEye, LuEyeOff, LuExternalLink, LuPlus, LuTrash2 } from "react-icons/l
import { useVariables } from "../../api/hooks.js";
import { triggerDestinations } from "../../lib/workflow-doc.js";
import { prettyJson } from "../../lib/script.js";
import { FormInput, FormSelect, FormTextarea } from "../FormControls.jsx";
import { FieldLabel } from "./FieldHelp.jsx";
const MULTILINE_KEYS = new Set(["expression", "jsonata"]);
@@ -197,8 +198,8 @@ function EditableText({ value, onCommit, className = "", placeholder = "…", di
}
return (
<input
className={`input input-sm w-full ${className}`}
<FormInput
className={`w-full ${className}`.trim()}
value={draft}
autoFocus
onChange={(e) => setDraft(e.target.value)}
@@ -239,8 +240,8 @@ function ValueEditor({ value, onChange, spec, script, fieldKey, workflows, owner
const current = value === undefined || value === null ? fallback : value;
const known = options.some((o) => o.value === current);
return (
<select
className="select select-sm w-full"
<FormSelect
className="w-full"
value={current === undefined || current === null ? "" : String(current)}
onChange={(e) => {
const next = e.target.value;
@@ -262,7 +263,7 @@ function ValueEditor({ value, onChange, spec, script, fieldKey, workflows, owner
{known || current === "" || current == null ? null : (
<option value={String(current)}>{String(current)}</option>
)}
</select>
</FormSelect>
);
}
@@ -280,9 +281,9 @@ function ValueEditor({ value, onChange, spec, script, fieldKey, workflows, owner
if (type === "number") {
return (
<input
<FormInput
type="number"
className="input input-sm w-full"
className="w-full"
value={value ?? ""}
disabled={disabled}
onChange={(e) => {
@@ -329,8 +330,8 @@ function ValueEditor({ value, onChange, spec, script, fieldKey, workflows, owner
const multiline = MULTILINE_KEYS.has(fieldKey) || str.includes("\n");
if (multiline) {
return (
<textarea
className="textarea textarea-sm w-full min-h-24 font-mono text-xs"
<FormTextarea
className="w-full min-h-24 font-mono text-xs"
value={str}
disabled={disabled}
onChange={(e) => onChange(e.target.value)}
@@ -347,8 +348,8 @@ function JsonOrTextArea({ text, onCommit, disabled }) {
setDraft(text);
}, [text]);
return (
<textarea
className="textarea textarea-sm w-full min-h-24 font-mono text-xs"
<FormTextarea
className="w-full min-h-24 font-mono text-xs"
value={draft}
disabled={disabled}
onChange={(e) => setDraft(e.target.value)}
@@ -441,8 +442,8 @@ function WorkflowNamePicker({ value, onChange, workflows, owner, excludeFile, di
return (
<div className="space-y-1">
<select
className="select select-sm w-full"
<FormSelect
className="w-full"
value={selectValue}
disabled={disabled}
onChange={(e) => {
@@ -464,10 +465,10 @@ function WorkflowNamePicker({ value, onChange, workflows, owner, excludeFile, di
</option>
))}
<option value="__custom__">Custom…</option>
</select>
</FormSelect>
{selectValue === "__custom__" ? (
<input
className="input input-sm w-full font-mono"
<FormInput
className="w-full font-mono"
value={value}
disabled={disabled}
onChange={(e) => onChange(e.target.value)}
packages/web/src/components/workflow/ScriptCard.jsx
+14 -14
View File
@@ -5,6 +5,7 @@ import { LuChevronDown, LuGripVertical, LuMaximize2, LuMinimize2, LuPlay, LuTras
import { useDryRunScript, useScript } from "../../api/hooks.js";
import { errorMessage } from "../../api/client.js";
import { CodeEditor } from "../CodeEditor.jsx";
import { FormInput, FormSelect, FormTextarea } from "../FormControls.jsx";
import { LogViewer } from "../LogViewer.jsx";
import { StatusBadge } from "../../lib/format.jsx";
import { contextFromMeta, prettyJson } from "../../lib/script.js";
@@ -178,8 +179,8 @@ export function ScriptCard({
required
description="JSONata evaluated against ctx (data, context, config). Result becomes the next step's data."
/>
<textarea
className="textarea textarea-sm w-full min-h-24 font-mono text-xs"
<FormTextarea
className="w-full min-h-24 font-mono text-xs"
value={step.expression ?? ""}
disabled={disabled}
onChange={(e) => onChange({ ...step, expression: e.target.value })}
@@ -204,8 +205,8 @@ export function ScriptCard({
<div className="collapse-content space-y-2">
<label className="form-control">
<span className="label py-0 text-sm">id</span>
<input
className={`input input-sm font-mono ${duplicateId ? "input-error" : ""}`}
<FormInput
className={`font-mono ${duplicateId ? "input-error" : ""}`}
value={step.id ?? ""}
disabled={disabled}
onChange={(e) => onChange({ ...step, id: e.target.value })}
@@ -223,8 +224,8 @@ export function ScriptCard({
/>
<label className="form-control">
<span className="label py-0 text-sm">when</span>
<input
className="input input-sm w-full font-mono"
<FormInput
className="w-full font-mono"
value={step.when ?? ""}
disabled={disabled || Boolean(step.needs)}
onChange={(e) => onChange({ ...step, when: e.target.value })}
@@ -265,8 +266,7 @@ function NeedsEditor({ step, otherSteps, disabled, onChange }) {
return (
<div className="space-y-1">
<span className="label py-0 text-sm">needs</span>
<select
className="select select-sm"
<FormSelect
value={mode}
disabled={disabled}
onChange={(e) => setMode(e.target.value)}
@@ -274,7 +274,7 @@ function NeedsEditor({ step, otherSteps, disabled, onChange }) {
<option value="none">None (trigger data / previous output)</option>
<option value="list">List of step ids</option>
<option value="map">Map alias → step id</option>
</select>
</FormSelect>
{mode === "list" ? (
<div className="flex flex-wrap gap-2 pt-1">
{ids.length === 0 ? (
@@ -324,8 +324,8 @@ function NeedsMap({ needs, ids, disabled, onChange }) {
<div className="space-y-1">
{entries.map(([alias, from]) => (
<div key={alias} className="flex gap-1">
<input
className="input input-sm font-mono w-28"
<FormInput
className="font-mono w-28"
value={alias}
disabled={disabled}
onChange={(e) => {
@@ -336,8 +336,8 @@ function NeedsMap({ needs, ids, disabled, onChange }) {
onChange(next);
}}
/>
<select
className="select select-sm flex-1"
<FormSelect
className="flex-1"
value={from}
disabled={disabled}
onChange={(e) => onChange({ ...needs, [alias]: e.target.value })}
@@ -348,7 +348,7 @@ function NeedsMap({ needs, ids, disabled, onChange }) {
{id}
</option>
))}
</select>
</FormSelect>
<button
type="button"
className="btn btn-ghost btn-xs"
packages/web/src/components/workflow/TriggerCard.jsx
+22 -22
View File
@@ -5,6 +5,7 @@ import { CSS } from "@dnd-kit/utilities";
import cronstrue from "cronstrue";
import { namespacedPath, HTTP_METHODS, triggerDestinations } from "../../lib/workflow-doc.js";
import { CRON_CUSTOM, CRON_PRESETS, matchCronPreset, scheduleForPreset } from "../../lib/cron-presets.js";
import { FormInput, FormSelect } from "../FormControls.jsx";
export function TriggerCard({
trigger,
@@ -169,8 +170,8 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
return (
<div className="space-y-3">
<Field label="Method">
<select
className="select select-bordered select-sm w-full"
<FormSelect
className="w-full"
value={trigger.method || "POST"}
disabled={disabled}
onChange={(e) => onChange({ ...trigger, method: e.target.value })}
@@ -183,12 +184,12 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
{HTTP_METHODS.includes(trigger.method || "POST") ? null : (
<option value={trigger.method}>{trigger.method}</option>
)}
</select>
</FormSelect>
</Field>
<Field label="Path">
<input
className="input input-bordered input-sm w-full font-mono"
<FormInput
className="w-full font-mono"
value={trigger.path ?? ""}
disabled={disabled}
onChange={(e) => onChange({ ...trigger, path: e.target.value })}
@@ -198,8 +199,8 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
<Field label="URL">
<div className="flex w-full items-center gap-1">
<input
className="input input-bordered input-sm w-full font-mono opacity-80"
<FormInput
className="w-full font-mono opacity-80"
value={url}
readOnly
tabIndex={-1}
@@ -224,8 +225,8 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
/>
<Field label="Response page">
<select
className="select select-bordered select-sm w-full"
<FormSelect
className="w-full"
value={trigger.response ?? ""}
disabled={disabled}
onChange={(e) => onChange({ ...trigger, response: e.target.value })}
@@ -239,7 +240,7 @@ function HttpFields({ trigger, owner, disabled, onChange, auths, pages, alertDes
{trigger.response && !pages.some((p) => p.name === trigger.response) ? (
<option value={trigger.response}>{trigger.response}</option>
) : null}
</select>
</FormSelect>
</Field>
<FailureAlertFields
@@ -343,10 +344,10 @@ function AuthPicker({ auths, selectedIds, inlineCount, disabled, onChange }) {
<div className="relative w-full">
<div className="join w-full">
<input
<FormInput
ref={inputRef}
type="search"
className="input input-bordered input-sm join-item w-full min-w-0"
className="join-item w-full min-w-0"
placeholder={auths.length === 0 ? "No auth profiles yet" : "Add auth…"}
value={query}
disabled={disabled || auths.length === 0}
@@ -424,8 +425,7 @@ function CronFields({ trigger, disabled, onChange, alertDestinations }) {
<div className="space-y-2">
<label className="form-control">
<span className="label py-0 text-sm">Preset</span>
<select
className="select select-sm"
<FormSelect
value={preset}
disabled={disabled}
onChange={(e) => {
@@ -441,12 +441,12 @@ function CronFields({ trigger, disabled, onChange, alertDestinations }) {
</option>
))}
<option value={CRON_CUSTOM}>Custom</option>
</select>
</FormSelect>
</label>
<label className="form-control">
<span className="label py-0 text-sm">Schedule</span>
<input
className="input input-sm font-mono"
<FormInput
className="font-mono"
value={trigger.schedule ?? ""}
disabled={disabled}
onChange={(e) => onChange({ ...trigger, schedule: e.target.value })}
@@ -473,8 +473,8 @@ function FailureAlertFields({ trigger, disabled, onChange, alertDestinations })
<div className="space-y-3 border-t border-base-300 pt-3">
<p className="text-sm font-medium opacity-80">Failure alert</p>
<Field label="Consecutive failures">
<input
className="input input-bordered input-sm w-full"
<FormInput
className="w-full"
type="number"
min="1"
step="1"
@@ -496,8 +496,8 @@ function FailureAlertFields({ trigger, disabled, onChange, alertDestinations })
</>
}
>
<select
className="select select-bordered select-sm w-full"
<FormSelect
className="w-full"
value={trigger.onFailureWorkflow ?? ""}
disabled={disabled}
onChange={(e) => onChange({ ...trigger, onFailureWorkflow: e.target.value })}
@@ -514,7 +514,7 @@ function FailureAlertFields({ trigger, disabled, onChange, alertDestinations })
) ? (
<option value={trigger.onFailureWorkflow}>{trigger.onFailureWorkflow}</option>
) : null}
</select>
</FormSelect>
</Field>
</div>
);
packages/web/src/components/workflow/WorkflowHistoryPanel.jsx
+3 -1
View File
@@ -12,7 +12,7 @@ import {
isSaveWarningsError,
saveWarningsFromError,
} from "./SaveWorkflowWarningsDialog.jsx";
import { ConfirmDialog } from "./WorkflowRevisionBanner.jsx";
import { ConfirmDialog } from "../ConfirmDialog.jsx";
function reasonLabel(reason, meta) {
if (reason === "duplicated" && meta?.from) return `duplicated from ${meta.from}`;
@@ -127,6 +127,7 @@ export function WorkflowHistoryPanel({
type="button"
className="btn btn-ghost btn-xs shrink-0"
title="Revert to this revision"
aria-label="Revert to this revision"
disabled={revert.isPending}
onClick={(e) => {
e.stopPropagation();
@@ -152,6 +153,7 @@ export function WorkflowHistoryPanel({
title={`Revert to revision #${confirmRev.revision}?`}
message={`This replaces the live workflow with revision #${confirmRev.revision} from ${formatTime(confirmRev.created_at)} and creates a new revision.`}
confirmLabel="Revert"
confirmClass="btn-warning"
pending={revert.isPending}
onCancel={() => setConfirmRevision(null)}
onConfirm={() => doRevert(confirmRev.revision, false)}
packages/web/src/components/workflow/WorkflowRevisionBanner.jsx
+2 -42
View File
@@ -4,52 +4,13 @@ import { errorMessage } from "../../api/client.js";
import { useRevertWorkflowRevision } from "../../api/hooks.js";
import { formatTime } from "../../lib/format.jsx";
import { useNotifications } from "../../notifications.jsx";
import { ConfirmDialog } from "../ConfirmDialog.jsx";
import {
SaveWorkflowWarningsDialog,
isSaveWarningsError,
saveWarningsFromError,
} from "./SaveWorkflowWarningsDialog.jsx";
function ConfirmDialog({
open,
title,
message,
confirmLabel,
confirmClass = "btn-warning",
pending,
onCancel,
onConfirm,
}) {
if (!open) return null;
return (
<dialog className="modal modal-open">
<div className="modal-box max-w-md">
<h3 className="font-bold">{title}</h3>
<p className="mt-2 text-sm opacity-70">{message}</p>
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={onCancel}>
Cancel
</button>
<button
type="button"
className={`btn ${confirmClass}`}
disabled={pending}
onClick={onConfirm}
>
{pending ? <span className="loading loading-spinner loading-xs" /> : null}
{confirmLabel}
</button>
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={onCancel}>
close
</button>
</form>
</dialog>
);
}
export function WorkflowRevisionBanner({
owner,
file,
@@ -110,6 +71,7 @@ export function WorkflowRevisionBanner({
title={`Revert to revision #${revision}?`}
message={`This replaces the live workflow with revision #${revision} from ${formatTime(createdAt)} and creates a new revision.`}
confirmLabel="Revert"
confirmClass="btn-warning"
pending={revert.isPending}
onCancel={() => setConfirmOpen(false)}
onConfirm={() => doRevert(false)}
@@ -125,5 +87,3 @@ export function WorkflowRevisionBanner({
</>
);
}
export { ConfirmDialog };
packages/web/src/components/workflow/WorkflowVisualEditor.jsx
+5 -4
View File
@@ -4,6 +4,7 @@ import { useHttpAuths, useHttpPages, useProfiles, useScripts, useWorkflows } fro
import { dataFromInputMeta, firstInputMeta } from "../../lib/script.js";
import { workflowToFlowchart } from "../../lib/workflow-mermaid.js";
import { parseWorkflowYaml, stringifyWorkflowDoc } from "../../lib/workflow-doc.js";
import { FormInput, FormTextarea } from "../FormControls.jsx";
import { ScriptsTab } from "./ScriptsTab.jsx";
import { TriggersTab } from "./TriggersTab.jsx";
import { YamlTab } from "./YamlTab.jsx";
@@ -119,8 +120,8 @@ export function WorkflowVisualEditor({
<>
<div className="flex shrink-0 flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
{extraChrome}
<input
className="input input-sm sm:max-w-xs"
<FormInput
className="sm:max-w-xs"
placeholder="name"
value={displayDoc?.name ?? ""}
disabled={visualDisabled}
@@ -130,8 +131,8 @@ export function WorkflowVisualEditor({
})
}
/>
<textarea
className="textarea textarea-sm min-h-10 w-full sm:max-w-md"
<FormTextarea
className="min-h-10 w-full sm:max-w-md"
placeholder="description"
rows={1}
value={displayDoc?.description ?? ""}