feat(workflows): add revision history, trash, UUID naming, and backup
- Store up to 50 revisions per workflow in SQLite with normalized SHA dedup - Soft-delete workflows to trash (7-day retention) with restore and permanent purge - Assign UUID filenames for new and duplicated workflows; show name + file in UI - Warn on invalid YAML, unknown scripts, and plaintext secrets with save-anyway option - Add workflow backup zip (workflows + plugins) and merge/replace restore - Trash page, history panel on editor, and smoke test Co-authored-by: Nasyarobby Putra <nasyarobby@gmail.com>
This commit is contained in:
Cursor Agent
@@ -3,6 +3,7 @@ import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { LuArrowLeft, LuCopy, LuPause, LuPlay, LuSave } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useCreateWorkflow,
|
||||
useOwners,
|
||||
useSaveWorkflow,
|
||||
useSetWorkflowEnabled,
|
||||
@@ -11,6 +12,13 @@ import {
|
||||
import { DuplicateWorkflowDialog } from "../components/DuplicateWorkflowDialog.jsx";
|
||||
import { WorkflowFileIcon } from "../components/WorkflowFileIcon.jsx";
|
||||
import { WorkflowVisualEditor } from "../components/workflow/WorkflowVisualEditor.jsx";
|
||||
import { WorkflowHistoryPanel } from "../components/workflow/WorkflowHistoryPanel.jsx";
|
||||
import {
|
||||
SaveWorkflowWarningsDialog,
|
||||
isSaveWarningsError,
|
||||
saveErrorMessage,
|
||||
saveWarningsFromError,
|
||||
} from "../components/workflow/SaveWorkflowWarningsDialog.jsx";
|
||||
import { NEW_WORKFLOW_YAML, parseWorkflowYaml } from "../lib/workflow-doc.js";
|
||||
import { useNotifications } from "../notifications.jsx";
|
||||
|
||||
@@ -87,48 +95,63 @@ function WorkflowEditorLayout({
|
||||
|
||||
export function WorkflowNewPage() {
|
||||
const navigate = useNavigate();
|
||||
const { notify } = useNotifications();
|
||||
const { data: owners = [] } = useOwners();
|
||||
const [owner, setOwner] = useState("");
|
||||
const [file, setFile] = useState("");
|
||||
const [content, setContent] = useState(NEW_WORKFLOW_YAML);
|
||||
const [savedYaml] = useState(NEW_WORKFLOW_YAML);
|
||||
const save = useSaveWorkflow();
|
||||
const [saveWarnings, setSaveWarnings] = useState(null);
|
||||
const create = useCreateWorkflow();
|
||||
|
||||
useEffect(() => {
|
||||
if (!owner && owners[0]) setOwner(owners[0]);
|
||||
}, [owner, owners]);
|
||||
|
||||
function onSave() {
|
||||
const yamlFile = file.endsWith(".yaml") || file.endsWith(".yml") ? file : `${file}.yaml`;
|
||||
save.mutate(
|
||||
{ owner, file: yamlFile, content },
|
||||
function onSave(saveAnyway = false) {
|
||||
create.mutate(
|
||||
{ owner, content, saveAnyway },
|
||||
{
|
||||
onSuccess: () =>
|
||||
onSuccess: (data) => {
|
||||
setSaveWarnings(null);
|
||||
notify.success(`Created ${data.file}`);
|
||||
navigate(
|
||||
`/workflows/${encodeURIComponent(owner)}/${encodeURIComponent(yamlFile)}/edit`,
|
||||
),
|
||||
`/workflows/${encodeURIComponent(data.owner)}/${encodeURIComponent(data.file)}/edit`,
|
||||
);
|
||||
},
|
||||
onError: (err) => {
|
||||
if (isSaveWarningsError(err)) {
|
||||
setSaveWarnings(saveWarningsFromError(err));
|
||||
return;
|
||||
}
|
||||
notify.error(errorMessage(err));
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<WorkflowEditorLayout
|
||||
title="New workflow"
|
||||
onSave={onSave}
|
||||
savePending={save.isPending}
|
||||
saveDisabled={!owner || !file}
|
||||
saveError={save.isError ? errorMessage(save.error) : null}
|
||||
>
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-3">
|
||||
<WorkflowVisualEditor
|
||||
yaml={content}
|
||||
onYamlChange={setContent}
|
||||
owner={owner}
|
||||
file={file}
|
||||
savedYaml={savedYaml}
|
||||
showTest={false}
|
||||
extraChrome={
|
||||
<>
|
||||
<>
|
||||
<WorkflowEditorLayout
|
||||
title="New workflow"
|
||||
onSave={() => onSave(false)}
|
||||
savePending={create.isPending}
|
||||
saveDisabled={!owner}
|
||||
saveError={create.isError && !saveWarnings ? errorMessage(create.error) : null}
|
||||
>
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-3">
|
||||
<p className="text-sm opacity-70 shrink-0">
|
||||
A UUID filename is assigned on save (for example{" "}
|
||||
<span className="font-mono">a1b2c3d4-….yaml</span>). Edit the{" "}
|
||||
<span className="font-mono">name:</span> field for the display name.
|
||||
</p>
|
||||
<WorkflowVisualEditor
|
||||
yaml={content}
|
||||
onYamlChange={setContent}
|
||||
owner={owner}
|
||||
file=""
|
||||
savedYaml={savedYaml}
|
||||
showTest={false}
|
||||
extraChrome={
|
||||
<input
|
||||
className="input input-sm w-full sm:max-w-xs"
|
||||
placeholder="owner"
|
||||
@@ -136,18 +159,19 @@ export function WorkflowNewPage() {
|
||||
onChange={(e) => setOwner(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="input input-sm w-full sm:max-w-xs"
|
||||
placeholder="file.yaml"
|
||||
value={file}
|
||||
onChange={(e) => setFile(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</>
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</WorkflowEditorLayout>
|
||||
{saveWarnings ? (
|
||||
<SaveWorkflowWarningsDialog
|
||||
warnings={saveWarnings}
|
||||
pending={create.isPending}
|
||||
onCancel={() => setSaveWarnings(null)}
|
||||
onSaveAnyway={() => onSave(true)}
|
||||
/>
|
||||
</div>
|
||||
</WorkflowEditorLayout>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -165,6 +189,7 @@ export function WorkflowEditPage() {
|
||||
const [contentReady, setContentReady] = useState(false);
|
||||
const [testOpen, setTestOpen] = useState(false);
|
||||
const [duplicateOpen, setDuplicateOpen] = useState(false);
|
||||
const [saveWarnings, setSaveWarnings] = useState(null);
|
||||
const routeKey = `${owner}/${file}`;
|
||||
const [activeKey, setActiveKey] = useState(routeKey);
|
||||
|
||||
@@ -186,14 +211,21 @@ export function WorkflowEditPage() {
|
||||
}
|
||||
}, [existing.data, existing.isLoading, contentReady]);
|
||||
|
||||
function onSave() {
|
||||
function onSave(saveAnyway = false) {
|
||||
save.mutate(
|
||||
{ owner, file, content },
|
||||
{ owner, file, content, saveAnyway },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setSavedYaml(content);
|
||||
setSaveWarnings(null);
|
||||
notify.success("Workflow saved");
|
||||
},
|
||||
onError: (err) => {
|
||||
if (isSaveWarningsError(err)) {
|
||||
setSaveWarnings(saveWarningsFromError(err));
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -221,16 +253,21 @@ export function WorkflowEditPage() {
|
||||
const parsedDoc = parseWorkflowYaml(content);
|
||||
const yamlOk = !parsedDoc.parseError;
|
||||
const workflowName = parsedDoc.doc?.name?.trim();
|
||||
const pageTitle = workflowName ? `${workflowName} (${file})` : file;
|
||||
const pageTitle = workflowName ? `${workflowName}` : file;
|
||||
|
||||
return (
|
||||
<>
|
||||
<WorkflowEditorLayout
|
||||
title={pageTitle}
|
||||
title={
|
||||
<span className="flex min-w-0 flex-col items-start gap-0.5">
|
||||
<span className="truncate">{pageTitle}</span>
|
||||
<span className="text-xs font-normal font-mono opacity-50">{file}</span>
|
||||
</span>
|
||||
}
|
||||
savePending={save.isPending}
|
||||
saveDisabled={!contentReady}
|
||||
saveError={save.isError ? errorMessage(save.error) : null}
|
||||
onSave={onSave}
|
||||
saveError={save.isError && !saveWarnings ? saveErrorMessage(save.error) : null}
|
||||
onSave={() => onSave(false)}
|
||||
onTest={() => setTestOpen(true)}
|
||||
onDuplicate={() => setDuplicateOpen(true)}
|
||||
onToggleEnabled={() =>
|
||||
@@ -245,17 +282,34 @@ export function WorkflowEditPage() {
|
||||
enableDisabled={!contentReady || Boolean(existing.data?.parseError) || !yamlOk}
|
||||
enableError={setEnabled.isError ? errorMessage(setEnabled.error) : null}
|
||||
>
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-3">
|
||||
<WorkflowVisualEditor
|
||||
yaml={content}
|
||||
onYamlChange={setContent}
|
||||
owner={owner}
|
||||
file={file}
|
||||
savedYaml={savedYaml}
|
||||
showTest
|
||||
testOpen={testOpen}
|
||||
onTestClose={() => setTestOpen(false)}
|
||||
/>
|
||||
<div className="flex min-h-0 flex-1 gap-3">
|
||||
<div className="flex min-h-0 min-w-0 flex-1 flex-col gap-3">
|
||||
<WorkflowVisualEditor
|
||||
yaml={content}
|
||||
onYamlChange={setContent}
|
||||
owner={owner}
|
||||
file={file}
|
||||
savedYaml={savedYaml}
|
||||
showTest
|
||||
testOpen={testOpen}
|
||||
onTestClose={() => setTestOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden w-64 shrink-0 xl:block">
|
||||
<WorkflowHistoryPanel
|
||||
owner={owner}
|
||||
file={file}
|
||||
onReverted={() => {
|
||||
existing.refetch().then((result) => {
|
||||
const next = result.data?.content;
|
||||
if (next != null) {
|
||||
setContent(next);
|
||||
setSavedYaml(next);
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</WorkflowEditorLayout>
|
||||
{duplicateOpen ? (
|
||||
@@ -271,6 +325,14 @@ export function WorkflowEditPage() {
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
{saveWarnings ? (
|
||||
<SaveWorkflowWarningsDialog
|
||||
warnings={saveWarnings}
|
||||
pending={save.isPending}
|
||||
onCancel={() => setSaveWarnings(null)}
|
||||
onSaveAnyway={() => onSave(true)}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { LuArrowLeft, LuRotateCcw, LuTrash2 } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
usePurgeWorkflowTrash,
|
||||
useRestoreWorkflowTrash,
|
||||
useWorkflowTrash,
|
||||
} from "../api/hooks.js";
|
||||
import { formatTime } from "../lib/format.jsx";
|
||||
import { useNotifications } from "../notifications.jsx";
|
||||
|
||||
function formatAge(ms) {
|
||||
if (ms == null || ms < 0) return "—";
|
||||
const mins = Math.floor(ms / 60_000);
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hours = Math.floor(mins / 60);
|
||||
if (hours < 48) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
export function WorkflowTrashPage() {
|
||||
const navigate = useNavigate();
|
||||
const { notify } = useNotifications();
|
||||
const { data: items = [], isLoading } = useWorkflowTrash();
|
||||
const restore = useRestoreWorkflowTrash();
|
||||
const purge = usePurgeWorkflowTrash();
|
||||
const [confirmPurge, setConfirmPurge] = useState(null);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link to="/workflows" className="btn btn-ghost btn-sm btn-square" aria-label="Back">
|
||||
<LuArrowLeft className="size-4" />
|
||||
</Link>
|
||||
<h1 className="text-xl font-semibold">Workflow trash</h1>
|
||||
</div>
|
||||
|
||||
<p className="text-sm opacity-70">
|
||||
Deleted workflows are kept for 7 days. Restore to bring them back, or delete permanently
|
||||
to remove the file and revision history.
|
||||
</p>
|
||||
|
||||
{restore.isError ? (
|
||||
<p className="text-error text-sm">{errorMessage(restore.error)}</p>
|
||||
) : null}
|
||||
{purge.isError ? (
|
||||
<p className="text-error text-sm">{errorMessage(purge.error)}</p>
|
||||
) : null}
|
||||
|
||||
{isLoading ? (
|
||||
<span className="loading loading-spinner" />
|
||||
) : !items.length ? (
|
||||
<p className="opacity-50">Trash is empty.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>File</th>
|
||||
<th>Owner</th>
|
||||
<th>Deleted</th>
|
||||
<th>Age</th>
|
||||
<th>Purge in</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item) => (
|
||||
<tr key={item.id} className="hover">
|
||||
<td>{item.name ?? "—"}</td>
|
||||
<td className="font-mono text-xs">{item.file}</td>
|
||||
<td className="font-mono text-xs">{item.owner}</td>
|
||||
<td className="whitespace-nowrap">{formatTime(item.deleted_at)}</td>
|
||||
<td>{formatAge(item.age_ms)}</td>
|
||||
<td>
|
||||
{item.days_until_purge <= 0 ? (
|
||||
<span className="text-warning">soon</span>
|
||||
) : (
|
||||
`${item.days_until_purge}d`
|
||||
)}
|
||||
</td>
|
||||
<td className="text-right whitespace-nowrap">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Restore"
|
||||
disabled={restore.isPending}
|
||||
onClick={() =>
|
||||
restore.mutate(item.id, {
|
||||
onSuccess: (data) => {
|
||||
notify.success("Workflow restored");
|
||||
navigate(
|
||||
`/workflows/${encodeURIComponent(data.owner)}/${encodeURIComponent(data.file)}/edit`,
|
||||
);
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<LuRotateCcw className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
title="Delete permanently"
|
||||
onClick={() => setConfirmPurge(item)}
|
||||
>
|
||||
<LuTrash2 className="size-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</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}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,6 +4,8 @@ import { LuActivity, LuCopy, LuPencil, LuPlay, LuPlus, LuRefreshCw, LuTrash2, Lu
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useDeleteWorkflow,
|
||||
useDownloadWorkflowBackup,
|
||||
useRestoreWorkflowBackup,
|
||||
useReregisterWorkflows,
|
||||
useRunWorkflow,
|
||||
useSetWorkflowEnabled,
|
||||
@@ -12,6 +14,7 @@ import {
|
||||
import { DuplicateWorkflowDialog } from "../components/DuplicateWorkflowDialog.jsx";
|
||||
import { WorkflowFileIcon } from "../components/WorkflowFileIcon.jsx";
|
||||
import { formatTime, WorkflowStatusBadge } from "../lib/format.jsx";
|
||||
import { useNotifications } from "../notifications.jsx";
|
||||
|
||||
export function WorkflowsPage() {
|
||||
const navigate = useNavigate();
|
||||
@@ -25,6 +28,10 @@ export function WorkflowsPage() {
|
||||
const run = useRunWorkflow();
|
||||
const setEnabled = useSetWorkflowEnabled();
|
||||
const reregister = useReregisterWorkflows();
|
||||
const backup = useDownloadWorkflowBackup();
|
||||
const restoreBackup = useRestoreWorkflowBackup();
|
||||
const { notify } = useNotifications();
|
||||
const [restoreMode, setRestoreMode] = useState("merge");
|
||||
|
||||
if (editParam) {
|
||||
const slash = editParam.indexOf("/");
|
||||
@@ -72,6 +79,10 @@ export function WorkflowsPage() {
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h1 className="text-xl font-semibold">Workflows</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link to="/workflows/trash" className="btn btn-ghost btn-sm">
|
||||
<LuTrash2 className="size-4" />
|
||||
Trash
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-sm"
|
||||
@@ -102,6 +113,56 @@ export function WorkflowsPage() {
|
||||
<p className="text-error text-sm">{errorMessage(setEnabled.error)}</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
disabled={backup.isPending}
|
||||
onClick={() =>
|
||||
backup.mutate(undefined, {
|
||||
onSuccess: () => notify.success("Backup downloaded"),
|
||||
onError: (err) => notify.error(errorMessage(err)),
|
||||
})
|
||||
}
|
||||
>
|
||||
Download backup
|
||||
</button>
|
||||
<label className="btn btn-ghost btn-xs cursor-pointer">
|
||||
Restore backup
|
||||
<input
|
||||
type="file"
|
||||
accept=".zip,application/zip"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
e.target.value = "";
|
||||
if (!file) return;
|
||||
restoreBackup.mutate(
|
||||
{ file, mode: restoreMode },
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
notify.success("Backup restored");
|
||||
if (data.warnings?.length) {
|
||||
notify.warning(data.warnings.join("; "));
|
||||
}
|
||||
},
|
||||
onError: (err) => notify.error(errorMessage(err)),
|
||||
},
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<select
|
||||
className="select select-xs"
|
||||
value={restoreMode}
|
||||
onChange={(e) => setRestoreMode(e.target.value)}
|
||||
aria-label="Restore mode"
|
||||
>
|
||||
<option value="merge">Merge restore</option>
|
||||
<option value="replace">Replace restore</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<span className="loading loading-spinner" />
|
||||
) : (
|
||||
@@ -128,6 +189,7 @@ export function WorkflowsPage() {
|
||||
>
|
||||
<WorkflowFileIcon className="size-7 shrink-0" />
|
||||
{w.name}
|
||||
<span className="block font-mono text-xs opacity-50">{w.file}</span>
|
||||
</Link>
|
||||
{!w.registered ? (
|
||||
<span
|
||||
@@ -202,7 +264,7 @@ export function WorkflowsPage() {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
title="Delete"
|
||||
title="Move to trash"
|
||||
onClick={() => setConfirmDelete(w)}
|
||||
>
|
||||
<LuTrash2 className="size-4" />
|
||||
@@ -231,7 +293,11 @@ export function WorkflowsPage() {
|
||||
{confirmDelete ? (
|
||||
<dialog className="modal modal-open">
|
||||
<div className="modal-box">
|
||||
<h3 className="font-bold">Delete {confirmDelete.key}?</h3>
|
||||
<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}
|
||||
@@ -250,7 +316,7 @@ export function WorkflowsPage() {
|
||||
)
|
||||
}
|
||||
>
|
||||
Delete
|
||||
Move to trash
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user