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}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user