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 ?? ""}
packages/web/src/pages/AuthProfilesPage.jsx
+15 -34
View File
@@ -8,6 +8,7 @@ import {
useHttpAuths,
} from "../api/hooks.js";
import { AuthEditorModal } from "../components/AuthEditorModal.jsx";
import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
import { formatTime } from "../lib/format.jsx";
function CredDisplay({ field, fieldKey, authId, cache, onRevealed }) {
@@ -66,7 +67,7 @@ function CredDisplay({ field, fieldKey, authId, cache, onRevealed }) {
type="button"
className="btn btn-ghost btn-xs btn-square"
title={shown ? "Hide" : "Reveal"}
aria-label={shown ? "Hide value" : "Reveal value"}
aria-label={shown ? "Hide" : "Reveal"}
disabled={loading}
onClick={(e) => {
e.stopPropagation();
@@ -241,6 +242,7 @@ export function AuthProfilesPage() {
type="button"
className="btn btn-ghost btn-xs"
title="Edit"
aria-label="Edit"
onClick={() => navigate(`/auth/${encodeURIComponent(a.name)}/edit`)}
>
<LuPencil className="size-4" />
@@ -249,6 +251,7 @@ export function AuthProfilesPage() {
type="button"
className="btn btn-ghost btn-xs text-error"
title="Delete"
aria-label="Delete"
onClick={() => setConfirmDelete(a)}
>
<LuTrash2 className="size-4" />
@@ -278,39 +281,17 @@ export function AuthProfilesPage() {
/>
) : null}
{confirmDelete ? (
<dialog className="modal modal-open">
<div className="modal-box">
<h3 className="font-bold">Delete {confirmDelete.name}?</h3>
<p className="text-sm mt-2">
Workflows that reference this profile will fail auth until updated.
</p>
{del.isError ? (
<p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
) : null}
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
Cancel
</button>
<button
type="button"
className="btn btn-error"
disabled={del.isPending}
onClick={() =>
del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
}
>
Delete
</button>
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={() => setConfirmDelete(null)}>
close
</button>
</form>
</dialog>
) : null}
<ConfirmDialog
open={Boolean(confirmDelete)}
title={confirmDelete ? `Delete ${confirmDelete.name}?` : ""}
message="Workflows that reference this profile will fail auth until updated."
error={del.isError ? errorMessage(del.error) : null}
loading={del.isPending}
onCancel={() => setConfirmDelete(null)}
onConfirm={() =>
del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
}
/>
</div>
);
}
packages/web/src/pages/BackupPage.jsx
+17 -33
View File
@@ -5,6 +5,7 @@ import {
useDownloadWorkflowBackup,
useRestoreWorkflowBackup,
} from "../api/hooks.js";
import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
import { useNotifications } from "../notifications.jsx";
export function BackupPage() {
@@ -120,40 +121,23 @@ export function BackupPage() {
</div>
</section>
{pendingFile ? (
<dialog className="modal modal-open">
<div className="modal-box">
<h3 className="font-bold">Replace with this backup?</h3>
<p className="mt-2 text-sm opacity-70">
<ConfirmDialog
open={Boolean(pendingFile)}
title="Replace with this backup?"
message={
pendingFile ? (
<>
Current workflows and plugins will be deleted, then{" "}
<span className="font-mono">{pendingFile.name}</span> will be
restored. This cannot be undone from this page.
</p>
<div className="modal-action">
<button
type="button"
className="btn btn-ghost"
onClick={() => setPendingFile(null)}
>
Cancel
</button>
<button
type="button"
className="btn btn-error"
disabled={restoreBackup.isPending}
onClick={() => restore(pendingFile, "replace")}
>
Replace
</button>
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={() => setPendingFile(null)}>
close
</button>
</form>
</dialog>
) : null}
<span className="font-mono">{pendingFile.name}</span> will be restored. This cannot
be undone from this page.
</>
) : null
}
confirmLabel="Replace"
loading={restoreBackup.isPending}
onCancel={() => setPendingFile(null)}
onConfirm={() => restore(pendingFile, "replace")}
/>
</div>
);
}
packages/web/src/pages/KvPage.jsx
+13 -3
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { useSearchParams } from "react-router-dom";
import { useKv, useKvNamespaces } from "../api/hooks.js";
import { FormSelect } from "../components/FormControls.jsx";
import { formatTime } from "../lib/format.jsx";
const PAGE_SIZE = 50;
@@ -48,8 +49,8 @@ export function KvPage() {
<div className="space-y-4">
<h1 className="text-xl font-semibold">KV</h1>
<div className="flex flex-col sm:flex-row gap-2">
<select
className="select select-sm w-full sm:max-w-xs"
<FormSelect
className="w-full sm:max-w-xs"
value={namespace}
onChange={(e) => update("namespace", e.target.value)}
>
@@ -59,7 +60,7 @@ export function KvPage() {
{ns}
</option>
))}
</select>
</FormSelect>
<input
className="input input-sm w-full sm:max-w-sm"
placeholder="search key or value"
@@ -93,6 +94,15 @@ export function KvPage() {
key={id}
className="hover cursor-pointer"
onClick={() => setExpanded(open ? null : id)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
setExpanded(open ? null : id);
}
}}
role="button"
tabIndex={0}
aria-expanded={open}
>
<td className="font-mono text-xs align-top">{item.namespace}</td>
<td className="font-mono text-xs align-top">{item.key}</td>
packages/web/src/pages/ProfilesPage.jsx
+56 -61
View File
@@ -3,6 +3,8 @@ import { useLocation, useNavigate, useParams, useSearchParams } from "react-rout
import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
import { errorMessage } from "../api/client.js";
import { useDeleteProfile, useOwners, useProfileUsage, useProfiles } from "../api/hooks.js";
import { FormSelect } from "../components/FormControls.jsx";
import { Modal } from "../components/Modal.jsx";
import { ProfileEditorModal } from "../components/ProfileEditorModal.jsx";
import { ScriptIcon } from "../components/ScriptIcon.jsx";
import { formatTime } from "../lib/format.jsx";
@@ -129,8 +131,7 @@ export function ProfilesPage() {
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
<h1 className="text-xl font-semibold">Profiles</h1>
<div className="flex gap-2">
<select
className="select select-sm"
<FormSelect
value={ownerFilter}
onChange={(e) => {
setOwnerFilter(e.target.value);
@@ -149,7 +150,7 @@ export function ProfilesPage() {
{o}
</option>
))}
</select>
</FormSelect>
<button
type="button"
className="btn btn-primary btn-sm"
@@ -224,6 +225,7 @@ export function ProfilesPage() {
type="button"
className="btn btn-ghost btn-xs"
title="Edit"
aria-label="Edit"
onClick={() =>
navigate(
`/profiles/${encodeURIComponent(row.owner)}/${encodeURIComponent(row.name)}/edit`,
@@ -237,6 +239,7 @@ export function ProfilesPage() {
type="button"
className="btn btn-ghost btn-xs text-error"
title="Delete"
aria-label="Delete"
onClick={() => setConfirmDelete({ ...row, force: false })}
>
<LuTrash2 className="size-4" />
@@ -281,66 +284,58 @@ function DeleteProfileDialog({ profile, del, onClose }) {
const usage = useProfileUsage(profile.id, true);
const usages = usage.data ?? [];
const used = usages.length > 0;
const title = `Delete ${profile.owner}/${profile.name}?`;
return (
<dialog className="modal modal-open">
<div className="modal-box">
<h3 className="font-bold">
Delete {profile.owner}/{profile.name}?
</h3>
{usage.isLoading ? (
<p className="text-sm mt-2 opacity-70">Checking workflow usage…</p>
) : used ? (
<>
<p className="text-sm mt-2">{formatUsage(usages)}</p>
<ul className="mt-2 max-h-40 overflow-auto text-sm font-mono">
{usages.map((u) => (
<li key={u.file}>
{u.name}
{u.file !== u.name ? ` (${u.file})` : ""}
</li>
))}
</ul>
{force ? (
<p className="text-warning text-sm mt-2">
Workflows that still reference this profile will fail until you fix them.
</p>
) : null}
</>
) : (
<p className="text-sm mt-2">This cannot be undone.</p>
)}
{del.isError ? (
<p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
) : null}
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={onClose}>
Cancel
</button>
{used && !force ? (
<button type="button" className="btn btn-warning" onClick={() => setForce(true)}>
Force delete
</button>
) : (
<button
type="button"
className="btn btn-error"
disabled={del.isPending || usage.isLoading}
onClick={() =>
del.mutate({ id: profile.id, force: used }, { onSuccess: () => onClose() })
}
>
{del.isPending ? <span className="loading loading-spinner loading-xs" /> : null}
Delete
</button>
)}
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={onClose}>
close
<Modal open onClose={onClose} boxClassName="max-w-md" aria-label={title}>
<h3 className="font-bold">{title}</h3>
{usage.isLoading ? (
<p className="text-sm mt-2 opacity-70">Checking workflow usage…</p>
) : used ? (
<>
<p className="text-sm mt-2">{formatUsage(usages)}</p>
<ul className="mt-2 max-h-40 overflow-auto text-sm font-mono">
{usages.map((u) => (
<li key={u.file}>
{u.name}
{u.file !== u.name ? ` (${u.file})` : ""}
</li>
))}
</ul>
{force ? (
<p className="text-warning text-sm mt-2">
Workflows that still reference this profile will fail until you fix them.
</p>
) : null}
</>
) : (
<p className="text-sm mt-2">This cannot be undone.</p>
)}
{del.isError ? (
<p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
) : null}
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={onClose}>
Cancel
</button>
</form>
</dialog>
{used && !force ? (
<button type="button" className="btn btn-warning" onClick={() => setForce(true)}>
Force delete
</button>
) : (
<button
type="button"
className="btn btn-error"
disabled={del.isPending || usage.isLoading}
onClick={() =>
del.mutate({ id: profile.id, force: used }, { onSuccess: () => onClose() })
}
>
{del.isPending ? <span className="loading loading-spinner loading-xs" /> : null}
Delete
</button>
)}
</div>
</Modal>
);
}
packages/web/src/pages/ResponsesPage.jsx
+15 -33
View File
@@ -6,6 +6,7 @@ import {
useHttpPages,
useUpsertHttpPage,
} from "../api/hooks.js";
import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
import { formatTime } from "../lib/format.jsx";
const emptyForm = {
@@ -116,6 +117,7 @@ export function ResponsesPage() {
type="button"
className="btn btn-ghost btn-xs"
title="Edit"
aria-label="Edit"
onClick={() => openEdit(p)}
>
<LuPencil className="size-4" />
@@ -124,6 +126,7 @@ export function ResponsesPage() {
type="button"
className="btn btn-ghost btn-xs text-error"
title={p.system ? "System pages cannot be deleted" : "Delete"}
aria-label={p.system ? "System pages cannot be deleted" : "Delete"}
disabled={p.system}
onClick={() => setConfirmDelete(p)}
>
@@ -227,39 +230,18 @@ export function ResponsesPage() {
</form>
) : null}
{confirmDelete ? (
<dialog className="modal modal-open">
<div className="modal-box">
<h3 className="font-bold">Delete {confirmDelete.name}?</h3>
<p className="text-sm mt-2">
Workflows that reference this page will fail validation on next save.
</p>
{del.isError ? (
<p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
) : null}
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
Cancel
</button>
<button
type="button"
className="btn btn-error"
disabled={del.isPending || confirmDelete.system}
onClick={() =>
del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
}
>
Delete
</button>
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={() => setConfirmDelete(null)}>
close
</button>
</form>
</dialog>
) : null}
<ConfirmDialog
open={Boolean(confirmDelete)}
title={confirmDelete ? `Delete ${confirmDelete.name}?` : ""}
message="Workflows that reference this page will fail validation on next save."
error={del.isError ? errorMessage(del.error) : null}
loading={del.isPending}
confirmDisabled={Boolean(confirmDelete?.system)}
onCancel={() => setConfirmDelete(null)}
onConfirm={() =>
del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
}
/>
</div>
);
}
packages/web/src/pages/ScriptsPage.jsx
+18 -37
View File
@@ -8,6 +8,7 @@ import {
useInstallPlugin,
useScripts,
} from "../api/hooks.js";
import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
import { ScriptIcon } from "../components/ScriptIcon.jsx";
import { TagBadge } from "../components/TagBadge.jsx";
import { scriptTags } from "../lib/script.js";
@@ -156,6 +157,7 @@ export function ScriptsPage() {
type="button"
className="btn btn-ghost btn-xs"
title="Dry run"
aria-label="Dry run"
onClick={() =>
navigate(`/scripts/${encodeURIComponent(name)}/dry-run`)
}
@@ -167,6 +169,7 @@ export function ScriptsPage() {
type="button"
className="btn btn-ghost btn-xs"
title="Fork"
aria-label="Fork"
onClick={() => {
setForkFor(name);
setForkId(
@@ -183,6 +186,7 @@ export function ScriptsPage() {
to={`/scripts/${encodeURIComponent(name)}/edit`}
className="btn btn-ghost btn-xs"
title="Edit"
aria-label="Edit"
>
<LuPencil className="size-4" />
</Link>
@@ -192,6 +196,7 @@ export function ScriptsPage() {
type="button"
className="btn btn-ghost btn-xs text-error"
title="Delete"
aria-label="Delete"
onClick={() => setConfirmDelete(name)}
>
<LuTrash2 className="size-4" />
@@ -259,43 +264,19 @@ export function ScriptsPage() {
</dialog>
) : null}
{confirmDelete ? (
<dialog className="modal modal-open">
<div className="modal-box">
<h3 className="font-semibold">Delete {confirmDelete}?</h3>
<p className="text-sm opacity-70 py-2">This uninstalls the plugin.</p>
{del.isError ? (
<p className="text-error text-sm">{errorMessage(del.error)}</p>
) : null}
<div className="modal-action">
<button
type="button"
className="btn btn-ghost btn-sm"
onClick={() => setConfirmDelete(null)}
>
Cancel
</button>
<button
type="button"
className="btn btn-error btn-sm"
disabled={del.isPending}
onClick={() =>
del.mutate(confirmDelete, {
onSuccess: () => setConfirmDelete(null),
})
}
>
Delete
</button>
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={() => setConfirmDelete(null)}>
close
</button>
</form>
</dialog>
) : null}
<ConfirmDialog
open={Boolean(confirmDelete)}
title={confirmDelete ? `Delete ${confirmDelete}?` : ""}
message="This uninstalls the plugin."
error={del.isError ? errorMessage(del.error) : null}
loading={del.isPending}
onCancel={() => setConfirmDelete(null)}
onConfirm={() =>
del.mutate(confirmDelete, {
onSuccess: () => setConfirmDelete(null),
})
}
/>
</div>
);
}
packages/web/src/pages/SecretsPage.jsx
+17 -38
View File
@@ -3,6 +3,8 @@ import { useLocation, useNavigate, useParams, useSearchParams } from "react-rout
import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
import { errorMessage } from "../api/client.js";
import { useDeleteSecret, useOwners, useSecrets } from "../api/hooks.js";
import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
import { FormSelect } from "../components/FormControls.jsx";
import { SecretEditorModal } from "../components/SecretEditorModal.jsx";
import { formatTime } from "../lib/format.jsx";
@@ -81,8 +83,7 @@ export function SecretsPage() {
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
<h1 className="text-xl font-semibold">Secrets</h1>
<div className="flex gap-2">
<select
className="select select-sm"
<FormSelect
value={ownerFilter}
onChange={(e) => {
setOwnerFilter(e.target.value);
@@ -101,7 +102,7 @@ export function SecretsPage() {
{o}
</option>
))}
</select>
</FormSelect>
<button
type="button"
className="btn btn-primary btn-sm"
@@ -154,6 +155,7 @@ export function SecretsPage() {
type="button"
className="btn btn-ghost btn-xs"
title="Replace value"
aria-label="Replace value"
onClick={() =>
navigate(
`/secrets/${encodeURIComponent(s.owner)}/${encodeURIComponent(s.name)}/edit`,
@@ -166,6 +168,7 @@ export function SecretsPage() {
type="button"
className="btn btn-ghost btn-xs text-error"
title="Delete"
aria-label="Delete"
onClick={() => setConfirmDelete(s)}
>
<LuTrash2 className="size-4" />
@@ -190,41 +193,17 @@ export function SecretsPage() {
/>
) : null}
{confirmDelete ? (
<dialog className="modal modal-open">
<div className="modal-box">
<h3 className="font-bold">
Delete {confirmDelete.owner}/{confirmDelete.name}?
</h3>
<p className="text-sm mt-2">
This cannot be undone. Workflows that retrieve this name will fail.
</p>
{del.isError ? (
<p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
) : null}
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
Cancel
</button>
<button
type="button"
className="btn btn-error"
disabled={del.isPending}
onClick={() =>
del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
}
>
Delete
</button>
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={() => setConfirmDelete(null)}>
close
</button>
</form>
</dialog>
) : null}
<ConfirmDialog
open={Boolean(confirmDelete)}
title={confirmDelete ? `Delete ${confirmDelete.owner}/${confirmDelete.name}?` : ""}
message="This cannot be undone. Workflows that retrieve this name will fail."
error={del.isError ? errorMessage(del.error) : null}
loading={del.isPending}
onCancel={() => setConfirmDelete(null)}
onConfirm={() =>
del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
}
/>
</div>
);
}
packages/web/src/pages/UsersPage.jsx
+13 -30
View File
@@ -3,6 +3,7 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
import { errorMessage } from "../api/client.js";
import { useDeleteUser, useUsers } from "../api/hooks.js";
import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
import { UserEditorModal } from "../components/UserEditorModal.jsx";
export function UsersPage() {
@@ -88,6 +89,7 @@ export function UsersPage() {
type="button"
className="btn btn-ghost btn-xs"
title="Edit"
aria-label="Edit"
onClick={() =>
navigate(`/users/${encodeURIComponent(u.username)}/edit`)
}
@@ -98,6 +100,7 @@ export function UsersPage() {
type="button"
className="btn btn-ghost btn-xs text-error"
title="Delete"
aria-label="Delete"
onClick={() => setConfirmDelete(u)}
>
<LuTrash2 className="size-4" />
@@ -118,36 +121,16 @@ export function UsersPage() {
/>
) : null}
{confirmDelete ? (
<dialog className="modal modal-open">
<div className="modal-box">
<h3 className="font-bold">Delete {confirmDelete.username}?</h3>
{del.isError ? (
<p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
) : null}
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
Cancel
</button>
<button
type="button"
className="btn btn-error"
disabled={del.isPending}
onClick={() =>
del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
}
>
Delete
</button>
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={() => setConfirmDelete(null)}>
close
</button>
</form>
</dialog>
) : null}
<ConfirmDialog
open={Boolean(confirmDelete)}
title={confirmDelete ? `Delete ${confirmDelete.username}?` : ""}
error={del.isError ? errorMessage(del.error) : null}
loading={del.isPending}
onCancel={() => setConfirmDelete(null)}
onConfirm={() =>
del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
}
/>
</div>
);
}
packages/web/src/pages/VariablesPage.jsx
+21 -38
View File
@@ -3,6 +3,8 @@ import { useLocation, useNavigate, useParams, useSearchParams } from "react-rout
import { LuPencil, LuPlus, LuTrash2 } from "react-icons/lu";
import { errorMessage } from "../api/client.js";
import { useDeleteVariable, useOwners, useVariables } from "../api/hooks.js";
import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
import { FormSelect } from "../components/FormControls.jsx";
import { VariableEditorModal } from "../components/VariableEditorModal.jsx";
import { formatTime } from "../lib/format.jsx";
@@ -110,8 +112,7 @@ export function VariablesPage() {
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
<h1 className="text-xl font-semibold">Variables</h1>
<div className="flex gap-2">
<select
className="select select-sm"
<FormSelect
value={ownerFilter}
onChange={(e) => {
setOwnerFilter(e.target.value);
@@ -130,7 +131,7 @@ export function VariablesPage() {
{o}
</option>
))}
</select>
</FormSelect>
<button
type="button"
className="btn btn-primary btn-sm"
@@ -192,6 +193,7 @@ export function VariablesPage() {
type="button"
className="btn btn-ghost btn-xs"
title="Edit"
aria-label="Edit"
onClick={() =>
navigate(
`/variables/${encodeURIComponent(row.owner)}/${encodeURIComponent(row.name)}/edit`,
@@ -204,6 +206,7 @@ export function VariablesPage() {
type="button"
className="btn btn-ghost btn-xs text-error"
title="Delete"
aria-label="Delete"
onClick={() => setConfirmDelete(row)}
>
<LuTrash2 className="size-4" />
@@ -228,41 +231,21 @@ export function VariablesPage() {
/>
) : null}
{confirmDelete ? (
<dialog className="modal modal-open">
<div className="modal-box">
<h3 className="font-bold">
Delete {confirmDelete.owner}/{confirmDelete.name}?
</h3>
<p className="text-sm mt-2">
This cannot be undone. Workflows that reference $VAR_{confirmDelete.name} will fail.
</p>
{del.isError ? (
<p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
) : null}
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
Cancel
</button>
<button
type="button"
className="btn btn-error"
disabled={del.isPending}
onClick={() =>
del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
}
>
Delete
</button>
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={() => setConfirmDelete(null)}>
close
</button>
</form>
</dialog>
) : null}
<ConfirmDialog
open={Boolean(confirmDelete)}
title={confirmDelete ? `Delete ${confirmDelete.owner}/${confirmDelete.name}?` : ""}
message={
confirmDelete
? `This cannot be undone. Workflows that reference $VAR_${confirmDelete.name} will fail.`
: ""
}
error={del.isError ? errorMessage(del.error) : null}
loading={del.isPending}
onCancel={() => setConfirmDelete(null)}
onConfirm={() =>
del.mutate(confirmDelete.id, { onSuccess: () => setConfirmDelete(null) })
}
/>
</div>
);
}
packages/web/src/pages/WorkflowEditPage.jsx
+3 -4
View File
@@ -20,10 +20,8 @@ import {
saveErrorMessage,
saveWarningsFromError,
} from "../components/workflow/SaveWorkflowWarningsDialog.jsx";
import {
ConfirmDialog,
WorkflowRevisionBanner,
} from "../components/workflow/WorkflowRevisionBanner.jsx";
import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
import { WorkflowRevisionBanner } from "../components/workflow/WorkflowRevisionBanner.jsx";
import { NEW_WORKFLOW_YAML, parseWorkflowYaml } from "../lib/workflow-doc.js";
import { useNotifications } from "../notifications.jsx";
@@ -465,6 +463,7 @@ export function WorkflowEditPage() {
title="Discard unsaved changes?"
message="You have unsaved edits. Switching versions will discard them."
confirmLabel="Discard"
confirmClass="btn-warning"
pending={false}
onCancel={() => setDiscardConfirm(null)}
onConfirm={() => {
packages/web/src/pages/WorkflowTrashPage.jsx
+23 -40
View File
@@ -7,6 +7,7 @@ import {
useRestoreWorkflowTrash,
useWorkflowTrash,
} from "../api/hooks.js";
import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
import { formatTime } from "../lib/format.jsx";
import { useNotifications } from "../notifications.jsx";
@@ -87,6 +88,7 @@ export function WorkflowTrashPage() {
type="button"
className="btn btn-ghost btn-xs"
title="Restore"
aria-label="Restore"
disabled={restore.isPending}
onClick={() =>
restore.mutate(item.id, {
@@ -105,6 +107,7 @@ export function WorkflowTrashPage() {
type="button"
className="btn btn-ghost btn-xs text-error"
title="Delete permanently"
aria-label="Delete permanently"
onClick={() => setConfirmPurge(item)}
>
<LuTrash2 className="size-4" />
@@ -117,46 +120,26 @@ export function WorkflowTrashPage() {
</div>
)}
{confirmPurge ? (
<dialog className="modal modal-open">
<div className="modal-box">
<h3 className="font-bold">Delete permanently?</h3>
<p className="mt-2 text-sm">
{confirmPurge.name ?? confirmPurge.file} ({confirmPurge.owner}/{confirmPurge.file})
will be removed forever, including revision history.
</p>
<div className="modal-action">
<button
type="button"
className="btn btn-ghost"
onClick={() => setConfirmPurge(null)}
>
Cancel
</button>
<button
type="button"
className="btn btn-error"
disabled={purge.isPending}
onClick={() =>
purge.mutate(confirmPurge.id, {
onSuccess: () => {
notify.success("Permanently deleted");
setConfirmPurge(null);
},
})
}
>
Delete forever
</button>
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={() => setConfirmPurge(null)}>
close
</button>
</form>
</dialog>
) : null}
<ConfirmDialog
open={Boolean(confirmPurge)}
title="Delete permanently?"
message={
confirmPurge
? `${confirmPurge.name ?? confirmPurge.file} (${confirmPurge.owner}/${confirmPurge.file}) will be removed forever, including revision history.`
: ""
}
confirmLabel="Delete forever"
loading={purge.isPending}
onCancel={() => setConfirmPurge(null)}
onConfirm={() =>
purge.mutate(confirmPurge.id, {
onSuccess: () => {
notify.success("Permanently deleted");
setConfirmPurge(null);
},
})
}
/>
</div>
);
}
packages/web/src/pages/WorkflowsPage.jsx
+27 -38
View File
@@ -10,6 +10,7 @@ import {
useWorkflows,
} from "../api/hooks.js";
import { DuplicateWorkflowDialog } from "../components/DuplicateWorkflowDialog.jsx";
import { ConfirmDialog } from "../components/ConfirmDialog.jsx";
import { WorkflowFileIcon } from "../components/WorkflowFileIcon.jsx";
import { formatTime, WorkflowStatusBadge } from "../lib/format.jsx";
@@ -80,6 +81,7 @@ export function WorkflowsPage() {
type="button"
className="btn btn-ghost btn-sm"
title="Reregister workflows"
aria-label="Reregister workflows"
disabled={reregister.isPending}
onClick={() => reregister.mutate()}
>
@@ -153,7 +155,11 @@ export function WorkflowsPage() {
<td className="whitespace-nowrap">{formatTime(w.lastInvokedAt)}</td>
<td>{w.invocationCount}</td>
<td className="text-right whitespace-nowrap">
<label className="inline-flex items-center mr-1" title={w.enabled ? "Disable" : "Enable"}>
<label
className="inline-flex items-center mr-1"
title={w.enabled ? "Disable" : "Enable"}
aria-label={w.enabled ? "Disable" : "Enable"}
>
<input
type="checkbox"
className="toggle toggle-success toggle-xs"
@@ -172,6 +178,7 @@ export function WorkflowsPage() {
type="button"
className="btn btn-ghost btn-xs"
title="Run"
aria-label="Run"
disabled={Boolean(w.loadError) || runningKey === w.key}
onClick={() => onRun(w)}
>
@@ -184,6 +191,7 @@ export function WorkflowsPage() {
<Link
className="btn btn-ghost btn-xs"
title="Events"
aria-label="Events"
to={`/events?workflow=${encodeURIComponent(w.key)}`}
>
<LuActivity className="size-4" />
@@ -191,6 +199,7 @@ export function WorkflowsPage() {
<Link
className="btn btn-ghost btn-xs"
title="Edit"
aria-label="Edit"
to={`/workflows/${encodeURIComponent(w.owner)}/${encodeURIComponent(w.file)}/edit`}
>
<LuPencil className="size-4" />
@@ -199,6 +208,7 @@ export function WorkflowsPage() {
type="button"
className="btn btn-ghost btn-xs"
title="Duplicate"
aria-label="Duplicate"
disabled={Boolean(w.loadError)}
onClick={() => setDuplicateSource(w)}
>
@@ -208,6 +218,7 @@ export function WorkflowsPage() {
type="button"
className="btn btn-ghost btn-xs text-error"
title="Move to trash"
aria-label="Move to trash"
onClick={() => setConfirmDelete(w)}
>
<LuTrash2 className="size-4" />
@@ -233,43 +244,21 @@ export function WorkflowsPage() {
/>
) : null}
{confirmDelete ? (
<dialog className="modal modal-open">
<div className="modal-box">
<h3 className="font-bold">Move {confirmDelete.key} to trash?</h3>
<p className="mt-2 text-sm opacity-70">
The workflow is removed from the list but kept in trash for 7 days. Revision history
is preserved.
</p>
{del.isError ? (
<p className="text-error text-sm mt-2">{errorMessage(del.error)}</p>
) : null}
<div className="modal-action">
<button type="button" className="btn btn-ghost" onClick={() => setConfirmDelete(null)}>
Cancel
</button>
<button
type="button"
className="btn btn-error"
disabled={del.isPending}
onClick={() =>
del.mutate(
{ owner: confirmDelete.owner, file: confirmDelete.file },
{ onSuccess: () => setConfirmDelete(null) },
)
}
>
Move to trash
</button>
</div>
</div>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={() => setConfirmDelete(null)}>
close
</button>
</form>
</dialog>
) : null}
<ConfirmDialog
open={Boolean(confirmDelete)}
title={confirmDelete ? `Move ${confirmDelete.key} to trash?` : ""}
message="The workflow is removed from the list but kept in trash for 7 days. Revision history is preserved."
confirmLabel="Move to trash"
error={del.isError ? errorMessage(del.error) : null}
loading={del.isPending}
onCancel={() => setConfirmDelete(null)}
onConfirm={() =>
del.mutate(
{ owner: confirmDelete.owner, file: confirmDelete.file },
{ onSuccess: () => setConfirmDelete(null) },
)
}
/>
</div>
);
}