feat(workflows): add Gmail sending and testing workflows
- Introduced a new `send-gmail` workflow for sending emails via Gmail SMTP, with configurable parameters for recipients, subject, and body content. - Added a `test-send-gmail` workflow to facilitate testing the email sending functionality with sample data. - Implemented a `track` workflow to monitor Gojek trips, enhancing the server's capabilities for tracking and notifications. - Updated the workflow management interface to include new workflows and improved organization of existing scripts. Co-authored-by: Nasyarobby Putra <nasyarobby@gmail.com>
This commit is contained in:
@@ -20,6 +20,11 @@ function FieldTable({ title, fields }) {
|
||||
const notes = [
|
||||
field.required ? "required" : null,
|
||||
field.default !== undefined ? `default ${JSON.stringify(field.default)}` : null,
|
||||
Array.isArray(field.enum)
|
||||
? `enum ${field.enum.map((x) => (x && typeof x === "object" ? x.value : x)).join(", ")}`
|
||||
: Array.isArray(field.options)
|
||||
? `enum ${field.options.map((x) => (x && typeof x === "object" ? x.value : x)).join(", ")}`
|
||||
: null,
|
||||
field.description,
|
||||
]
|
||||
.filter(Boolean)
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useScripts } from "../../api/hooks.js";
|
||||
|
||||
export function AddScriptDialog({ open, onClose, onPick }) {
|
||||
const { data: scripts = [], isLoading } = useScripts();
|
||||
const [q, setQ] = useState("");
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const term = q.trim().toLowerCase();
|
||||
const list = scripts.map((s) => ({
|
||||
name: typeof s === "string" ? s : s.name,
|
||||
description: typeof s === "string" ? "" : s.meta?.description ?? "",
|
||||
meta: typeof s === "string" ? null : s.meta,
|
||||
metaError: typeof s === "string" ? null : s.metaError,
|
||||
}));
|
||||
if (!term) return list;
|
||||
return list.filter(
|
||||
(s) =>
|
||||
s.name.toLowerCase().includes(term) ||
|
||||
s.description.toLowerCase().includes(term),
|
||||
);
|
||||
}, [scripts, q]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<dialog className="modal modal-open">
|
||||
<div className="modal-box max-w-lg">
|
||||
<h3 className="font-bold text-lg">Add script</h3>
|
||||
<input
|
||||
className="input input-sm w-full mt-3"
|
||||
placeholder="Search scripts"
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
<ul className="menu mt-3 max-h-80 overflow-auto rounded-box border border-base-300 p-0">
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onPick({ kind: "set" });
|
||||
setQ("");
|
||||
}}
|
||||
>
|
||||
<span className="font-semibold">Set (JSONata)</span>
|
||||
<span className="text-xs opacity-70">Assign a JSONata result to a variable</span>
|
||||
</button>
|
||||
</li>
|
||||
{isLoading ? (
|
||||
<li className="p-4">
|
||||
<span className="loading loading-spinner loading-sm" />
|
||||
</li>
|
||||
) : (
|
||||
filtered.map((s) => (
|
||||
<li key={s.name}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onPick({ kind: "script", name: s.name, meta: s.meta });
|
||||
setQ("");
|
||||
}}
|
||||
>
|
||||
<span className="font-mono">{s.name}</span>
|
||||
<span className="text-xs opacity-70 line-clamp-2">
|
||||
{s.metaError ? s.metaError : s.description || "No description"}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
<div className="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
className="btn"
|
||||
onClick={() => {
|
||||
setQ("");
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setQ("");
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
close
|
||||
</button>
|
||||
</form>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,441 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { LuPlus, LuTrash2 } from "react-icons/lu";
|
||||
import { triggerDestinations } from "../../lib/workflow-doc.js";
|
||||
import { prettyJson } from "../../lib/script.js";
|
||||
import { FieldLabel } from "./FieldHelp.jsx";
|
||||
|
||||
const MULTILINE_KEYS = new Set(["expression", "jsonata"]);
|
||||
|
||||
function fieldSpec(meta, key) {
|
||||
const spec = meta?.config?.[key];
|
||||
if (spec && typeof spec === "object") return spec;
|
||||
return {};
|
||||
}
|
||||
|
||||
/** Support meta `enum` or `options`: string[], or { value, label }[]. */
|
||||
function enumOptions(spec) {
|
||||
const raw = spec?.enum ?? spec?.options;
|
||||
if (!Array.isArray(raw) || raw.length === 0) return null;
|
||||
return raw
|
||||
.map((item) => {
|
||||
if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
|
||||
return { value: item, label: String(item) };
|
||||
}
|
||||
if (item && typeof item === "object" && item.value != null) {
|
||||
return { value: item.value, label: item.label != null ? String(item.label) : String(item.value) };
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
function EditableText({ value, onCommit, className = "", placeholder = "…", disabled }) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [draft, setDraft] = useState(value ?? "");
|
||||
|
||||
useEffect(() => {
|
||||
setDraft(value ?? "");
|
||||
}, [value]);
|
||||
|
||||
if (!editing) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`min-h-8 w-full truncate rounded-btn px-2 text-left hover:bg-base-200 ${className}`}
|
||||
disabled={disabled}
|
||||
onClick={() => setEditing(true)}
|
||||
>
|
||||
{(value ?? "") === "" ? (
|
||||
<span className="opacity-40">{placeholder}</span>
|
||||
) : (
|
||||
value
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
className={`input input-sm w-full ${className}`}
|
||||
value={draft}
|
||||
autoFocus
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={() => {
|
||||
onCommit(draft);
|
||||
setEditing(false);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") e.currentTarget.blur();
|
||||
if (e.key === "Escape") {
|
||||
setDraft(value ?? "");
|
||||
setEditing(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ValueEditor({ value, onChange, spec, script, fieldKey, workflows, owner, excludeFile, disabled }) {
|
||||
const type = spec?.type ?? (value != null && typeof value === "object" ? "object" : "string");
|
||||
|
||||
if (script === "trigger-workflow.js" && fieldKey === "name") {
|
||||
return (
|
||||
<WorkflowNamePicker
|
||||
value={typeof value === "string" ? value : ""}
|
||||
onChange={onChange}
|
||||
workflows={workflows}
|
||||
owner={owner}
|
||||
excludeFile={excludeFile}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const options = enumOptions(spec);
|
||||
if (options) {
|
||||
const fallback = spec?.default ?? (spec?.required ? options[0].value : "");
|
||||
const current = value === undefined || value === null ? fallback : value;
|
||||
const known = options.some((o) => o.value === current);
|
||||
return (
|
||||
<select
|
||||
className="select select-sm w-full"
|
||||
value={current === undefined || current === null ? "" : String(current)}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value;
|
||||
if (next === "") {
|
||||
onChange(undefined);
|
||||
return;
|
||||
}
|
||||
const match = options.find((o) => String(o.value) === next);
|
||||
onChange(match ? match.value : next);
|
||||
}}
|
||||
disabled={disabled}
|
||||
>
|
||||
{spec?.required ? null : <option value="">(default)</option>}
|
||||
{options.map((o) => (
|
||||
<option key={String(o.value)} value={String(o.value)}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
{known || current === "" || current == null ? null : (
|
||||
<option value={String(current)}>{String(current)}</option>
|
||||
)}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "boolean") {
|
||||
return (
|
||||
<input
|
||||
type="checkbox"
|
||||
className="toggle toggle-sm"
|
||||
checked={Boolean(value)}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange(e.target.checked)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "number") {
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
className="input input-sm w-full"
|
||||
value={value ?? ""}
|
||||
disabled={disabled}
|
||||
onChange={(e) => {
|
||||
const raw = e.target.value;
|
||||
if (raw === "") {
|
||||
onChange(undefined);
|
||||
return;
|
||||
}
|
||||
const n = Number(raw);
|
||||
onChange(Number.isNaN(n) ? raw : n);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "object" || (value != null && typeof value === "object" && !Array.isArray(value) && type !== "any")) {
|
||||
const obj = value && typeof value === "object" && !Array.isArray(value) ? value : {};
|
||||
return <ObjectFields value={obj} onChange={onChange} disabled={disabled} />;
|
||||
}
|
||||
|
||||
if (type === "any") {
|
||||
const text =
|
||||
typeof value === "string" ? value : value === undefined ? "" : prettyJson(value) || "";
|
||||
return (
|
||||
<JsonOrTextArea
|
||||
text={text}
|
||||
onCommit={(next) => {
|
||||
if (next.trim() === "") {
|
||||
onChange(undefined);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
onChange(JSON.parse(next));
|
||||
} catch {
|
||||
onChange(next);
|
||||
}
|
||||
}}
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const str = value == null ? "" : String(value);
|
||||
const multiline = MULTILINE_KEYS.has(fieldKey) || str.includes("\n");
|
||||
if (multiline) {
|
||||
return (
|
||||
<textarea
|
||||
className="textarea textarea-sm w-full min-h-24 font-mono text-xs"
|
||||
value={str}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <EditableText value={str} onCommit={onChange} className="font-mono text-sm" disabled={disabled} />;
|
||||
}
|
||||
|
||||
function JsonOrTextArea({ text, onCommit, disabled }) {
|
||||
const [draft, setDraft] = useState(text);
|
||||
useEffect(() => {
|
||||
setDraft(text);
|
||||
}, [text]);
|
||||
return (
|
||||
<textarea
|
||||
className="textarea textarea-sm w-full min-h-24 font-mono text-xs"
|
||||
value={draft}
|
||||
disabled={disabled}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={() => onCommit(draft)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ObjectFields({ value, onChange }) {
|
||||
const entries = Object.entries(value ?? {});
|
||||
|
||||
function setKey(oldKey, nextKey) {
|
||||
if (!nextKey || nextKey === oldKey) return;
|
||||
const next = {};
|
||||
for (const [k, v] of Object.entries(value ?? {})) {
|
||||
next[k === oldKey ? nextKey : k] = v;
|
||||
}
|
||||
onChange(next);
|
||||
}
|
||||
|
||||
function setVal(key, val) {
|
||||
onChange({ ...value, [key]: val });
|
||||
}
|
||||
|
||||
function remove(key) {
|
||||
const next = { ...value };
|
||||
delete next[key];
|
||||
onChange(next);
|
||||
}
|
||||
|
||||
function add() {
|
||||
let key = "key";
|
||||
let i = 1;
|
||||
while (key in (value ?? {})) {
|
||||
key = `key${i}`;
|
||||
i += 1;
|
||||
}
|
||||
onChange({ ...value, [key]: "" });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-1 rounded-box border border-base-300 p-2">
|
||||
{entries.map(([k, v]) => (
|
||||
<div key={k} className="flex items-center gap-1">
|
||||
<div className="w-36 shrink-0">
|
||||
<EditableText value={k} onCommit={(nk) => setKey(k, nk)} className="font-mono text-xs" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
{v != null && typeof v === "object" ? (
|
||||
<ObjectFields
|
||||
value={v && !Array.isArray(v) ? v : {}}
|
||||
onChange={(nv) => setVal(k, nv)}
|
||||
/>
|
||||
) : (
|
||||
<EditableText
|
||||
value={v == null ? "" : String(v)}
|
||||
onCommit={(nv) => setVal(k, nv)}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs btn-square text-error"
|
||||
aria-label={`Remove ${k}`}
|
||||
onClick={() => remove(k)}
|
||||
>
|
||||
<LuTrash2 className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" className="btn btn-ghost btn-xs" onClick={add}>
|
||||
<LuPlus className="size-3.5" />
|
||||
Add field
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WorkflowNamePicker({ value, onChange, workflows, owner, excludeFile, disabled }) {
|
||||
const dest = triggerDestinations(workflows, { owner, excludeFile });
|
||||
const names = dest.map((w) => w.name);
|
||||
const known = names.includes(value);
|
||||
const [custom, setCustom] = useState(!known && Boolean(value));
|
||||
const selectValue = custom || (!known && value) ? "__custom__" : value || "";
|
||||
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<select
|
||||
className="select select-sm w-full"
|
||||
value={selectValue}
|
||||
disabled={disabled}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (v === "__custom__") {
|
||||
setCustom(true);
|
||||
return;
|
||||
}
|
||||
setCustom(false);
|
||||
onChange(v);
|
||||
}}
|
||||
>
|
||||
<option value="">Select workflow</option>
|
||||
{dest.map((w) => (
|
||||
<option key={`${w.owner}/${w.file}`} value={w.name} disabled={w.enabled === false}>
|
||||
{w.name}
|
||||
{w.file !== w.name ? ` (${w.file})` : ""}
|
||||
{w.enabled === false ? " — disabled" : ""}
|
||||
</option>
|
||||
))}
|
||||
<option value="__custom__">Custom…</option>
|
||||
</select>
|
||||
{selectValue === "__custom__" ? (
|
||||
<input
|
||||
className="input input-sm w-full font-mono"
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder="workflow name"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ConfigFields({
|
||||
script,
|
||||
config,
|
||||
meta,
|
||||
onChange,
|
||||
workflows,
|
||||
owner,
|
||||
excludeFile,
|
||||
disabled,
|
||||
}) {
|
||||
const cfg = config && typeof config === "object" && !Array.isArray(config) ? config : {};
|
||||
const metaKeys = Object.keys(meta?.config ?? {});
|
||||
const extraKeys = Object.keys(cfg).filter((k) => !metaKeys.includes(k));
|
||||
|
||||
function setField(key, value) {
|
||||
const spec = fieldSpec(meta, key);
|
||||
const next = { ...cfg };
|
||||
const required = Boolean(spec.required);
|
||||
if (value === undefined || (value === "" && !required)) {
|
||||
delete next[key];
|
||||
} else {
|
||||
next[key] = value;
|
||||
}
|
||||
onChange(next);
|
||||
}
|
||||
|
||||
function renameExtra(oldKey, nextKey) {
|
||||
if (!nextKey || nextKey === oldKey) return;
|
||||
const next = {};
|
||||
for (const [k, v] of Object.entries(cfg)) {
|
||||
next[k === oldKey ? nextKey : k] = v;
|
||||
}
|
||||
onChange(next);
|
||||
}
|
||||
|
||||
function addExtra() {
|
||||
let key = "key";
|
||||
let i = 1;
|
||||
while (key in cfg) {
|
||||
key = `key${i}`;
|
||||
i += 1;
|
||||
}
|
||||
onChange({ ...cfg, [key]: "" });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{metaKeys.map((key) => {
|
||||
const spec = fieldSpec(meta, key);
|
||||
return (
|
||||
<div key={key} className="space-y-1">
|
||||
<FieldLabel name={key} required={Boolean(spec.required)} description={spec.description} />
|
||||
<ValueEditor
|
||||
value={cfg[key]}
|
||||
onChange={(v) => setField(key, v)}
|
||||
spec={spec}
|
||||
script={script}
|
||||
fieldKey={key}
|
||||
workflows={workflows}
|
||||
owner={owner}
|
||||
excludeFile={excludeFile}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{extraKeys.map((key) => (
|
||||
<div key={key} className="space-y-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<EditableText
|
||||
value={key}
|
||||
onCommit={(nk) => renameExtra(key, nk)}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs btn-square text-error"
|
||||
aria-label={`Remove ${key}`}
|
||||
onClick={() => {
|
||||
const next = { ...cfg };
|
||||
delete next[key];
|
||||
onChange(next);
|
||||
}}
|
||||
>
|
||||
<LuTrash2 className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<ValueEditor
|
||||
value={cfg[key]}
|
||||
onChange={(v) => setField(key, v)}
|
||||
spec={{ type: cfg[key] != null && typeof cfg[key] === "object" ? "object" : "string" }}
|
||||
script={script}
|
||||
fieldKey={key}
|
||||
workflows={workflows}
|
||||
owner={owner}
|
||||
excludeFile={excludeFile}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" className="btn btn-ghost btn-xs" disabled={disabled} onClick={addExtra}>
|
||||
<LuPlus className="size-3.5" />
|
||||
Add field
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { LuCircleHelp } from "react-icons/lu";
|
||||
|
||||
export function FieldHelp({ description }) {
|
||||
if (!description) return null;
|
||||
const long = String(description).length > 80;
|
||||
return (
|
||||
<div className="tooltip tooltip-top" {...(long ? {} : { "data-tip": description })}>
|
||||
{long ? (
|
||||
<div className="tooltip-content">
|
||||
<p className="max-w-xs text-left text-xs whitespace-pre-wrap">{description}</p>
|
||||
</div>
|
||||
) : null}
|
||||
<button type="button" className="btn btn-ghost btn-xs btn-circle" aria-label={description}>
|
||||
<LuCircleHelp className="size-3.5 opacity-60" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function FieldLabel({ name, required, description, children }) {
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="font-mono text-sm">{name}</span>
|
||||
{required ? <span className="text-error text-xs">*</span> : null}
|
||||
<FieldHelp description={description} />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,460 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useSortable } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { LuGripVertical, LuMaximize2, LuMinimize2, LuPencil, LuPlay, LuTrash2 } from "react-icons/lu";
|
||||
import { useDryRunScript, useScript } from "../../api/hooks.js";
|
||||
import { errorMessage } from "../../api/client.js";
|
||||
import { CodeEditor } from "../CodeEditor.jsx";
|
||||
import { LogViewer } from "../LogViewer.jsx";
|
||||
import { ScriptMetaPanel } from "../ScriptMetaPanel.jsx";
|
||||
import { StatusBadge } from "../../lib/format.jsx";
|
||||
import { contextFromMeta, prettyJson } from "../../lib/script.js";
|
||||
import { ConfigFields } from "./ConfigFields.jsx";
|
||||
import { FieldLabel } from "./FieldHelp.jsx";
|
||||
|
||||
export function ScriptCard({
|
||||
step,
|
||||
index,
|
||||
otherSteps,
|
||||
scriptsByName,
|
||||
onChange,
|
||||
onRemove,
|
||||
disabled,
|
||||
workflows,
|
||||
owner,
|
||||
excludeFile,
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: step.uiId,
|
||||
disabled,
|
||||
});
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.6 : 1,
|
||||
};
|
||||
const [tryOpen, setTryOpen] = useState(false);
|
||||
const listed = scriptsByName?.get(step.script);
|
||||
const meta = listed?.meta ?? null;
|
||||
const metaError = listed?.metaError ?? null;
|
||||
|
||||
const duplicateId =
|
||||
step.id && otherSteps.some((s) => s.id === step.id && s.uiId !== step.uiId);
|
||||
|
||||
return (
|
||||
<article
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className="card bg-base-100 border border-primary"
|
||||
>
|
||||
<div className="card-body gap-3 p-4">
|
||||
<div className="flex items-start gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs btn-square mt-0.5 cursor-grab active:cursor-grabbing"
|
||||
aria-label={`Drag step ${index + 1}`}
|
||||
disabled={disabled}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<LuGripVertical className="size-4 opacity-60" />
|
||||
</button>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="card-title text-base font-mono">
|
||||
{step.kind === "set" ? `set:${step.as || "…"}` : step.script || "untitled"}
|
||||
</h3>
|
||||
{step.id ? <span className="badge badge-ghost badge-sm font-mono">{step.id}</span> : null}
|
||||
{step.kind === "script" && meta?.description ? (
|
||||
<p className="text-sm opacity-70 mt-1">{meta.description}</p>
|
||||
) : null}
|
||||
{step.kind === "set" ? (
|
||||
<p className="text-sm opacity-70 mt-1">Assign a JSONata result onto the context</p>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="card-actions shrink-0">
|
||||
{step.kind === "script" && step.script ? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Try"
|
||||
disabled={disabled}
|
||||
onClick={() => setTryOpen(true)}
|
||||
>
|
||||
<LuPlay className="size-4" />
|
||||
Try
|
||||
</button>
|
||||
<Link
|
||||
to={`/scripts/${encodeURIComponent(step.script)}/edit`}
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Edit script"
|
||||
>
|
||||
<LuPencil className="size-4" />
|
||||
</Link>
|
||||
</>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
title="Remove"
|
||||
disabled={disabled}
|
||||
onClick={onRemove}
|
||||
>
|
||||
<LuTrash2 className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{step.kind === "script" && (meta?.input || meta?.output) ? (
|
||||
<details className="collapse collapse-arrow bg-base-200">
|
||||
<summary className="collapse-title min-h-0 py-2 text-sm font-semibold">
|
||||
Input / output
|
||||
</summary>
|
||||
<div className="collapse-content">
|
||||
<ScriptMetaPanel meta={meta} metaError={metaError} />
|
||||
</div>
|
||||
</details>
|
||||
) : null}
|
||||
|
||||
{step.kind === "set" ? (
|
||||
<div className="space-y-2">
|
||||
<FieldLabel name="as" required description="Context field to write (not data or config)" />
|
||||
<input
|
||||
className="input input-sm w-full font-mono"
|
||||
value={step.as ?? ""}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...step, as: e.target.value })}
|
||||
/>
|
||||
<FieldLabel name="expression" required description="JSONata evaluated against ctx" />
|
||||
<textarea
|
||||
className="textarea textarea-sm w-full min-h-24 font-mono text-xs"
|
||||
value={step.expression ?? ""}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...step, expression: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<ConfigFields
|
||||
script={step.script}
|
||||
config={step.config}
|
||||
meta={meta}
|
||||
disabled={disabled}
|
||||
workflows={workflows}
|
||||
owner={owner}
|
||||
excludeFile={excludeFile}
|
||||
onChange={(config) => onChange({ ...step, config })}
|
||||
/>
|
||||
)}
|
||||
|
||||
<details className="collapse collapse-arrow bg-base-200">
|
||||
<summary className="collapse-title min-h-0 py-2 text-sm font-semibold">Advanced</summary>
|
||||
<div className="collapse-content space-y-2">
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">id</span>
|
||||
<input
|
||||
className={`input input-sm font-mono ${duplicateId ? "input-error" : ""}`}
|
||||
value={step.id ?? ""}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...step, id: e.target.value })}
|
||||
placeholder="optional step id"
|
||||
/>
|
||||
{duplicateId ? (
|
||||
<span className="text-error text-xs">Duplicate step id</span>
|
||||
) : null}
|
||||
</label>
|
||||
{step.kind === "set" ? null : (
|
||||
<NeedsEditor
|
||||
step={step}
|
||||
otherSteps={otherSteps}
|
||||
disabled={disabled}
|
||||
onChange={onChange}
|
||||
/>
|
||||
)}
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">when</span>
|
||||
<input
|
||||
className="input input-sm w-full font-mono"
|
||||
value={step.when ?? ""}
|
||||
disabled={disabled || Boolean(step.needs)}
|
||||
onChange={(e) => onChange({ ...step, when: e.target.value })}
|
||||
placeholder="JSONata; skip if false (linear only)"
|
||||
/>
|
||||
{step.needs ? (
|
||||
<span className="text-xs opacity-60">when is not allowed when needs is set</span>
|
||||
) : null}
|
||||
</label>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
{tryOpen ? (
|
||||
<ScriptTryDialog
|
||||
script={step.script}
|
||||
config={step.config}
|
||||
meta={meta}
|
||||
owner={owner}
|
||||
onClose={() => setTryOpen(false)}
|
||||
/>
|
||||
) : null}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function NeedsEditor({ step, otherSteps, disabled, onChange }) {
|
||||
const mode = needsMode(step.needs);
|
||||
const ids = otherSteps.filter((s) => s.id && s.uiId !== step.uiId).map((s) => s.id);
|
||||
|
||||
function setMode(next) {
|
||||
if (next === "none") onChange({ ...step, needs: null });
|
||||
else if (next === "list") onChange({ ...step, needs: [], when: "" });
|
||||
else onChange({ ...step, needs: {}, when: "" });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<span className="label py-0 text-sm">needs</span>
|
||||
<select
|
||||
className="select select-sm"
|
||||
value={mode}
|
||||
disabled={disabled}
|
||||
onChange={(e) => setMode(e.target.value)}
|
||||
>
|
||||
<option value="none">None (use previous step data)</option>
|
||||
<option value="list">List of step ids</option>
|
||||
<option value="map">Map alias → step id</option>
|
||||
</select>
|
||||
{mode === "list" ? (
|
||||
<div className="flex flex-wrap gap-2 pt-1">
|
||||
{ids.length === 0 ? (
|
||||
<span className="text-xs opacity-60">Give other steps an id first</span>
|
||||
) : (
|
||||
ids.map((id) => {
|
||||
const checked = Array.isArray(step.needs) && step.needs.includes(id);
|
||||
return (
|
||||
<label key={id} className="label cursor-pointer gap-1 py-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-xs"
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onChange={(e) => {
|
||||
const current = Array.isArray(step.needs) ? [...step.needs] : [];
|
||||
onChange({
|
||||
...step,
|
||||
needs: e.target.checked
|
||||
? [...current, id]
|
||||
: current.filter((x) => x !== id),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<span className="font-mono text-xs">{id}</span>
|
||||
</label>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
{mode === "map" ? (
|
||||
<NeedsMap
|
||||
needs={step.needs && !Array.isArray(step.needs) ? step.needs : {}}
|
||||
ids={ids}
|
||||
disabled={disabled}
|
||||
onChange={(needs) => onChange({ ...step, needs })}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NeedsMap({ needs, ids, disabled, onChange }) {
|
||||
const entries = Object.entries(needs ?? {});
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
{entries.map(([alias, from]) => (
|
||||
<div key={alias} className="flex gap-1">
|
||||
<input
|
||||
className="input input-sm font-mono w-28"
|
||||
value={alias}
|
||||
disabled={disabled}
|
||||
onChange={(e) => {
|
||||
const next = {};
|
||||
for (const [k, v] of Object.entries(needs)) {
|
||||
next[k === alias ? e.target.value : k] = v;
|
||||
}
|
||||
onChange(next);
|
||||
}}
|
||||
/>
|
||||
<select
|
||||
className="select select-sm flex-1"
|
||||
value={from}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...needs, [alias]: e.target.value })}
|
||||
>
|
||||
{from && !ids.includes(from) ? <option value={from}>{from}</option> : null}
|
||||
{ids.map((id) => (
|
||||
<option key={id} value={id}>
|
||||
{id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
const next = { ...needs };
|
||||
delete next[alias];
|
||||
onChange(next);
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs"
|
||||
disabled={disabled || ids.length === 0}
|
||||
onClick={() => {
|
||||
const used = new Set(Object.keys(needs));
|
||||
let alias = ids[0] || "step";
|
||||
let i = 1;
|
||||
while (used.has(alias)) {
|
||||
alias = `${ids[0] || "step"}${i}`;
|
||||
i += 1;
|
||||
}
|
||||
onChange({ ...needs, [alias]: ids[0] });
|
||||
}}
|
||||
>
|
||||
Add mapping
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function needsMode(needs) {
|
||||
if (needs == null) return "none";
|
||||
if (Array.isArray(needs)) return "list";
|
||||
return "map";
|
||||
}
|
||||
|
||||
export function ScriptTryDialog({ script, config, meta, owner, onClose }) {
|
||||
const existing = useScript(script);
|
||||
const dryRun = useDryRunScript();
|
||||
const defaultData = useMemo(() => prettyJson(contextFromMeta(meta).data ?? {}), [meta]);
|
||||
const [dataJson, setDataJson] = useState(defaultData);
|
||||
const [parseError, setParseError] = useState(null);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setDataJson(defaultData);
|
||||
}, [defaultData]);
|
||||
|
||||
const outputJson = dryRun.data
|
||||
? prettyJson(dryRun.data.status === "success" ? dryRun.data.output : { error: dryRun.data.error })
|
||||
: "";
|
||||
|
||||
function onRun() {
|
||||
setParseError(null);
|
||||
let data;
|
||||
try {
|
||||
const parsed = JSON.parse(dataJson || "null");
|
||||
data = parsed;
|
||||
} catch (err) {
|
||||
setParseError(err instanceof Error ? err.message : String(err));
|
||||
return;
|
||||
}
|
||||
if (!existing.data?.content) {
|
||||
setParseError("could not load script source");
|
||||
return;
|
||||
}
|
||||
dryRun.mutate({
|
||||
name: script,
|
||||
content: existing.data.content,
|
||||
data,
|
||||
config: config ?? {},
|
||||
owner,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<dialog className="modal modal-open">
|
||||
<div
|
||||
className={
|
||||
expanded
|
||||
? "modal-box flex h-dvh max-h-dvh w-dvw max-w-none flex-col rounded-none"
|
||||
: "modal-box flex max-w-4xl flex-col"
|
||||
}
|
||||
>
|
||||
<div className="flex shrink-0 items-start gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="font-bold font-mono">{script}</h3>
|
||||
<p className="text-sm opacity-70">
|
||||
Dry-run this script with the card config. Does not create an event.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-sm btn-square"
|
||||
title={expanded ? "Exit full screen" : "Full screen"}
|
||||
aria-label={expanded ? "Exit full screen" : "Full screen"}
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
>
|
||||
{expanded ? <LuMinimize2 className="size-4" /> : <LuMaximize2 className="size-4" />}
|
||||
</button>
|
||||
</div>
|
||||
{parseError ? <p className="text-error text-sm mt-2 shrink-0">{parseError}</p> : null}
|
||||
{dryRun.isError ? (
|
||||
<p className="text-error text-sm mt-2 shrink-0">{errorMessage(dryRun.error)}</p>
|
||||
) : null}
|
||||
<div
|
||||
className={`grid grid-cols-1 md:grid-cols-2 gap-3 mt-3 min-h-0 ${expanded ? "flex-1" : ""}`}
|
||||
>
|
||||
<div className={expanded ? "min-h-0 flex-1 h-full" : "h-48"}>
|
||||
<p className="text-xs opacity-60 mb-1">data</p>
|
||||
<div className={expanded ? "h-[calc(100%-1.25rem)]" : "h-full"}>
|
||||
<CodeEditor language="json" value={dataJson} onChange={setDataJson} height="100%" />
|
||||
</div>
|
||||
</div>
|
||||
<div className={expanded ? "min-h-0 flex-1 h-full" : "h-48"}>
|
||||
<p className="text-xs opacity-60 mb-1 flex items-center gap-2">
|
||||
output
|
||||
{dryRun.data?.status ? <StatusBadge status={dryRun.data.status} /> : null}
|
||||
</p>
|
||||
<div className={expanded ? "h-[calc(100%-1.25rem)]" : "h-full"}>
|
||||
<CodeEditor language="json" value={outputJson} onChange={() => {}} readOnly height="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<details className="collapse collapse-arrow mt-2 border border-base-300 shrink-0">
|
||||
<summary className="collapse-title min-h-0 py-2 text-sm">config (from card)</summary>
|
||||
<div className="collapse-content">
|
||||
<pre className="text-xs overflow-auto">{prettyJson(config ?? {})}</pre>
|
||||
</div>
|
||||
</details>
|
||||
{dryRun.data?.logs?.length ? (
|
||||
<LogViewer logs={dryRun.data.logs} className={expanded ? "h-48 mt-2 shrink-0" : "h-36 mt-2"} />
|
||||
) : null}
|
||||
<div className="modal-action shrink-0">
|
||||
<button type="button" className="btn" onClick={onClose}>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
disabled={dryRun.isPending || existing.isLoading}
|
||||
onClick={onRun}
|
||||
>
|
||||
{dryRun.isPending ? <span className="loading loading-spinner loading-xs" /> : null}
|
||||
Run
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button type="button" onClick={onClose}>
|
||||
close
|
||||
</button>
|
||||
</form>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
closestCenter,
|
||||
DndContext,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { LuPlus } from "react-icons/lu";
|
||||
import { defaultConfigFromMeta } from "../../lib/script.js";
|
||||
import { newScriptStep, newSetStep } from "../../lib/workflow-doc.js";
|
||||
import { AddScriptDialog } from "./AddScriptDialog.jsx";
|
||||
import { ScriptCard } from "./ScriptCard.jsx";
|
||||
|
||||
export function ScriptsTab({
|
||||
doc,
|
||||
onPatch,
|
||||
disabled,
|
||||
scripts = [],
|
||||
workflows = [],
|
||||
owner,
|
||||
excludeFile,
|
||||
}) {
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
||||
);
|
||||
|
||||
const steps = doc?.scripts ?? [];
|
||||
const ids = steps.map((s) => s.uiId);
|
||||
|
||||
const scriptsByName = new Map();
|
||||
for (const s of scripts) {
|
||||
const name = typeof s === "string" ? s : s.name;
|
||||
scriptsByName.set(name, s);
|
||||
}
|
||||
|
||||
function patchSteps(next) {
|
||||
onPatch((d) => {
|
||||
d.scripts = next;
|
||||
});
|
||||
}
|
||||
|
||||
function onDragEnd(event) {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
const oldIndex = ids.indexOf(active.id);
|
||||
const newIndex = ids.indexOf(over.id);
|
||||
if (oldIndex < 0 || newIndex < 0) return;
|
||||
patchSteps(arrayMove(steps, oldIndex, newIndex));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-3 overflow-auto">
|
||||
<div className="flex shrink-0 items-center justify-between">
|
||||
<p className="text-sm opacity-70">
|
||||
Steps run top to bottom (or by needs in DAG mode). Drag the handle to reorder.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={disabled}
|
||||
onClick={() => setAddOpen(true)}
|
||||
>
|
||||
<LuPlus className="size-4" />
|
||||
Add script
|
||||
</button>
|
||||
</div>
|
||||
{steps.length === 0 ? (
|
||||
<p className="text-sm opacity-50">No scripts yet. Add one to get started.</p>
|
||||
) : (
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
|
||||
<SortableContext items={ids} strategy={verticalListSortingStrategy}>
|
||||
<div className="flex flex-col gap-3 pb-6">
|
||||
{steps.map((step, index) => (
|
||||
<ScriptCard
|
||||
key={step.uiId}
|
||||
step={step}
|
||||
index={index}
|
||||
otherSteps={steps}
|
||||
scriptsByName={scriptsByName}
|
||||
disabled={disabled}
|
||||
workflows={workflows}
|
||||
owner={owner}
|
||||
excludeFile={excludeFile}
|
||||
onChange={(next) => {
|
||||
const copy = [...steps];
|
||||
copy[index] = next;
|
||||
patchSteps(copy);
|
||||
}}
|
||||
onRemove={() => patchSteps(steps.filter((_, i) => i !== index))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
<AddScriptDialog
|
||||
open={addOpen}
|
||||
onClose={() => setAddOpen(false)}
|
||||
onPick={(picked) => {
|
||||
if (picked.kind === "set") {
|
||||
patchSteps([...steps, newSetStep()]);
|
||||
} else {
|
||||
patchSteps([
|
||||
...steps,
|
||||
newScriptStep(picked.name, defaultConfigFromMeta(picked.meta)),
|
||||
]);
|
||||
}
|
||||
setAddOpen(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,304 @@
|
||||
import { useState } from "react";
|
||||
import { LuCopy, LuGripVertical, LuTrash2 } from "react-icons/lu";
|
||||
import { useSortable } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import cronstrue from "cronstrue";
|
||||
import { namespacedPath, HTTP_METHODS } from "../../lib/workflow-doc.js";
|
||||
import { CRON_CUSTOM, CRON_PRESETS, matchCronPreset, scheduleForPreset } from "../../lib/cron-presets.js";
|
||||
|
||||
export function TriggerCard({
|
||||
trigger,
|
||||
index,
|
||||
owner,
|
||||
onChange,
|
||||
onRemove,
|
||||
disabled,
|
||||
auths = [],
|
||||
pages = [],
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: trigger.uiId,
|
||||
disabled,
|
||||
});
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.6 : 1,
|
||||
};
|
||||
const type = trigger.type;
|
||||
|
||||
return (
|
||||
<article ref={setNodeRef} style={style} className="card bg-base-100 border border-primary">
|
||||
<div className="card-body gap-3 p-4">
|
||||
<div className="flex items-start gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs btn-square mt-0.5 cursor-grab active:cursor-grabbing"
|
||||
aria-label={`Drag trigger ${index + 1}`}
|
||||
disabled={disabled}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<LuGripVertical className="size-4 opacity-60" />
|
||||
</button>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="card-title text-base">{typeLabel(type)}</h3>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
title="Remove"
|
||||
disabled={disabled}
|
||||
onClick={onRemove}
|
||||
>
|
||||
<LuTrash2 className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
{type === "HTTP" ? (
|
||||
<HttpFields
|
||||
trigger={trigger}
|
||||
owner={owner}
|
||||
disabled={disabled}
|
||||
onChange={onChange}
|
||||
auths={auths}
|
||||
pages={pages}
|
||||
/>
|
||||
) : null}
|
||||
{type === "cron" ? (
|
||||
<CronFields trigger={trigger} disabled={disabled} onChange={onChange} />
|
||||
) : null}
|
||||
{type === "workflow" ? (
|
||||
<p className="text-sm opacity-80">
|
||||
Other workflows can call this one with <span className="font-mono">trigger-workflow.js</span>.
|
||||
No extra fields.
|
||||
</p>
|
||||
) : null}
|
||||
{type !== "HTTP" && type !== "cron" && type !== "workflow" ? (
|
||||
<p className="text-sm opacity-70">Unknown trigger type. Edit it in the YAML tab.</p>
|
||||
) : null}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function typeLabel(type) {
|
||||
if (type === "HTTP") return "HTTP";
|
||||
if (type === "cron") return "Cron";
|
||||
if (type === "workflow") return "Workflow";
|
||||
return type || "Trigger";
|
||||
}
|
||||
|
||||
function HttpFields({ trigger, owner, disabled, onChange, auths, pages }) {
|
||||
const path = trigger.path || "/";
|
||||
const url = namespacedPath(owner || "owner", path);
|
||||
const authIsInline = trigger.auth != null && typeof trigger.auth === "object";
|
||||
const authSelect = authIsInline
|
||||
? "__inline__"
|
||||
: typeof trigger.auth === "string" && trigger.auth
|
||||
? trigger.auth
|
||||
: "";
|
||||
|
||||
function copyUrl() {
|
||||
if (typeof navigator?.clipboard?.writeText === "function") {
|
||||
navigator.clipboard.writeText(url);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">Method</span>
|
||||
<select
|
||||
className="select select-sm"
|
||||
value={trigger.method || "POST"}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...trigger, method: e.target.value })}
|
||||
>
|
||||
{HTTP_METHODS.map((m) => (
|
||||
<option key={m} value={m}>
|
||||
{m}
|
||||
</option>
|
||||
))}
|
||||
{HTTP_METHODS.includes(trigger.method || "POST") ? null : (
|
||||
<option value={trigger.method}>{trigger.method}</option>
|
||||
)}
|
||||
</select>
|
||||
</label>
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">Path</span>
|
||||
<input
|
||||
className="input input-sm font-mono"
|
||||
value={trigger.path ?? ""}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...trigger, path: e.target.value })}
|
||||
placeholder="/hook"
|
||||
/>
|
||||
</label>
|
||||
<div className="flex items-center gap-2 text-xs font-mono opacity-80">
|
||||
<span className="truncate">{url}</span>
|
||||
<button type="button" className="btn btn-ghost btn-xs btn-square" title="Copy URL" onClick={copyUrl}>
|
||||
<LuCopy className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">Auth</span>
|
||||
<select
|
||||
className="select select-sm"
|
||||
value={authSelect}
|
||||
disabled={disabled}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (v === "" || v === "__inline__") {
|
||||
onChange({ ...trigger, auth: v === "__inline__" ? trigger.auth : null });
|
||||
} else {
|
||||
onChange({ ...trigger, auth: v });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="">None</option>
|
||||
{auths.map((a) => (
|
||||
<option key={a.name} value={a.name}>
|
||||
{a.name}
|
||||
</option>
|
||||
))}
|
||||
{authIsInline ? <option value="__inline__">Inline (edit in YAML)</option> : null}
|
||||
</select>
|
||||
</label>
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">Response page</span>
|
||||
<select
|
||||
className="select select-sm"
|
||||
value={trigger.response ?? ""}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...trigger, response: e.target.value })}
|
||||
>
|
||||
<option value="">JSON default</option>
|
||||
{pages.map((p) => (
|
||||
<option key={p.name ?? p.id} value={p.name}>
|
||||
{p.name}
|
||||
</option>
|
||||
))}
|
||||
{trigger.response && !pages.some((p) => p.name === trigger.response) ? (
|
||||
<option value={trigger.response}>{trigger.response}</option>
|
||||
) : null}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CronFields({ trigger, disabled, onChange }) {
|
||||
const preset = matchCronPreset(trigger.schedule);
|
||||
let human = "";
|
||||
try {
|
||||
human = cronstrue.toString(trigger.schedule || "", { throwExceptionOnParseError: true });
|
||||
} catch {
|
||||
human = "Invalid cron expression";
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">Preset</span>
|
||||
<select
|
||||
className="select select-sm"
|
||||
value={preset}
|
||||
disabled={disabled}
|
||||
onChange={(e) => {
|
||||
const id = e.target.value;
|
||||
if (id === CRON_CUSTOM) return;
|
||||
const schedule = scheduleForPreset(id);
|
||||
if (schedule) onChange({ ...trigger, schedule });
|
||||
}}
|
||||
>
|
||||
{CRON_PRESETS.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.label}
|
||||
</option>
|
||||
))}
|
||||
<option value={CRON_CUSTOM}>Custom</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="form-control">
|
||||
<span className="label py-0 text-sm">Schedule</span>
|
||||
<input
|
||||
className="input input-sm font-mono"
|
||||
value={trigger.schedule ?? ""}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange({ ...trigger, schedule: e.target.value })}
|
||||
placeholder="* * * * *"
|
||||
/>
|
||||
</label>
|
||||
<p className="text-xs opacity-70">{human}</p>
|
||||
<p className="text-xs opacity-60">
|
||||
Cron runs use this workflow's top-level <span className="font-mono">data</span> as the payload.
|
||||
Set it in YAML or the Test panel prefill.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AddTriggerDialog({ open, onClose, onPick }) {
|
||||
const [kind, setKind] = useState("HTTP");
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<dialog className="modal modal-open">
|
||||
<div className="modal-box">
|
||||
<h3 className="font-bold text-lg">Add trigger</h3>
|
||||
<div className="form-control mt-3">
|
||||
<label className="label cursor-pointer justify-start gap-3">
|
||||
<input
|
||||
type="radio"
|
||||
name="trig-kind"
|
||||
className="radio radio-sm"
|
||||
checked={kind === "HTTP"}
|
||||
onChange={() => setKind("HTTP")}
|
||||
/>
|
||||
<span>HTTP — webhook at <span className="font-mono">/u/owner/path</span></span>
|
||||
</label>
|
||||
<label className="label cursor-pointer justify-start gap-3">
|
||||
<input
|
||||
type="radio"
|
||||
name="trig-kind"
|
||||
className="radio radio-sm"
|
||||
checked={kind === "cron"}
|
||||
onChange={() => setKind("cron")}
|
||||
/>
|
||||
<span>Cron — run on a schedule</span>
|
||||
</label>
|
||||
<label className="label cursor-pointer justify-start gap-3">
|
||||
<input
|
||||
type="radio"
|
||||
name="trig-kind"
|
||||
className="radio radio-sm"
|
||||
checked={kind === "workflow"}
|
||||
onChange={() => setKind("workflow")}
|
||||
/>
|
||||
<span>Workflow — callable by other workflows</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="modal-action">
|
||||
<button type="button" className="btn" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => {
|
||||
onPick(kind);
|
||||
setKind("HTTP");
|
||||
}}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" className="modal-backdrop">
|
||||
<button type="button" onClick={onClose}>
|
||||
close
|
||||
</button>
|
||||
</form>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
closestCenter,
|
||||
DndContext,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { LuPlus } from "react-icons/lu";
|
||||
import { newCronTrigger, newHttpTrigger, newWorkflowTrigger } from "../../lib/workflow-doc.js";
|
||||
import { AddTriggerDialog, TriggerCard } from "./TriggerCard.jsx";
|
||||
|
||||
export function TriggersTab({
|
||||
doc,
|
||||
onPatch,
|
||||
disabled,
|
||||
owner,
|
||||
auths = [],
|
||||
pages = [],
|
||||
}) {
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
||||
);
|
||||
|
||||
const triggers = doc?.triggers ?? [];
|
||||
const ids = triggers.map((t) => t.uiId);
|
||||
|
||||
function patchTriggers(next) {
|
||||
onPatch((d) => {
|
||||
d.triggers = next;
|
||||
});
|
||||
}
|
||||
|
||||
function onDragEnd(event) {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
const oldIndex = ids.indexOf(active.id);
|
||||
const newIndex = ids.indexOf(over.id);
|
||||
if (oldIndex < 0 || newIndex < 0) return;
|
||||
patchTriggers(arrayMove(triggers, oldIndex, newIndex));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-3 overflow-auto">
|
||||
<div className="flex shrink-0 items-center justify-between">
|
||||
<p className="text-sm opacity-70">How this workflow is started. Manual Run from the Test panel is always available.</p>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={disabled}
|
||||
onClick={() => setAddOpen(true)}
|
||||
>
|
||||
<LuPlus className="size-4" />
|
||||
Add trigger
|
||||
</button>
|
||||
</div>
|
||||
{triggers.length === 0 ? (
|
||||
<p className="text-sm opacity-50">No triggers. The Test panel can still run a saved workflow.</p>
|
||||
) : (
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
|
||||
<SortableContext items={ids} strategy={verticalListSortingStrategy}>
|
||||
<div className="flex flex-col gap-3 pb-6">
|
||||
{triggers.map((trigger, index) => (
|
||||
<TriggerCard
|
||||
key={trigger.uiId}
|
||||
trigger={trigger}
|
||||
index={index}
|
||||
owner={owner}
|
||||
auths={auths}
|
||||
pages={pages}
|
||||
disabled={disabled}
|
||||
onChange={(next) => {
|
||||
const copy = [...triggers];
|
||||
copy[index] = next;
|
||||
patchTriggers(copy);
|
||||
}}
|
||||
onRemove={() => patchTriggers(triggers.filter((_, i) => i !== index))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
<AddTriggerDialog
|
||||
open={addOpen}
|
||||
onClose={() => setAddOpen(false)}
|
||||
onPick={(kind) => {
|
||||
const next =
|
||||
kind === "cron"
|
||||
? newCronTrigger()
|
||||
: kind === "workflow"
|
||||
? newWorkflowTrigger()
|
||||
: newHttpTrigger();
|
||||
patchTriggers([...triggers, next]);
|
||||
setAddOpen(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { LuPlay } from "react-icons/lu";
|
||||
import { errorMessage } from "../../api/client.js";
|
||||
import { useRunWorkflow } from "../../api/hooks.js";
|
||||
import { CodeEditor } from "../CodeEditor.jsx";
|
||||
import { StatusBadge } from "../../lib/format.jsx";
|
||||
import { prettyJson } from "../../lib/script.js";
|
||||
|
||||
export function WorkflowTestPanel({
|
||||
owner,
|
||||
file,
|
||||
defaultData,
|
||||
disabled,
|
||||
disabledReason,
|
||||
testKey = 0,
|
||||
}) {
|
||||
const run = useRunWorkflow();
|
||||
const [dataJson, setDataJson] = useState(() => prettyJson(defaultData ?? {}));
|
||||
const [parseError, setParseError] = useState(null);
|
||||
const [last, setLast] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
setDataJson(prettyJson(defaultData ?? {}));
|
||||
}, [defaultData]);
|
||||
|
||||
function onRun() {
|
||||
setParseError(null);
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(dataJson || "null");
|
||||
} catch (err) {
|
||||
setParseError(err instanceof Error ? err.message : String(err));
|
||||
return;
|
||||
}
|
||||
run.mutate(
|
||||
{ owner, file, data },
|
||||
{
|
||||
onSuccess: (res) => {
|
||||
setLast({
|
||||
status: res.status ?? "success",
|
||||
runId: res.runId ?? null,
|
||||
result: res.result,
|
||||
error: null,
|
||||
});
|
||||
},
|
||||
onError: (err) => {
|
||||
const runId = err?.response?.data?.runId;
|
||||
setLast({
|
||||
status: "failed",
|
||||
runId: runId ?? null,
|
||||
result: null,
|
||||
error: errorMessage(err),
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const resultJson = last
|
||||
? prettyJson(last.error ? { error: last.error } : last.result)
|
||||
: "";
|
||||
|
||||
return (
|
||||
<details
|
||||
key={testKey}
|
||||
className="collapse collapse-arrow border border-base-300 bg-base-100 shrink-0"
|
||||
open={testKey > 0 ? true : undefined}
|
||||
>
|
||||
<summary className="collapse-title min-h-0 py-2 text-sm font-semibold">
|
||||
Test
|
||||
</summary>
|
||||
<div className="collapse-content space-y-2">
|
||||
<p className="text-xs opacity-70">
|
||||
Runs the <strong>saved</strong> YAML and writes an Event. Manual run works even when the
|
||||
workflow is disabled. Save before testing unsaved edits.
|
||||
</p>
|
||||
{disabledReason ? <p className="text-warning text-xs">{disabledReason}</p> : null}
|
||||
{parseError ? <p className="text-error text-sm">{parseError}</p> : null}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="h-40">
|
||||
<p className="text-xs opacity-60 mb-1">data</p>
|
||||
<CodeEditor language="json" value={dataJson} onChange={setDataJson} height="100%" />
|
||||
</div>
|
||||
<div className="h-40">
|
||||
<p className="text-xs opacity-60 mb-1 flex items-center gap-2">
|
||||
result
|
||||
{last?.status ? <StatusBadge status={last.status} /> : null}
|
||||
{last?.runId ? (
|
||||
<Link className="link text-xs" to={`/events/${last.runId}`}>
|
||||
{last.runId}
|
||||
</Link>
|
||||
) : null}
|
||||
</p>
|
||||
<CodeEditor language="json" value={resultJson} onChange={() => {}} readOnly height="100%" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={disabled || run.isPending}
|
||||
onClick={onRun}
|
||||
>
|
||||
{run.isPending ? (
|
||||
<span className="loading loading-spinner loading-xs" />
|
||||
) : (
|
||||
<LuPlay className="size-4" />
|
||||
)}
|
||||
Run
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { parse as parseYaml } from "yaml";
|
||||
import { useHttpAuths, useHttpPages, useScripts, useWorkflows } from "../../api/hooks.js";
|
||||
import { workflowToFlowchart } from "../../lib/workflow-mermaid.js";
|
||||
import { parseWorkflowYaml, stringifyWorkflowDoc } from "../../lib/workflow-doc.js";
|
||||
import { ScriptsTab } from "./ScriptsTab.jsx";
|
||||
import { TriggersTab } from "./TriggersTab.jsx";
|
||||
import { YamlTab } from "./YamlTab.jsx";
|
||||
import { WorkflowTestPanel } from "./WorkflowTestPanel.jsx";
|
||||
|
||||
export function useYamlPreview(content) {
|
||||
return useMemo(() => {
|
||||
try {
|
||||
const parsedYaml = parseYaml(content);
|
||||
return {
|
||||
parsed: parsedYaml,
|
||||
parseError: null,
|
||||
mermaid: workflowToFlowchart(parsedYaml),
|
||||
};
|
||||
} catch (err) {
|
||||
return {
|
||||
parsed: null,
|
||||
parseError: err instanceof Error ? err.message : String(err),
|
||||
mermaid: { chart: "", scriptIds: {} },
|
||||
};
|
||||
}
|
||||
}, [content]);
|
||||
}
|
||||
|
||||
export function WorkflowVisualEditor({
|
||||
yaml,
|
||||
onYamlChange,
|
||||
owner,
|
||||
file,
|
||||
extraChrome,
|
||||
showTest,
|
||||
savedYaml,
|
||||
testKey,
|
||||
}) {
|
||||
const [tab, setTab] = useState("scripts");
|
||||
const [lastEdited, setLastEdited] = useState("yaml");
|
||||
const [doc, setDoc] = useState(() => parseWorkflowYaml(yaml).doc);
|
||||
|
||||
const { parsed, parseError, mermaid } = useYamlPreview(yaml);
|
||||
const parsedDoc = useMemo(() => parseWorkflowYaml(yaml), [yaml]);
|
||||
const displayDoc = lastEdited === "visual" && doc ? doc : parsedDoc.doc;
|
||||
const visualDisabled = !displayDoc;
|
||||
|
||||
const { data: scripts = [] } = useScripts();
|
||||
const { data: workflows = [] } = useWorkflows(owner || undefined);
|
||||
const { data: auths = [] } = useHttpAuths();
|
||||
const { data: allPages = [] } = useHttpPages();
|
||||
const pages = allPages.filter((p) => p.kind !== "template");
|
||||
|
||||
const scriptCount = displayDoc?.scripts?.length ?? 0;
|
||||
const triggerCount = displayDoc?.triggers?.length ?? 0;
|
||||
const unsaved = savedYaml != null && yaml !== savedYaml;
|
||||
|
||||
function patchDoc(mutator) {
|
||||
const base = lastEdited === "visual" && doc ? doc : parsedDoc.doc;
|
||||
if (!base) return;
|
||||
const next = structuredClone(base);
|
||||
mutator(next);
|
||||
setDoc(next);
|
||||
onYamlChange(stringifyWorkflowDoc(next));
|
||||
setLastEdited("visual");
|
||||
}
|
||||
|
||||
function onYamlTabChange(value) {
|
||||
setLastEdited("yaml");
|
||||
onYamlChange(value);
|
||||
}
|
||||
|
||||
function selectTab(next) {
|
||||
if (next !== "yaml" && lastEdited === "yaml") {
|
||||
const { doc: d } = parseWorkflowYaml(yaml);
|
||||
if (d) setDoc(d);
|
||||
}
|
||||
setTab(next);
|
||||
}
|
||||
|
||||
const defaultData = displayDoc?.extra?.data ?? {};
|
||||
let testDisabledReason = null;
|
||||
if (visualDisabled) testDisabledReason = "Fix YAML before running.";
|
||||
else if (unsaved) testDisabledReason = "Save the workflow before running. Test uses the saved YAML.";
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex shrink-0 flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
|
||||
{extraChrome}
|
||||
<input
|
||||
className="input input-sm sm:max-w-xs"
|
||||
placeholder="name"
|
||||
value={displayDoc?.name ?? ""}
|
||||
disabled={visualDisabled}
|
||||
onChange={(e) =>
|
||||
patchDoc((d) => {
|
||||
d.name = e.target.value;
|
||||
})
|
||||
}
|
||||
/>
|
||||
<textarea
|
||||
className="textarea textarea-sm min-h-10 w-full sm:max-w-md"
|
||||
placeholder="description"
|
||||
rows={1}
|
||||
value={displayDoc?.description ?? ""}
|
||||
disabled={visualDisabled}
|
||||
onChange={(e) =>
|
||||
patchDoc((d) => {
|
||||
d.description = e.target.value;
|
||||
})
|
||||
}
|
||||
/>
|
||||
{unsaved ? <span className="badge badge-warning badge-sm">Unsaved</span> : null}
|
||||
</div>
|
||||
|
||||
<div role="tablist" className="tabs tabs-box shrink-0 w-full sm:w-auto">
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
className={`tab ${tab === "scripts" ? "tab-active" : ""}`}
|
||||
onClick={() => selectTab("scripts")}
|
||||
>
|
||||
Scripts ({scriptCount})
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
className={`tab ${tab === "triggers" ? "tab-active" : ""}`}
|
||||
onClick={() => selectTab("triggers")}
|
||||
>
|
||||
Triggers ({triggerCount})
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
className={`tab ${tab === "yaml" ? "tab-active" : ""}`}
|
||||
onClick={() => selectTab("yaml")}
|
||||
>
|
||||
YAML
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{parseError && tab !== "yaml" ? (
|
||||
<p className="text-error text-sm shrink-0">
|
||||
YAML is invalid — switch to the YAML tab to fix it. Visual edits are disabled.
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{tab === "scripts" ? (
|
||||
<ScriptsTab
|
||||
doc={displayDoc}
|
||||
onPatch={patchDoc}
|
||||
disabled={visualDisabled}
|
||||
scripts={scripts}
|
||||
workflows={workflows}
|
||||
owner={owner}
|
||||
excludeFile={file}
|
||||
/>
|
||||
) : null}
|
||||
{tab === "triggers" ? (
|
||||
<TriggersTab
|
||||
doc={displayDoc}
|
||||
onPatch={patchDoc}
|
||||
disabled={visualDisabled}
|
||||
owner={owner}
|
||||
auths={auths}
|
||||
pages={pages}
|
||||
/>
|
||||
) : null}
|
||||
{tab === "yaml" ? (
|
||||
<YamlTab
|
||||
content={yaml}
|
||||
onChange={onYamlTabChange}
|
||||
parseError={parseError}
|
||||
mermaid={mermaid}
|
||||
parsed={parsed}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{showTest && owner && file ? (
|
||||
<WorkflowTestPanel
|
||||
owner={owner}
|
||||
file={file}
|
||||
defaultData={defaultData}
|
||||
disabled={Boolean(testDisabledReason)}
|
||||
disabledReason={testDisabledReason}
|
||||
testKey={testKey}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { CodeEditor } from "../CodeEditor.jsx";
|
||||
import { MermaidDiagram } from "../MermaidDiagram.jsx";
|
||||
|
||||
export function YamlTab({ content, onChange, parseError, mermaid, parsed }) {
|
||||
return (
|
||||
<div className="grid min-h-0 flex-1 gap-3 lg:grid-cols-2">
|
||||
<div className="min-h-0">
|
||||
<CodeEditor language="yaml" value={content} onChange={onChange} height="100%" />
|
||||
</div>
|
||||
<div className="min-h-0 overflow-auto">
|
||||
{parseError ? (
|
||||
<p className="text-error text-sm">{parseError}</p>
|
||||
) : (
|
||||
<MermaidDiagram chart={mermaid.chart} scriptIds={mermaid.scriptIds} />
|
||||
)}
|
||||
{parsed?.name ? <p className="text-sm opacity-70 mt-2">{parsed.name}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
export const CRON_PRESETS = [
|
||||
{ id: "every-minute", label: "Every minute", schedule: "* * * * *" },
|
||||
{ id: "every-5-minutes", label: "Every 5 minutes", schedule: "*/5 * * * *" },
|
||||
{ id: "every-15-minutes", label: "Every 15 minutes", schedule: "*/15 * * * *" },
|
||||
{ id: "every-30-minutes", label: "Every 30 minutes", schedule: "*/30 * * * *" },
|
||||
{ id: "every-hour", label: "Every hour", schedule: "0 * * * *" },
|
||||
{ id: "every-2-hours", label: "Every 2 hours", schedule: "0 */2 * * *" },
|
||||
{ id: "every-6-hours", label: "Every 6 hours", schedule: "0 */6 * * *" },
|
||||
{ id: "daily-midnight", label: "Every day at midnight", schedule: "0 0 * * *" },
|
||||
{ id: "daily-1am", label: "Every day at 1:00 AM", schedule: "0 1 * * *" },
|
||||
{ id: "weekdays-9am", label: "Weekdays at 9:00 AM", schedule: "0 9 * * 1-5" },
|
||||
];
|
||||
|
||||
export const CRON_CUSTOM = "custom";
|
||||
|
||||
export function matchCronPreset(schedule) {
|
||||
const value = String(schedule ?? "").trim();
|
||||
const found = CRON_PRESETS.find((p) => p.schedule === value);
|
||||
return found?.id ?? CRON_CUSTOM;
|
||||
}
|
||||
|
||||
export function scheduleForPreset(id) {
|
||||
return CRON_PRESETS.find((p) => p.id === id)?.schedule ?? null;
|
||||
}
|
||||
@@ -49,6 +49,13 @@ function defaultsFromFields(fields) {
|
||||
return out;
|
||||
}
|
||||
|
||||
export function defaultConfigFromMeta(meta) {
|
||||
if (meta?.example?.config && typeof meta.example.config === "object" && !Array.isArray(meta.example.config)) {
|
||||
return { ...meta.example.config };
|
||||
}
|
||||
return defaultsFromFields(meta?.config);
|
||||
}
|
||||
|
||||
export function contextFromMeta(meta) {
|
||||
if (meta?.example && typeof meta.example === "object" && !Array.isArray(meta.example)) {
|
||||
return {
|
||||
|
||||
@@ -0,0 +1,308 @@
|
||||
import { parse as parseYaml, stringify as stringifyYaml } from "yaml";
|
||||
|
||||
const KNOWN_TOP = new Set(["name", "description", "enabled", "scripts", "triggers"]);
|
||||
const HTTP_METHODS = ["GET", "HEAD", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"];
|
||||
|
||||
export const NEW_WORKFLOW_YAML = `name: new workflow
|
||||
scripts:
|
||||
- get-current-time.js
|
||||
triggers:
|
||||
- type: HTTP
|
||||
method: POST
|
||||
path: /new
|
||||
`;
|
||||
|
||||
let uidSeq = 0;
|
||||
|
||||
export function nextUiId(prefix = "ui") {
|
||||
uidSeq += 1;
|
||||
return `${prefix}-${uidSeq}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
}
|
||||
|
||||
export function namespacedPath(owner, triggerPath) {
|
||||
const cleaned = String(triggerPath ?? "")
|
||||
.replace(/^\/+/, "")
|
||||
.trim();
|
||||
return `/u/${owner}/${cleaned}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} text
|
||||
* @returns {{ doc: WorkflowDoc | null, parseError: string | null }}
|
||||
*/
|
||||
export function parseWorkflowYaml(text) {
|
||||
let raw;
|
||||
try {
|
||||
raw = parseYaml(text ?? "");
|
||||
} catch (err) {
|
||||
return {
|
||||
doc: null,
|
||||
parseError: err instanceof Error ? err.message : String(err),
|
||||
};
|
||||
}
|
||||
if (raw == null || typeof raw !== "object" || Array.isArray(raw)) {
|
||||
return { doc: null, parseError: "workflow yaml must be an object" };
|
||||
}
|
||||
return { doc: yamlObjectToDoc(raw), parseError: null };
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Record<string, unknown>} raw
|
||||
*/
|
||||
export function yamlObjectToDoc(raw) {
|
||||
/** @type {Record<string, unknown>} */
|
||||
const extra = {};
|
||||
for (const [key, value] of Object.entries(raw)) {
|
||||
if (!KNOWN_TOP.has(key)) extra[key] = value;
|
||||
}
|
||||
return {
|
||||
name: typeof raw.name === "string" ? raw.name : "",
|
||||
description: raw.description == null ? "" : String(raw.description),
|
||||
enabled: raw.enabled !== false,
|
||||
scripts: Array.isArray(raw.scripts) ? raw.scripts.map((step) => normalizeStep(step)) : [],
|
||||
triggers: Array.isArray(raw.triggers)
|
||||
? raw.triggers.map((t) => normalizeTrigger(t))
|
||||
: [],
|
||||
extra,
|
||||
};
|
||||
}
|
||||
|
||||
export function stringifyWorkflowDoc(doc) {
|
||||
/** @type {Record<string, unknown>} */
|
||||
const out = {};
|
||||
if (doc?.name) out.name = doc.name;
|
||||
if (doc?.description) out.description = doc.description;
|
||||
if (doc?.enabled === false) out.enabled = false;
|
||||
Object.assign(out, doc?.extra ?? {});
|
||||
out.scripts = (doc?.scripts ?? []).map(dumpStep);
|
||||
out.triggers = (doc?.triggers ?? []).map(dumpTrigger);
|
||||
return stringifyYaml(out, { indent: 2, lineWidth: 0 });
|
||||
}
|
||||
|
||||
export function newScriptStep(script, config = {}) {
|
||||
return {
|
||||
uiId: nextUiId("step"),
|
||||
kind: "script",
|
||||
script,
|
||||
config: config && typeof config === "object" && !Array.isArray(config) ? { ...config } : {},
|
||||
id: "",
|
||||
when: "",
|
||||
needs: null,
|
||||
};
|
||||
}
|
||||
|
||||
export function newSetStep() {
|
||||
return {
|
||||
uiId: nextUiId("step"),
|
||||
kind: "set",
|
||||
script: "set",
|
||||
as: "value",
|
||||
expression: "",
|
||||
id: "",
|
||||
when: "",
|
||||
needs: null,
|
||||
};
|
||||
}
|
||||
|
||||
export function newHttpTrigger() {
|
||||
return {
|
||||
uiId: nextUiId("trig"),
|
||||
type: "HTTP",
|
||||
method: "POST",
|
||||
path: "/new",
|
||||
schedule: "",
|
||||
auth: null,
|
||||
response: "",
|
||||
unauthorized: null,
|
||||
};
|
||||
}
|
||||
|
||||
export function newCronTrigger() {
|
||||
return {
|
||||
uiId: nextUiId("trig"),
|
||||
type: "cron",
|
||||
method: "POST",
|
||||
path: "",
|
||||
schedule: "* * * * *",
|
||||
auth: null,
|
||||
response: "",
|
||||
unauthorized: null,
|
||||
};
|
||||
}
|
||||
|
||||
export function newWorkflowTrigger() {
|
||||
return {
|
||||
uiId: nextUiId("trig"),
|
||||
type: "workflow",
|
||||
method: "POST",
|
||||
path: "",
|
||||
schedule: "",
|
||||
auth: null,
|
||||
response: "",
|
||||
unauthorized: null,
|
||||
};
|
||||
}
|
||||
|
||||
export function hasWorkflowTrigger(workflow) {
|
||||
return (workflow?.triggers ?? []).some((t) => String(t?.type ?? "").toLowerCase() === "workflow");
|
||||
}
|
||||
|
||||
export function triggerDestinations(workflows, { owner, excludeFile } = {}) {
|
||||
return (workflows ?? []).filter((w) => {
|
||||
if (owner && w.owner !== owner) return false;
|
||||
if (excludeFile && w.file === excludeFile && w.owner === owner) return false;
|
||||
return hasWorkflowTrigger(w);
|
||||
});
|
||||
}
|
||||
|
||||
export { HTTP_METHODS };
|
||||
|
||||
function normalizeStep(step) {
|
||||
const uiId = nextUiId("step");
|
||||
if (typeof step === "string") {
|
||||
return {
|
||||
uiId,
|
||||
kind: "script",
|
||||
script: step,
|
||||
config: {},
|
||||
id: "",
|
||||
when: "",
|
||||
needs: null,
|
||||
};
|
||||
}
|
||||
if (step == null || typeof step !== "object" || Array.isArray(step)) {
|
||||
return {
|
||||
uiId,
|
||||
kind: "script",
|
||||
script: "",
|
||||
config: {},
|
||||
id: "",
|
||||
when: "",
|
||||
needs: null,
|
||||
};
|
||||
}
|
||||
if (step.set != null) {
|
||||
const spec = step.set && typeof step.set === "object" ? step.set : {};
|
||||
return {
|
||||
uiId,
|
||||
kind: "set",
|
||||
script: "set",
|
||||
as: typeof spec.as === "string" ? spec.as : "",
|
||||
expression: typeof spec.expression === "string" ? spec.expression : "",
|
||||
id: typeof step.id === "string" ? step.id : "",
|
||||
when: typeof step.when === "string" ? step.when : "",
|
||||
needs: null,
|
||||
};
|
||||
}
|
||||
const known = new Set(["script", "config", "id", "when", "needs", "set"]);
|
||||
/** @type {Record<string, unknown>} */
|
||||
const extra = {};
|
||||
for (const [key, value] of Object.entries(step)) {
|
||||
if (!known.has(key)) extra[key] = value;
|
||||
}
|
||||
const config =
|
||||
step.config && typeof step.config === "object" && !Array.isArray(step.config)
|
||||
? { ...step.config }
|
||||
: {};
|
||||
return {
|
||||
uiId,
|
||||
kind: "script",
|
||||
script: typeof step.script === "string" ? step.script : "",
|
||||
config,
|
||||
id: typeof step.id === "string" ? step.id : "",
|
||||
when: typeof step.when === "string" ? step.when : "",
|
||||
needs: step.needs ?? null,
|
||||
extra: Object.keys(extra).length ? extra : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeTrigger(raw) {
|
||||
const uiId = nextUiId("trig");
|
||||
if (raw == null || typeof raw !== "object" || Array.isArray(raw)) {
|
||||
return newHttpTrigger();
|
||||
}
|
||||
let type = raw.type ?? "HTTP";
|
||||
if (String(type).toLowerCase() === "http") type = "HTTP";
|
||||
const known =
|
||||
type === "HTTP"
|
||||
? new Set(["type", "method", "path", "auth", "response", "unauthorized"])
|
||||
: type === "cron"
|
||||
? new Set(["type", "schedule"])
|
||||
: new Set(["type"]);
|
||||
/** @type {Record<string, unknown>} */
|
||||
const extra = {};
|
||||
for (const [key, value] of Object.entries(raw)) {
|
||||
if (!known.has(key)) extra[key] = value;
|
||||
}
|
||||
return {
|
||||
uiId,
|
||||
type,
|
||||
method: typeof raw.method === "string" && raw.method ? raw.method : "POST",
|
||||
path: typeof raw.path === "string" ? raw.path : "",
|
||||
schedule: typeof raw.schedule === "string" ? raw.schedule : "",
|
||||
auth: raw.auth ?? null,
|
||||
response: typeof raw.response === "string" ? raw.response : "",
|
||||
unauthorized: raw.unauthorized ?? null,
|
||||
extra: Object.keys(extra).length ? extra : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
function dumpStep(step) {
|
||||
if (step.kind === "set") {
|
||||
/** @type {Record<string, unknown>} */
|
||||
const out = {};
|
||||
if (step.id) out.id = step.id;
|
||||
out.set = {
|
||||
expression: step.expression ?? "",
|
||||
as: step.as ?? "",
|
||||
};
|
||||
if (step.when) out.when = step.when;
|
||||
return out;
|
||||
}
|
||||
/** @type {Record<string, unknown>} */
|
||||
const out = {};
|
||||
if (step.id) out.id = step.id;
|
||||
out.script = step.script ?? "";
|
||||
const config = step.config;
|
||||
if (config && typeof config === "object" && !Array.isArray(config) && Object.keys(config).length) {
|
||||
out.config = config;
|
||||
}
|
||||
if (step.when) out.when = step.when;
|
||||
if (step.needs != null && !isEmptyNeeds(step.needs)) out.needs = step.needs;
|
||||
Object.assign(out, step.extra ?? {});
|
||||
return out;
|
||||
}
|
||||
|
||||
function dumpTrigger(t) {
|
||||
const type = String(t?.type ?? "").toLowerCase() === "http" ? "HTTP" : t?.type;
|
||||
if (type === "HTTP") {
|
||||
/** @type {Record<string, unknown>} */
|
||||
const out = {
|
||||
type: "HTTP",
|
||||
method: t.method || "POST",
|
||||
path: t.path || "/",
|
||||
};
|
||||
if (t.auth != null && t.auth !== false && t.auth !== "") out.auth = t.auth;
|
||||
if (t.response) out.response = t.response;
|
||||
if (t.unauthorized != null && t.unauthorized !== "") out.unauthorized = t.unauthorized;
|
||||
Object.assign(out, t.extra ?? {});
|
||||
return out;
|
||||
}
|
||||
if (type === "cron") {
|
||||
/** @type {Record<string, unknown>} */
|
||||
const out = { type: "cron", schedule: t.schedule || "" };
|
||||
Object.assign(out, t.extra ?? {});
|
||||
return out;
|
||||
}
|
||||
if (type === "workflow") {
|
||||
return { type: "workflow", ...(t.extra ?? {}) };
|
||||
}
|
||||
return { type: t?.type ?? "HTTP", ...(t.extra ?? {}) };
|
||||
}
|
||||
|
||||
function isEmptyNeeds(needs) {
|
||||
if (needs == null) return true;
|
||||
if (Array.isArray(needs)) return needs.length === 0;
|
||||
if (typeof needs === "object") return Object.keys(needs).length === 0;
|
||||
return false;
|
||||
}
|
||||
@@ -1,46 +1,15 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { parse as parseYaml } from "yaml";
|
||||
import { LuArrowLeft, LuPause, LuPlay, LuSave } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useOwners,
|
||||
useRunWorkflow,
|
||||
useSaveWorkflow,
|
||||
useSetWorkflowEnabled,
|
||||
useWorkflow,
|
||||
} from "../api/hooks.js";
|
||||
import { CodeEditor } from "../components/CodeEditor.jsx";
|
||||
import { MermaidDiagram } from "../components/MermaidDiagram.jsx";
|
||||
import { workflowToFlowchart } from "../lib/workflow-mermaid.js";
|
||||
|
||||
const NEW_YAML = `name: new workflow
|
||||
scripts:
|
||||
- get-current-time.js
|
||||
triggers:
|
||||
- type: HTTP
|
||||
method: POST
|
||||
path: /new
|
||||
`;
|
||||
|
||||
function useYamlPreview(content) {
|
||||
return useMemo(() => {
|
||||
try {
|
||||
const parsedYaml = parseYaml(content);
|
||||
return {
|
||||
parsed: parsedYaml,
|
||||
parseError: null,
|
||||
mermaid: workflowToFlowchart(parsedYaml),
|
||||
};
|
||||
} catch (err) {
|
||||
return {
|
||||
parsed: null,
|
||||
parseError: err instanceof Error ? err.message : String(err),
|
||||
mermaid: { chart: "", scriptIds: {} },
|
||||
};
|
||||
}
|
||||
}, [content]);
|
||||
}
|
||||
import { WorkflowVisualEditor } from "../components/workflow/WorkflowVisualEditor.jsx";
|
||||
import { NEW_WORKFLOW_YAML, parseWorkflowYaml } from "../lib/workflow-doc.js";
|
||||
|
||||
function WorkflowEditorLayout({
|
||||
title,
|
||||
@@ -49,11 +18,8 @@ function WorkflowEditorLayout({
|
||||
saveDisabled,
|
||||
saveError,
|
||||
saveSuccess,
|
||||
formId,
|
||||
onRun,
|
||||
runPending,
|
||||
runDisabled,
|
||||
runError,
|
||||
onSave,
|
||||
onTest,
|
||||
onToggleEnabled,
|
||||
enabled,
|
||||
enablePending,
|
||||
@@ -86,64 +52,26 @@ function WorkflowEditorLayout({
|
||||
{enabled ? "Disable" : "Enable"}
|
||||
</button>
|
||||
) : null}
|
||||
{onRun ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm"
|
||||
disabled={runPending || runDisabled}
|
||||
onClick={onRun}
|
||||
>
|
||||
{runPending ? (
|
||||
<span className="loading loading-spinner loading-xs" />
|
||||
) : (
|
||||
<LuPlay className="size-4" />
|
||||
)}
|
||||
Run
|
||||
{onTest ? (
|
||||
<button type="button" className="btn btn-sm" onClick={onTest}>
|
||||
<LuPlay className="size-4" />
|
||||
Test
|
||||
</button>
|
||||
) : null}
|
||||
<button
|
||||
type="submit"
|
||||
form={formId}
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={savePending || saveDisabled}
|
||||
onClick={onSave}
|
||||
>
|
||||
<LuSave className="size-4" />
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
{children}
|
||||
{saveError ? (
|
||||
<p className="text-error text-sm shrink-0">{saveError}</p>
|
||||
) : null}
|
||||
{runError ? (
|
||||
<p className="text-error text-sm shrink-0">{runError}</p>
|
||||
) : null}
|
||||
{enableError ? (
|
||||
<p className="text-error text-sm shrink-0">{enableError}</p>
|
||||
) : null}
|
||||
{saveSuccess ? (
|
||||
<p className="text-success text-sm shrink-0">Workflow saved</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WorkflowYamlAndDiagram({ content, onChange, parseError, mermaid, parsed }) {
|
||||
return (
|
||||
<div className="grid min-h-0 flex-1 gap-3 lg:grid-cols-2">
|
||||
<div className="min-h-0">
|
||||
<CodeEditor language="yaml" value={content} onChange={onChange} height="100%" />
|
||||
</div>
|
||||
<div className="min-h-0 overflow-auto">
|
||||
{parseError ? (
|
||||
<p className="text-error text-sm">{parseError}</p>
|
||||
) : (
|
||||
<MermaidDiagram chart={mermaid.chart} scriptIds={mermaid.scriptIds} />
|
||||
)}
|
||||
{parsed?.name ? (
|
||||
<p className="text-sm opacity-70 mt-2">{parsed.name}</p>
|
||||
) : null}
|
||||
</div>
|
||||
{saveError ? <p className="text-error text-sm shrink-0">{saveError}</p> : null}
|
||||
{enableError ? <p className="text-error text-sm shrink-0">{enableError}</p> : null}
|
||||
{saveSuccess ? <p className="text-success text-sm shrink-0">Workflow saved</p> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -153,16 +81,15 @@ export function WorkflowNewPage() {
|
||||
const { data: owners = [] } = useOwners();
|
||||
const [owner, setOwner] = useState("");
|
||||
const [file, setFile] = useState("");
|
||||
const [content, setContent] = useState(NEW_YAML);
|
||||
const [content, setContent] = useState(NEW_WORKFLOW_YAML);
|
||||
const [savedYaml] = useState(NEW_WORKFLOW_YAML);
|
||||
const save = useSaveWorkflow();
|
||||
const { parsed, parseError, mermaid } = useYamlPreview(content);
|
||||
|
||||
useEffect(() => {
|
||||
if (!owner && owners[0]) setOwner(owners[0]);
|
||||
}, [owner, owners]);
|
||||
|
||||
function onSave(e) {
|
||||
e.preventDefault();
|
||||
function onSave() {
|
||||
const yamlFile = file.endsWith(".yaml") || file.endsWith(".yml") ? file : `${file}.yaml`;
|
||||
save.mutate(
|
||||
{ owner, file: yamlFile, content },
|
||||
@@ -178,83 +105,71 @@ export function WorkflowNewPage() {
|
||||
return (
|
||||
<WorkflowEditorLayout
|
||||
title="New workflow"
|
||||
formId="workflow-edit-form"
|
||||
onSave={onSave}
|
||||
savePending={save.isPending}
|
||||
saveDisabled={!owner || !file}
|
||||
saveError={save.isError ? errorMessage(save.error) : null}
|
||||
>
|
||||
<form
|
||||
id="workflow-edit-form"
|
||||
onSubmit={onSave}
|
||||
className="flex min-h-0 flex-1 flex-col gap-3"
|
||||
>
|
||||
<div className="flex shrink-0 flex-col sm:flex-row gap-2">
|
||||
<input
|
||||
className="input input-sm w-full sm:max-w-xs"
|
||||
placeholder="owner"
|
||||
value={owner}
|
||||
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>
|
||||
<WorkflowYamlAndDiagram
|
||||
content={content}
|
||||
onChange={setContent}
|
||||
parseError={parseError}
|
||||
mermaid={mermaid}
|
||||
parsed={parsed}
|
||||
<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={
|
||||
<>
|
||||
<input
|
||||
className="input input-sm w-full sm:max-w-xs"
|
||||
placeholder="owner"
|
||||
value={owner}
|
||||
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
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</WorkflowEditorLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export function WorkflowEditPage() {
|
||||
const navigate = useNavigate();
|
||||
const { owner: rawOwner, file: rawFile } = useParams();
|
||||
const owner = decodeURIComponent(rawOwner ?? "");
|
||||
const file = decodeURIComponent(rawFile ?? "");
|
||||
const existing = useWorkflow(owner, file);
|
||||
const save = useSaveWorkflow();
|
||||
const run = useRunWorkflow();
|
||||
const setEnabled = useSetWorkflowEnabled();
|
||||
const [content, setContent] = useState("");
|
||||
const [savedYaml, setSavedYaml] = useState("");
|
||||
const [contentReady, setContentReady] = useState(false);
|
||||
const { parsed, parseError, mermaid } = useYamlPreview(content);
|
||||
|
||||
function onRun() {
|
||||
run.mutate(
|
||||
{ owner, file },
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
if (data?.runId) navigate(`/events/${data.runId}`);
|
||||
},
|
||||
onError: (err) => {
|
||||
const runId = err?.response?.data?.runId;
|
||||
if (runId) navigate(`/events/${runId}`);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
const [testKey, setTestKey] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (existing.isLoading) return;
|
||||
if (existing.data?.content != null) {
|
||||
if (!contentReady && existing.data?.content != null) {
|
||||
setContent(existing.data.content);
|
||||
setSavedYaml(existing.data.content);
|
||||
setContentReady(true);
|
||||
}
|
||||
}, [existing.data, existing.isLoading]);
|
||||
}, [existing.data, existing.isLoading, contentReady]);
|
||||
|
||||
function onSave(e) {
|
||||
e.preventDefault();
|
||||
save.mutate({ owner, file, content });
|
||||
function onSave() {
|
||||
save.mutate(
|
||||
{ owner, file, content },
|
||||
{
|
||||
onSuccess: () => setSavedYaml(content),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
if (existing.isLoading) {
|
||||
@@ -277,18 +192,17 @@ export function WorkflowEditPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const yamlOk = !parseWorkflowYaml(content).parseError;
|
||||
|
||||
return (
|
||||
<WorkflowEditorLayout
|
||||
title={`${owner}/${file}`}
|
||||
formId="workflow-edit-form"
|
||||
savePending={save.isPending}
|
||||
saveDisabled={!contentReady}
|
||||
saveError={save.isError ? errorMessage(save.error) : null}
|
||||
saveSuccess={save.isSuccess}
|
||||
onRun={onRun}
|
||||
runPending={run.isPending}
|
||||
runDisabled={!contentReady || Boolean(parseError) || Boolean(existing.data?.loadError)}
|
||||
runError={run.isError && !run.error?.response?.data?.runId ? errorMessage(run.error) : null}
|
||||
onSave={onSave}
|
||||
onTest={() => setTestKey((k) => k + 1)}
|
||||
onToggleEnabled={() =>
|
||||
setEnabled.mutate({
|
||||
owner,
|
||||
@@ -298,18 +212,20 @@ export function WorkflowEditPage() {
|
||||
}
|
||||
enabled={existing.data?.parsed?.enabled !== false}
|
||||
enablePending={setEnabled.isPending}
|
||||
enableDisabled={!contentReady || Boolean(existing.data?.parseError)}
|
||||
enableDisabled={!contentReady || Boolean(existing.data?.parseError) || !yamlOk}
|
||||
enableError={setEnabled.isError ? errorMessage(setEnabled.error) : null}
|
||||
>
|
||||
<form id="workflow-edit-form" onSubmit={onSave} className="flex min-h-0 flex-1 flex-col">
|
||||
<WorkflowYamlAndDiagram
|
||||
content={content}
|
||||
onChange={setContent}
|
||||
parseError={parseError}
|
||||
mermaid={mermaid}
|
||||
parsed={parsed}
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-3">
|
||||
<WorkflowVisualEditor
|
||||
yaml={content}
|
||||
onYamlChange={setContent}
|
||||
owner={owner}
|
||||
file={file}
|
||||
savedYaml={savedYaml}
|
||||
showTest
|
||||
testKey={testKey}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</WorkflowEditorLayout>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user