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/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>
);
}