nsrb/jerapah-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(scripts): add previewConfigKey to various scripts and enhance UI components

Browse Source 
- Added `previewConfigKey` metadata to multiple scripts including fetch-binary, fetch-html, fetch-http, fetch-rss-feed, fingerprint, get-secret, jsonata, ntfy, render-template, and send-email, improving configuration visibility.
- Updated the `FieldHelp` and `ScriptCard` components to utilize the new preview configuration, enhancing the user interface for displaying script metadata.
- Refactored `TriggerCard` and `WorkflowTestPanel` components to support expanded views, improving user interaction and accessibility of configuration details.
- Enhanced the `WorkflowVisualEditor` to manage test panel visibility more effectively.

This update improves the overall user experience by providing clearer context and configuration options for scripts and workflows.
This commit is contained in:
nsrb
2026-08-15 19:14:19 +07:00
parent 7fe5defc43
commit bccbf551e3
20 changed files with 443 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/server/scripts/fetch-binary.js
+1
View File
@@ -71,6 +71,7 @@ async function fetchBinary(ctx) {
fetchBinary.meta = {
description: "Download a binary URL into ctx.data as a Buffer",
previewConfigKey: "url",
config: {
url: { type: "string", required: false, description: "Direct download URL" },
urlVar: { type: "string", required: false, description: "Key in ctx.data that holds the URL" },
packages/server/scripts/fetch-html.js
+1
View File
@@ -86,6 +86,7 @@ async function fetchHtml(ctx) {
fetchHtml.meta = {
description: "Fetch HTML and optionally select elements or transform with JSONata",
previewConfigKey: "url",
config: {
url: { type: "string", required: true, description: "Page URL" },
selector: { type: "string", required: false, description: "CSS selector" },
packages/server/scripts/fetch-http.js
+1
View File
@@ -115,6 +115,7 @@ async function fetchHttp(ctx) {
fetchHttp.meta = {
description: "Fetch a URL and store the response body.",
previewConfigKey: "url",
config: {
url: { type: "string", required: true, description: "Request URL" },
method: {
packages/server/scripts/fetch-rss-feed.js
+1
View File
@@ -68,6 +68,7 @@ async function fetchRssFeed(ctx) {
fetchRssFeed.meta = {
description: "Fetch an RSS/Atom feed and optionally transform it with JSONata",
previewConfigKey: "url",
config: {
url: { type: "string", required: false, description: "Feed URL (or pass data.url)" },
outputVar: {
packages/server/scripts/fingerprint.js
+1
View File
@@ -56,6 +56,7 @@ async function fingerprint(ctx) {
fingerprint.meta = {
description:
"Hash a value, compare it to the last stored fingerprint, and skip remaining steps when unchanged",
previewConfigKey: "key",
config: {
key: {
type: "string",
packages/server/scripts/get-secret.js
+1
View File
@@ -22,6 +22,7 @@ async function getSecret(ctx) {
getSecret.meta = {
description:
"Load a named secret for this workflow owner into ctx.data. The value is wrapped and redacted in logs.",
previewConfigKey: "name",
config: {
name: {
type: "string",
packages/server/scripts/jsonata.js
+1
View File
@@ -11,6 +11,7 @@ async function jsonataFn(ctx) {
jsonataFn.meta = {
description: "Evaluate a JSONata expression against ctx.data and return the result as the next context",
previewConfigKey: "expression",
config: {
expression: { type: "string", required: true, description: "JSONata expression" },
},
packages/server/scripts/ntfy.js
+1
View File
@@ -131,6 +131,7 @@ async function ntfy(ctx) {
ntfy.meta = {
description: "Send a message or file to an ntfy topic",
previewConfigKey: "url",
config: {
url: {
type: "string",
packages/server/scripts/render-template.js
+1
View File
@@ -79,6 +79,7 @@ async function renderTemplate(ctx) {
renderTemplate.meta = {
description:
"Render an HTML template from Responses (kind: template) with Mustache and return html + plain-text fallback",
previewConfigKey: "template",
config: {
template: {
type: "string",
packages/server/scripts/send-email.js
+1
View File
@@ -230,6 +230,7 @@ async function sendEmail(ctx) {
sendEmail.meta = {
description: "Send an email via SMTP (nodemailer); plain text, HTML, or both",
previewConfigKey: "from",
config: {
service: {
type: "string",
packages/server/scripts/trigger-workflow.js
+1
View File
@@ -28,6 +28,7 @@ async function triggerWorkflow(ctx) {
triggerWorkflow.meta = {
description:
"Fire-and-forget another workflow by YAML name (same owner). Destination must declare triggers: [{ type: workflow }]. Optionally reshape ctx.data with JSONata before sending.",
previewConfigKey: "name",
config: {
name: {
type: "string",
packages/server/workflows/default/track.yaml
+1
View File
@@ -30,3 +30,4 @@ triggers:
- type: HTTP
method: GET
path: /new
enabled: false
packages/web/src/components/workflow/FieldHelp.jsx
+138 -1
View File
@@ -4,7 +4,7 @@ export function FieldHelp({ description }) {
if (!description) return null;
const long = String(description).length > 80;
return (
<div className="tooltip tooltip-top" {...(long ? {} : { "data-tip": description })}>
<div className="tooltip tooltip-top z-50" {...(long ? {} : { "data-tip": description })}>
{long ? (
<div className="tooltip-content">
<p className="max-w-xs text-left text-xs whitespace-pre-wrap">{description}</p>
@@ -27,3 +27,140 @@ export function FieldLabel({ name, required, description, children }) {
</div>
);
}
function fieldNotes(field) {
return [
field.required ? "required" : null,
field.default !== undefined ? `default ${JSON.stringify(field.default)}` : null,
Array.isArray(field.enum)
? field.enum.map((x) => (x && typeof x === "object" ? x.value : x)).join(" | ")
: Array.isArray(field.options)
? field.options.map((x) => (x && typeof x === "object" ? x.value : x)).join(" | ")
: null,
field.description,
]
.filter(Boolean)
.join(" · ");
}
const TITLE_PREVIEW_MAX = 40;
const TOOLTIP_VALUE_MAX = 120;
function stringifyConfigValue(val) {
if (typeof val === "string") return val.replace(/\s+/g, " ").trim();
if (typeof val === "number" || typeof val === "boolean") return String(val);
try {
return JSON.stringify(val);
} catch {
return String(val);
}
}
function truncateConfigValue(val, maxLen) {
const text = stringifyConfigValue(val);
if (!text) return "";
if (text.length <= maxLen) return text;
return `${text.slice(0, Math.max(0, maxLen - 1))}…`;
}
/** Collapsed card title suffix from `meta.previewConfigKey`. */
export function previewConfigValue(config, key, maxLen = TITLE_PREVIEW_MAX) {
const text = configValueText(config, key);
if (!text) return "";
if (text.length <= maxLen) return text;
return `${text.slice(0, Math.max(0, maxLen - 1))}…`;
}
export function configValueText(config, key) {
if (typeof key !== "string" || !key.trim()) return "";
if (config == null || typeof config !== "object") return "";
const val = config[key];
if (val == null || val === "") return "";
return stringifyConfigValue(val);
}
/** Formatted DaisyUI tooltip for a step's current config. */
export function ConfigTooltip({ config, label = "config" }) {
const entries =
config && typeof config === "object" && !Array.isArray(config) ? Object.entries(config) : [];
return (
<div className="tooltip tooltip-bottom z-50">
<div className="tooltip-content z-50 p-0">
<div className="max-w-sm text-left">
{entries.length === 0 ? (
<p className="px-3 py-2 text-xs opacity-80">No config</p>
) : (
<table className="table table-xs">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{entries.map(([name, val]) => (
<tr key={name}>
<td className="font-mono align-top">{name}</td>
<td className="max-w-56 break-all whitespace-normal font-mono opacity-90">
{val == null || val === "" ? (
<span className="opacity-50">—</span>
) : (
truncateConfigValue(val, TOOLTIP_VALUE_MAX)
)}
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
<button type="button" className="badge badge-ghost badge-sm h-6 cursor-help font-normal" aria-label="Current config">
{label}
</button>
</div>
);
}
/** Formatted DaisyUI tooltip for script.meta.input (or similar field maps). */
export function SchemaTooltip({ label = "Input", fields }) {
const entries = Object.entries(fields ?? {});
if (entries.length === 0) return null;
return (
<div className="tooltip tooltip-bottom z-50">
<div className="tooltip-content z-50 p-0">
<div className="max-w-sm text-left">
<table className="table table-xs">
<thead>
<tr>
<th>Field</th>
<th>Type</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
{entries.map(([name, spec]) => {
const field = spec && typeof spec === "object" ? spec : { description: String(spec) };
return (
<tr key={name}>
<td className="font-mono">
{name}
{field.required ? <span className="text-error">*</span> : null}
</td>
<td className="opacity-80">{field.type ?? ""}</td>
<td className="max-w-48 whitespace-normal opacity-90">{fieldNotes(field)}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
<button type="button" className="btn btn-ghost btn-xs" aria-label={`${label} schema`}>
{label}
</button>
</div>
);
}
packages/web/src/components/workflow/ScriptCard.jsx
+134 -113
View File
@@ -1,17 +1,15 @@
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 { LuChevronDown, LuGripVertical, LuMaximize2, LuMinimize2, 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";
import { ConfigTooltip, configValueText, FieldLabel, previewConfigValue, SchemaTooltip } from "./FieldHelp.jsx";
export function ScriptCard({
step,
@@ -35,24 +33,32 @@ export function ScriptCard({
opacity: isDragging ? 0.6 : 1,
};
const [tryOpen, setTryOpen] = useState(false);
const [expanded, setExpanded] = 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);
const preview = previewConfigValue(step.config, meta?.previewConfigKey);
const previewFull = configValueText(step.config, meta?.previewConfigKey);
const baseName = step.kind === "set" ? `set:${step.as || "…"}` : step.script || "untitled";
const titleFull = previewFull ? `${baseName} (${previewFull})` : baseName;
const setConfig =
step.kind === "set" ? { as: step.as ?? "", expression: step.expression ?? "" } : null;
return (
<article
ref={setNodeRef}
style={style}
className="card bg-base-100 border border-primary"
className={`card bg-base-100 border border-primary ${
isDragging ? "z-40" : "z-0 hover:z-30 focus-within:z-30"
}`}
>
<div className="card-body gap-3 p-4">
<div className="flex items-start gap-2">
<div className={`card-body gap-3 ${expanded ? "p-4" : "p-3"}`}>
<div className="flex items-center gap-2">
<button
type="button"
className="btn btn-ghost btn-xs btn-square mt-0.5 cursor-grab active:cursor-grabbing"
className="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
aria-label={`Drag step ${index + 1}`}
disabled={disabled}
{...attributes}
@@ -60,39 +66,52 @@ export function ScriptCard({
>
<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 ? (
<button
type="button"
className="min-w-0 flex-1 text-left"
onClick={() => setExpanded((v) => !v)}
>
<div className="flex min-w-0 items-center gap-2">
<h3 className="card-title min-w-0 flex-1 text-base font-mono" title={titleFull}>
<span className="min-w-0 truncate">{baseName}</span>
{!expanded && preview ? (
<span
className="badge badge-secondary badge-sm max-w-[min(16rem,45%)] shrink-0 truncate font-mono font-normal"
title={previewFull}
>
{preview}
</span>
) : null}
</h3>
{step.id ? (
<span className="badge badge-ghost badge-sm font-mono shrink-0">{step.id}</span>
) : null}
</div>
{expanded && step.kind === "script" && meta?.description ? (
<p className="text-sm opacity-70 mt-1">{meta.description}</p>
) : null}
{step.kind === "set" ? (
{expanded && step.kind === "set" ? (
<p className="text-sm opacity-70 mt-1">Assign a JSONata result onto the context</p>
) : null}
</div>
</button>
{step.kind === "script" ? (
<SchemaTooltip label="Input" fields={meta?.input} />
) : null}
{!expanded ? (
<ConfigTooltip config={step.kind === "set" ? setConfig : (step.config ?? {})} />
) : null}
<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>
</>
<button
type="button"
className="btn btn-ghost btn-xs"
title="Try"
disabled={disabled}
onClick={() => setTryOpen(true)}
>
<LuPlay className="size-4" />
Try
</button>
) : null}
<button
type="button"
@@ -103,89 +122,91 @@ export function ScriptCard({
>
<LuTrash2 className="size-4" />
</button>
<button
type="button"
className="btn btn-ghost btn-xs btn-square"
title={expanded ? "Collapse" : "Expand"}
aria-expanded={expanded}
onClick={() => setExpanded((v) => !v)}
>
<LuChevronDown className={`size-4 opacity-70 transition-transform ${expanded ? "rotate-180" : ""}`} />
</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 ?? ""}
{expanded ? (
<>
{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}
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}
workflows={workflows}
owner={owner}
excludeFile={excludeFile}
onChange={(config) => onChange({ ...step, config })}
/>
)}
<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>
<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>
</>
) : null}
</div>
{tryOpen ? (
<ScriptTryDialog
packages/web/src/components/workflow/TriggerCard.jsx
+64 -29
View File
@@ -1,5 +1,5 @@
import { useState } from "react";
import { LuCopy, LuGripVertical, LuTrash2 } from "react-icons/lu";
import { LuChevronDown, LuCopy, LuGripVertical, LuTrash2 } from "react-icons/lu";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import cronstrue from "cronstrue";
@@ -26,14 +26,21 @@ export function TriggerCard({
opacity: isDragging ? 0.6 : 1,
};
const type = trigger.type;
const [expanded, setExpanded] = useState(false);
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">
<article
ref={setNodeRef}
style={style}
className={`card bg-base-100 border border-primary ${
isDragging ? "z-40" : "z-0 hover:z-30 focus-within:z-30"
}`}
>
<div className={`card-body gap-3 ${expanded ? "p-4" : "p-3"}`}>
<div className="flex items-center gap-2">
<button
type="button"
className="btn btn-ghost btn-xs btn-square mt-0.5 cursor-grab active:cursor-grabbing"
className="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
aria-label={`Drag trigger ${index + 1}`}
disabled={disabled}
{...attributes}
@@ -41,9 +48,14 @@ export function TriggerCard({
>
<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="min-w-0 flex-1 text-left"
onClick={() => setExpanded((v) => !v)}
>
<h3 className="card-title text-base inline">{typeLabel(type)}</h3>
<span className="ml-2 font-mono text-xs opacity-70">{triggerSummary(trigger, owner)}</span>
</button>
<button
type="button"
className="btn btn-ghost btn-xs text-error"
@@ -53,34 +65,57 @@ export function TriggerCard({
>
<LuTrash2 className="size-4" />
</button>
<button
type="button"
className="btn btn-ghost btn-xs btn-square"
title={expanded ? "Collapse" : "Expand"}
aria-expanded={expanded}
onClick={() => setExpanded((v) => !v)}
>
<LuChevronDown className={`size-4 opacity-70 transition-transform ${expanded ? "rotate-180" : ""}`} />
</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>
{expanded ? (
<>
{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}
</>
) : null}
</div>
</article>
);
}
function triggerSummary(trigger, owner) {
const type = trigger?.type;
if (type === "HTTP") {
return `${trigger.method || "POST"} ${namespacedPath(owner || "owner", trigger.path || "/")}`;
}
if (type === "cron") return trigger.schedule || "";
if (type === "workflow") return "callable";
return "";
}
function typeLabel(type) {
if (type === "HTTP") return "HTTP";
if (type === "cron") return "Cron";
packages/web/src/components/workflow/WorkflowTestPanel.jsx
+68 -26
View File
@@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { LuPlay } from "react-icons/lu";
import { LuMaximize2, LuMinimize2, LuPlay } from "react-icons/lu";
import { errorMessage } from "../../api/client.js";
import { useRunWorkflow } from "../../api/hooks.js";
import { CodeEditor } from "../CodeEditor.jsx";
@@ -13,12 +13,14 @@ export function WorkflowTestPanel({
defaultData,
disabled,
disabledReason,
testKey = 0,
open,
onClose,
}) {
const run = useRunWorkflow();
const [dataJson, setDataJson] = useState(() => prettyJson(defaultData ?? {}));
const [parseError, setParseError] = useState(null);
const [last, setLast] = useState(null);
const [expanded, setExpanded] = useState(false);
useEffect(() => {
setDataJson(prettyJson(defaultData ?? {}));
@@ -61,28 +63,52 @@ export function WorkflowTestPanel({
? prettyJson(last.error ? { error: last.error } : last.result)
: "";
function close() {
setExpanded(false);
onClose?.();
}
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%" />
<dialog className={`modal ${open ? "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-5xl flex-col"
}
>
<div className="flex shrink-0 items-start gap-2">
<div className="min-w-0 flex-1">
<h3 className="font-bold text-lg">Test workflow</h3>
<p className="text-sm 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>
</div>
<div className="h-40">
<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>
{disabledReason ? (
<p className="text-warning text-xs mt-2 shrink-0">{disabledReason}</p>
) : null}
{parseError ? <p className="text-error text-sm mt-2 shrink-0">{parseError}</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 h-full" : "min-h-64 h-64"}>
<p className="text-xs opacity-60 mb-1">data</p>
<div className={expanded ? "h-[calc(100%-1.25rem)]" : "h-[calc(100%-1.25rem)]"}>
<CodeEditor language="json" value={dataJson} onChange={setDataJson} height="100%" />
</div>
</div>
<div className={expanded ? "min-h-0 h-full" : "min-h-64 h-64"}>
<p className="text-xs opacity-60 mb-1 flex items-center gap-2">
result
{last?.status ? <StatusBadge status={last.status} /> : null}
@@ -92,13 +118,24 @@ export function WorkflowTestPanel({
</Link>
) : null}
</p>
<CodeEditor language="json" value={resultJson} onChange={() => {}} readOnly height="100%" />
<div className={expanded ? "h-[calc(100%-1.25rem)]" : "h-[calc(100%-1.25rem)]"}>
<CodeEditor
language="json"
value={resultJson}
onChange={() => {}}
readOnly
height="100%"
/>
</div>
</div>
</div>
<div className="flex justify-end">
<div className="modal-action shrink-0">
<button type="button" className="btn" onClick={close}>
Close
</button>
<button
type="button"
className="btn btn-primary btn-sm"
className="btn btn-primary"
disabled={disabled || run.isPending}
onClick={onRun}
>
@@ -111,6 +148,11 @@ export function WorkflowTestPanel({
</button>
</div>
</div>
</details>
<form method="dialog" className="modal-backdrop">
<button type="button" onClick={close}>
close
</button>
</form>
</dialog>
);
}
packages/web/src/components/workflow/WorkflowVisualEditor.jsx
+4 -2
View File
@@ -35,7 +35,8 @@ export function WorkflowVisualEditor({
extraChrome,
showTest,
savedYaml,
testKey,
testOpen,
onTestClose,
}) {
const [tab, setTab] = useState("scripts");
const [lastEdited, setLastEdited] = useState("yaml");
@@ -185,7 +186,8 @@ export function WorkflowVisualEditor({
defaultData={defaultData}
disabled={Boolean(testDisabledReason)}
disabledReason={testDisabledReason}
testKey={testKey}
open={testOpen}
onClose={onTestClose}
/>
) : null}
</>
packages/web/src/lib/script.js
+1
View File
@@ -4,6 +4,7 @@ export const NEW_SCRIPT_TEMPLATE = `async function main(ctx) {
main.meta = {
description: "",
previewConfigKey: "",
config: {},
input: {},
output: {},
packages/web/src/pages/EventDetailPage.jsx
+13 -3
View File
@@ -1,5 +1,5 @@
import { useMemo, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { Link, useNavigate, useParams } from "react-router-dom";
import { LuArrowLeft, LuFilter } from "react-icons/lu";
import { useRun } from "../api/hooks.js";
import { LogViewer } from "../components/LogViewer.jsx";
@@ -22,9 +22,19 @@ function isEditableScript(s) {
export function EventDetailPage() {
const { id } = useParams();
const navigate = useNavigate();
const { data: run, isLoading, error } = useRun(id);
const [stepFilters, setStepFilters] = useState([]);
function goBack() {
const idx = window.history.state?.idx;
if (typeof idx === "number" && idx > 0) {
navigate(-1);
return;
}
navigate("/events");
}
const steps = run?.steps ?? [];
const logs = run?.logs ?? [];
const logFilters = useMemo(
@@ -53,9 +63,9 @@ export function EventDetailPage() {
return (
<div className="space-y-4">
<div className="flex items-center gap-2">
<Link to="/events" className="btn btn-ghost btn-sm btn-square" aria-label="Back">
<button type="button" className="btn btn-ghost btn-sm btn-square" aria-label="Back" onClick={goBack}>
<LuArrowLeft className="size-4" />
</Link>
</button>
<h1 className="text-xl font-semibold truncate">{run.workflow_name || run.workflow}</h1>
<StatusBadge status={run.status} />
</div>
packages/web/src/pages/WorkflowEditPage.jsx
+9 -5
View File
@@ -152,7 +152,7 @@ export function WorkflowEditPage() {
const [content, setContent] = useState("");
const [savedYaml, setSavedYaml] = useState("");
const [contentReady, setContentReady] = useState(false);
const [testKey, setTestKey] = useState(0);
const [testOpen, setTestOpen] = useState(false);
useEffect(() => {
if (existing.isLoading) return;
@@ -192,17 +192,20 @@ export function WorkflowEditPage() {
);
}
const yamlOk = !parseWorkflowYaml(content).parseError;
const parsedDoc = parseWorkflowYaml(content);
const yamlOk = !parsedDoc.parseError;
const workflowName = parsedDoc.doc?.name?.trim();
const pageTitle = workflowName ? `${workflowName} (${file})` : file;
return (
<WorkflowEditorLayout
title={`${owner}/${file}`}
title={pageTitle}
savePending={save.isPending}
saveDisabled={!contentReady}
saveError={save.isError ? errorMessage(save.error) : null}
saveSuccess={save.isSuccess}
onSave={onSave}
onTest={() => setTestKey((k) => k + 1)}
onTest={() => setTestOpen(true)}
onToggleEnabled={() =>
setEnabled.mutate({
owner,
@@ -223,7 +226,8 @@ export function WorkflowEditPage() {
file={file}
savedYaml={savedYaml}
showTest
testKey={testKey}
testOpen={testOpen}
onTestClose={() => setTestOpen(false)}
/>
</div>
</WorkflowEditorLayout>