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
@@ -10,6 +10,7 @@ import { ScriptDryRunPage } from "./pages/ScriptDryRunPage.jsx";
|
||||
import { ScriptEditPage, ScriptNewPage } from "./pages/ScriptEditPage.jsx";
|
||||
import { WorkflowsPage } from "./pages/WorkflowsPage.jsx";
|
||||
import { WorkflowEditPage, WorkflowNewPage } from "./pages/WorkflowEditPage.jsx";
|
||||
import { WorkflowTrashPage } from "./pages/WorkflowTrashPage.jsx";
|
||||
import { EventsPage } from "./pages/EventsPage.jsx";
|
||||
import { EventDetailPage } from "./pages/EventDetailPage.jsx";
|
||||
import { FailuresPage } from "./pages/FailuresPage.jsx";
|
||||
@@ -59,6 +60,7 @@ export function App() {
|
||||
<Route path="/scripts/:name/dry-run" element={<ScriptDryRunPage />} />
|
||||
<Route path="/scripts/:name/edit" element={<ScriptEditPage />} />
|
||||
<Route path="/workflows" element={<WorkflowsPage />} />
|
||||
<Route path="/workflows/trash" element={<WorkflowTrashPage />} />
|
||||
<Route path="/workflows/new" element={<WorkflowNewPage />} />
|
||||
<Route path="/workflows/:owner/:file/edit" element={<WorkflowEditPage />} />
|
||||
<Route path="/events" element={<EventsPage />} />
|
||||
|
||||
@@ -191,17 +191,21 @@ export function useOwners() {
|
||||
export function useSaveWorkflow() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({ owner, file, content }) =>
|
||||
mutationFn: async ({ owner, file, content, saveAnyway }) =>
|
||||
(
|
||||
await api.put(
|
||||
`/workflows/${encodeURIComponent(owner)}/${encodeURIComponent(file)}`,
|
||||
{ content },
|
||||
{ content, ...(saveAnyway ? { saveAnyway: true } : {}) },
|
||||
)
|
||||
).data,
|
||||
onSuccess: () => {
|
||||
onSuccess: (_data, vars) => {
|
||||
qc.invalidateQueries({ queryKey: ["workflows"] });
|
||||
qc.invalidateQueries({ queryKey: ["owners"] });
|
||||
qc.invalidateQueries({ queryKey: ["dashboard"] });
|
||||
qc.invalidateQueries({
|
||||
queryKey: ["workflows", vars.owner, vars.file, "revisions"],
|
||||
});
|
||||
qc.invalidateQueries({ queryKey: ["workflows", vars.owner, vars.file] });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -235,6 +239,7 @@ export function useDeleteWorkflow() {
|
||||
).data,
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ["workflows"] });
|
||||
qc.invalidateQueries({ queryKey: ["workflows", "trash"] });
|
||||
qc.invalidateQueries({ queryKey: ["dashboard"] });
|
||||
},
|
||||
});
|
||||
@@ -572,3 +577,124 @@ export function useOpsBumpGeneration() {
|
||||
});
|
||||
}
|
||||
|
||||
export function useWorkflowTrash() {
|
||||
return useQuery({
|
||||
queryKey: ["workflows", "trash"],
|
||||
queryFn: async () => (await api.get("/workflows/trash")).data.items,
|
||||
});
|
||||
}
|
||||
|
||||
export function useRestoreWorkflowTrash() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async (id) =>
|
||||
(await api.post(`/workflows/trash/${encodeURIComponent(id)}/restore`)).data,
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ["workflows"] });
|
||||
qc.invalidateQueries({ queryKey: ["workflows", "trash"] });
|
||||
qc.invalidateQueries({ queryKey: ["owners"] });
|
||||
qc.invalidateQueries({ queryKey: ["dashboard"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function usePurgeWorkflowTrash() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async (id) =>
|
||||
(await api.delete(`/workflows/trash/${encodeURIComponent(id)}`)).data,
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ["workflows", "trash"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useWorkflowRevisions(owner, file, enabled = true) {
|
||||
return useQuery({
|
||||
queryKey: ["workflows", owner, file, "revisions"],
|
||||
queryFn: async () =>
|
||||
(
|
||||
await api.get(
|
||||
`/workflows/${encodeURIComponent(owner)}/${encodeURIComponent(file)}/revisions`,
|
||||
)
|
||||
).data,
|
||||
enabled: Boolean(owner && file) && enabled,
|
||||
});
|
||||
}
|
||||
|
||||
export function useRevertWorkflowRevision() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({ owner, file, revision, saveAnyway }) =>
|
||||
(
|
||||
await api.post(
|
||||
`/workflows/${encodeURIComponent(owner)}/${encodeURIComponent(file)}/revisions/${revision}/revert`,
|
||||
saveAnyway ? { saveAnyway: true } : {},
|
||||
)
|
||||
).data,
|
||||
onSuccess: (_data, vars) => {
|
||||
qc.invalidateQueries({ queryKey: ["workflows"] });
|
||||
qc.invalidateQueries({ queryKey: ["workflows", vars.owner, vars.file] });
|
||||
qc.invalidateQueries({
|
||||
queryKey: ["workflows", vars.owner, vars.file, "revisions"],
|
||||
});
|
||||
qc.invalidateQueries({ queryKey: ["dashboard"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateWorkflow() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({ owner, content, file, saveAnyway }) =>
|
||||
(
|
||||
await api.post(`/workflows/${encodeURIComponent(owner)}`, {
|
||||
content,
|
||||
...(file ? { file } : {}),
|
||||
...(saveAnyway ? { saveAnyway: true } : {}),
|
||||
})
|
||||
).data,
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ["workflows"] });
|
||||
qc.invalidateQueries({ queryKey: ["owners"] });
|
||||
qc.invalidateQueries({ queryKey: ["dashboard"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useDownloadWorkflowBackup() {
|
||||
return useMutation({
|
||||
mutationFn: async () => {
|
||||
const res = await api.get("/workflows/backup", { responseType: "blob" });
|
||||
const disposition = res.headers["content-disposition"] ?? "";
|
||||
const match = disposition.match(/filename="([^"]+)"/);
|
||||
const filename = match?.[1] ?? "jerapah-flow-backup.zip";
|
||||
const url = URL.createObjectURL(res.data);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
return { ok: true };
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useRestoreWorkflowBackup() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({ file, mode }) => {
|
||||
const buffer = await file.arrayBuffer();
|
||||
const zipBase64 = btoa(String.fromCharCode(...new Uint8Array(buffer)));
|
||||
return (await api.post("/workflows/backup/restore", { zipBase64, mode })).data;
|
||||
},
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ["workflows"] });
|
||||
qc.invalidateQueries({ queryKey: ["owners"] });
|
||||
qc.invalidateQueries({ queryKey: ["scripts"] });
|
||||
qc.invalidateQueries({ queryKey: ["dashboard"] });
|
||||
qc.invalidateQueries({ queryKey: ["ops-status"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,44 +1,22 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import { useDuplicateWorkflow, useOwners, useWorkflows } from "../api/hooks.js";
|
||||
import { ensureWorkflowFilename, suggestCopyFilename } from "../lib/workflow-doc.js";
|
||||
import { useDuplicateWorkflow, useOwners } from "../api/hooks.js";
|
||||
import { useNotifications } from "../notifications.jsx";
|
||||
|
||||
const EMPTY_WORKFLOWS = [];
|
||||
|
||||
export function DuplicateWorkflowDialog({ source, warnUnsaved, onClose, onDuplicated }) {
|
||||
const { notify } = useNotifications();
|
||||
const { data: owners = [] } = useOwners();
|
||||
const { data: workflows = EMPTY_WORKFLOWS } = useWorkflows();
|
||||
const duplicate = useDuplicateWorkflow();
|
||||
const [destOwner, setDestOwner] = useState(source.owner);
|
||||
const [destFile, setDestFile] = useState(() => suggestCopyFilename(source.file));
|
||||
const fileTouched = useRef(false);
|
||||
|
||||
const existingFiles = useMemo(
|
||||
() => workflows.filter((w) => w.owner === destOwner).map((w) => w.file),
|
||||
[workflows, destOwner],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (fileTouched.current) return;
|
||||
setDestFile(suggestCopyFilename(source.file, existingFiles));
|
||||
}, [source.file, existingFiles]);
|
||||
|
||||
const yamlFile = ensureWorkflowFilename(destFile);
|
||||
const sameAsSource = destOwner === source.owner && yamlFile === source.file;
|
||||
const exists = existingFiles.includes(yamlFile);
|
||||
const canSubmit = Boolean(destOwner && yamlFile) && !sameAsSource && !exists && !duplicate.isPending;
|
||||
|
||||
function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!canSubmit) return;
|
||||
if (destOwner === source.owner && duplicate.isPending) return;
|
||||
duplicate.mutate(
|
||||
{
|
||||
owner: source.owner,
|
||||
file: source.file,
|
||||
destOwner,
|
||||
destFile: yamlFile,
|
||||
},
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
@@ -54,11 +32,13 @@ export function DuplicateWorkflowDialog({ source, warnUnsaved, onClose, onDuplic
|
||||
<div className="modal-box">
|
||||
<h3 className="font-bold">Duplicate {source.key}?</h3>
|
||||
<p className="mt-2 text-sm opacity-70">
|
||||
The copy starts disabled. HTTP paths are rewritten when staying under the same owner so
|
||||
triggers do not collide.
|
||||
A new UUID filename is assigned automatically. The copy starts disabled. HTTP paths are
|
||||
rewritten when staying under the same owner so triggers do not collide.
|
||||
</p>
|
||||
{warnUnsaved ? (
|
||||
<p className="text-warning mt-2 text-sm">The copy uses the last saved YAML, not unsaved edits.</p>
|
||||
<p className="text-warning mt-2 text-sm">
|
||||
The copy uses the last saved YAML, not unsaved edits.
|
||||
</p>
|
||||
) : null}
|
||||
<form className="mt-4 space-y-3" onSubmit={onSubmit}>
|
||||
<label className="form-control w-full">
|
||||
@@ -76,24 +56,6 @@ export function DuplicateWorkflowDialog({ source, warnUnsaved, onClose, onDuplic
|
||||
))}
|
||||
</datalist>
|
||||
</label>
|
||||
<label className="form-control w-full">
|
||||
<span className="label py-0 text-sm">File</span>
|
||||
<input
|
||||
className="input input-sm w-full font-mono"
|
||||
placeholder="file.yaml"
|
||||
value={destFile}
|
||||
onChange={(e) => {
|
||||
fileTouched.current = true;
|
||||
setDestFile(e.target.value);
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
{sameAsSource ? (
|
||||
<p className="text-error text-sm">Choose a different owner or filename.</p>
|
||||
) : exists ? (
|
||||
<p className="text-error text-sm">{destOwner}/{yamlFile} already exists.</p>
|
||||
) : null}
|
||||
{duplicate.isError ? (
|
||||
<p className="text-error text-sm">{errorMessage(duplicate.error)}</p>
|
||||
) : null}
|
||||
@@ -101,7 +63,7 @@ export function DuplicateWorkflowDialog({ source, warnUnsaved, onClose, onDuplic
|
||||
<button type="button" className="btn btn-ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={!canSubmit}>
|
||||
<button type="submit" className="btn btn-primary" disabled={duplicate.isPending}>
|
||||
{duplicate.isPending ? (
|
||||
<span className="loading loading-spinner loading-xs" />
|
||||
) : null}
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
import { errorMessage } from "../../api/client.js";
|
||||
|
||||
export function SaveWorkflowWarningsDialog({ warnings, pending, onCancel, onSaveAnyway }) {
|
||||
if (!warnings?.length) return null;
|
||||
|
||||
return (
|
||||
<dialog className="modal modal-open">
|
||||
<div className="modal-box max-w-lg">
|
||||
<h3 className="font-bold">Save with warnings?</h3>
|
||||
<p className="mt-2 text-sm opacity-70">
|
||||
The workflow has issues that may prevent it from running correctly. You can fix them
|
||||
first, or save anyway.
|
||||
</p>
|
||||
<ul className="mt-3 max-h-48 space-y-2 overflow-y-auto text-sm">
|
||||
{warnings.map((w, i) => (
|
||||
<li key={i} className="rounded-box bg-base-200 px-3 py-2">
|
||||
<span className="badge badge-warning badge-xs mr-2">{w.code}</span>
|
||||
{w.message}
|
||||
{w.path ? (
|
||||
<span className="mt-1 block font-mono text-xs opacity-60">{w.path}</span>
|
||||
) : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="modal-action">
|
||||
<button type="button" className="btn btn-ghost" onClick={onCancel}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-warning"
|
||||
disabled={pending}
|
||||
onClick={onSaveAnyway}
|
||||
>
|
||||
{pending ? <span className="loading loading-spinner loading-xs" /> : null}
|
||||
Save anyway
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button type="button" onClick={onCancel}>
|
||||
close
|
||||
</button>
|
||||
</form>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract validation warnings from a failed save mutation error.
|
||||
* @param {unknown} error
|
||||
*/
|
||||
export function saveWarningsFromError(error) {
|
||||
const warnings = error?.response?.data?.warnings;
|
||||
return Array.isArray(warnings) ? warnings : null;
|
||||
}
|
||||
|
||||
export function isSaveWarningsError(error) {
|
||||
return error?.response?.status === 422 && saveWarningsFromError(error);
|
||||
}
|
||||
|
||||
export function saveErrorMessage(error) {
|
||||
if (isSaveWarningsError(error)) {
|
||||
return "Workflow has validation warnings";
|
||||
}
|
||||
return errorMessage(error);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { useState } from "react";
|
||||
import { LuHistory, LuRotateCcw } from "react-icons/lu";
|
||||
import { errorMessage } from "../../api/client.js";
|
||||
import {
|
||||
useRevertWorkflowRevision,
|
||||
useWorkflowRevisions,
|
||||
} from "../../api/hooks.js";
|
||||
import { formatTime } from "../../lib/format.jsx";
|
||||
import { useNotifications } from "../../notifications.jsx";
|
||||
import {
|
||||
SaveWorkflowWarningsDialog,
|
||||
isSaveWarningsError,
|
||||
saveWarningsFromError,
|
||||
} from "./SaveWorkflowWarningsDialog.jsx";
|
||||
|
||||
function reasonLabel(reason, meta) {
|
||||
if (reason === "duplicated" && meta?.from) return `duplicated from ${meta.from}`;
|
||||
if (reason === "revert" && meta?.fromRevision != null) {
|
||||
return `reverted from #${meta.fromRevision}`;
|
||||
}
|
||||
if (reason === "restored-from-trash") return "restored from trash";
|
||||
return reason ?? "save";
|
||||
}
|
||||
|
||||
export function WorkflowHistoryPanel({ owner, file, onReverted }) {
|
||||
const { notify } = useNotifications();
|
||||
const revisions = useWorkflowRevisions(owner, file);
|
||||
const revert = useRevertWorkflowRevision();
|
||||
const [pendingRevision, setPendingRevision] = useState(null);
|
||||
const [warnings, setWarnings] = useState(null);
|
||||
|
||||
function doRevert(revision, saveAnyway = false) {
|
||||
setPendingRevision(revision);
|
||||
revert.mutate(
|
||||
{ owner, file, revision, saveAnyway },
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
setWarnings(null);
|
||||
setPendingRevision(null);
|
||||
notify.success(`Restored revision #${revision}`);
|
||||
onReverted?.(data);
|
||||
},
|
||||
onError: (err) => {
|
||||
setPendingRevision(null);
|
||||
if (isSaveWarningsError(err)) {
|
||||
setWarnings({ revision, items: saveWarningsFromError(err) });
|
||||
return;
|
||||
}
|
||||
notify.error(errorMessage(err));
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const items = revisions.data?.revisions ?? [];
|
||||
|
||||
return (
|
||||
<div className="border-base-300 flex h-full min-h-0 flex-col rounded-box border bg-base-100">
|
||||
<div className="border-base-300 flex items-center gap-2 border-b px-3 py-2">
|
||||
<LuHistory className="size-4 opacity-70" />
|
||||
<span className="text-sm font-medium">History</span>
|
||||
<span className="text-xs opacity-50">({items.length} / 50)</span>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto p-2">
|
||||
{revisions.isLoading ? (
|
||||
<div className="flex justify-center p-4">
|
||||
<span className="loading loading-spinner loading-sm" />
|
||||
</div>
|
||||
) : !items.length ? (
|
||||
<p className="p-3 text-sm opacity-50">No revisions yet.</p>
|
||||
) : (
|
||||
<ul className="space-y-1">
|
||||
{items.map((rev) => (
|
||||
<li
|
||||
key={rev.id}
|
||||
className="hover:bg-base-200 flex items-start justify-between gap-2 rounded-lg px-2 py-2"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-medium">#{rev.revision}</div>
|
||||
<div className="text-xs opacity-60">{formatTime(rev.created_at)}</div>
|
||||
<div className="text-xs opacity-70">
|
||||
{reasonLabel(rev.reason, rev.meta)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs shrink-0"
|
||||
title="Revert to this revision"
|
||||
disabled={revert.isPending}
|
||||
onClick={() => doRevert(rev.revision)}
|
||||
>
|
||||
{pendingRevision === rev.revision && revert.isPending ? (
|
||||
<span className="loading loading-spinner loading-xs" />
|
||||
) : (
|
||||
<LuRotateCcw className="size-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
{warnings ? (
|
||||
<SaveWorkflowWarningsDialog
|
||||
warnings={warnings.items}
|
||||
pending={revert.isPending}
|
||||
onCancel={() => setWarnings(null)}
|
||||
onSaveAnyway={() => doRevert(warnings.revision, true)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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