feat(web): add workflow creation and editing functionality
- Introduced WorkflowNewPage and WorkflowEditPage for creating and editing workflows. - Updated App component to include new routes for workflow management. - Enhanced workflow diagram generation in workflow-mermaid.js for better visualization. - Modified WorkflowsPage to support navigation to the new workflow pages. - Improved HomePage links to direct users to the correct workflow edit paths.
This commit is contained in:
@@ -9,6 +9,7 @@ import { ScriptsPage } from "./pages/ScriptsPage.jsx";
|
||||
import { ScriptDryRunPage } from "./pages/ScriptDryRunPage.jsx";
|
||||
import { ScriptEditPage, ScriptNewPage } from "./pages/ScriptEditPage.jsx";
|
||||
import { WorkflowsPage } from "./pages/WorkflowsPage.jsx";
|
||||
import { WorkflowEditPage, WorkflowNewPage } from "./pages/WorkflowEditPage.jsx";
|
||||
import { EventsPage } from "./pages/EventsPage.jsx";
|
||||
import { EventDetailPage } from "./pages/EventDetailPage.jsx";
|
||||
import { UsersPage } from "./pages/UsersPage.jsx";
|
||||
@@ -51,6 +52,8 @@ export function App() {
|
||||
<Route path="/scripts/:name/dry-run" element={<ScriptDryRunPage />} />
|
||||
<Route path="/scripts/:name/edit" element={<ScriptEditPage />} />
|
||||
<Route path="/workflows" element={<WorkflowsPage />} />
|
||||
<Route path="/workflows/new" element={<WorkflowNewPage />} />
|
||||
<Route path="/workflows/:owner/:file/edit" element={<WorkflowEditPage />} />
|
||||
<Route path="/events" element={<EventsPage />} />
|
||||
<Route path="/events/:id" element={<EventDetailPage />} />
|
||||
{user.role === "admin" ? (
|
||||
|
||||
@@ -1,12 +1,3 @@
|
||||
function sanitize(label) {
|
||||
const cleaned = String(label ?? "")
|
||||
.replace(/[^A-Za-z0-9]+/g, "_")
|
||||
.replace(/_+/g, "_")
|
||||
.replace(/^_|_$/g, "")
|
||||
.slice(0, 48);
|
||||
return cleaned || "node";
|
||||
}
|
||||
|
||||
function parseStep(step) {
|
||||
if (typeof step === "string") {
|
||||
return { script: step, id: null, needs: null };
|
||||
@@ -32,27 +23,35 @@ function parentIdsFromNeeds(needs) {
|
||||
return [];
|
||||
}
|
||||
|
||||
export function workflowToArchitecture(parsed) {
|
||||
function mermaidLabel(text) {
|
||||
return String(text ?? "")
|
||||
.replace(/"/g, "#quot;")
|
||||
.replace(/[\[\]]/g, " ")
|
||||
.trim() || "node";
|
||||
}
|
||||
|
||||
function triggerLabel(t) {
|
||||
const type = String(t?.type ?? "").toLowerCase();
|
||||
if (type === "cron") return `cron ${t.schedule ?? ""}`.trim();
|
||||
const method = t?.method ?? "POST";
|
||||
const path = t?.path ?? "";
|
||||
return `${method} ${path}`.trim();
|
||||
}
|
||||
|
||||
export function workflowToFlowchart(parsed) {
|
||||
/** @type {Record<string, string>} */
|
||||
const scriptIds = {};
|
||||
if (!parsed || typeof parsed !== "object") {
|
||||
return { chart: "", scriptIds };
|
||||
}
|
||||
|
||||
const groupId = "wf";
|
||||
const name = sanitize(parsed.name || "workflow");
|
||||
const lines = ["architecture-beta", ` group ${groupId}[${name}]`];
|
||||
const lines = ["flowchart LR"];
|
||||
|
||||
const triggerIds = [];
|
||||
const triggers = Array.isArray(parsed.triggers) ? parsed.triggers : [];
|
||||
triggers.forEach((t, i) => {
|
||||
const id = `t${i}`;
|
||||
const icon = t?.type === "cron" ? "cloud" : "internet";
|
||||
const label =
|
||||
t?.type === "cron"
|
||||
? `cron ${t.schedule ?? ""}`
|
||||
: `${t?.method ?? "POST"} ${t?.path ?? ""}`;
|
||||
lines.push(` service ${id}(${icon})[${sanitize(label)}] in ${groupId}`);
|
||||
lines.push(` ${id}(["${mermaidLabel(triggerLabel(t))}"])`);
|
||||
triggerIds.push(id);
|
||||
});
|
||||
|
||||
@@ -74,9 +73,8 @@ export function workflowToArchitecture(parsed) {
|
||||
|
||||
for (const s of parsedSteps) {
|
||||
scriptIds[s.mermaidId] = s.script;
|
||||
lines.push(
|
||||
` service ${s.mermaidId}(server)[${sanitize(s.id || s.script)}] in ${groupId}`,
|
||||
);
|
||||
const label = s.id ? `${s.id}: ${s.script}` : s.script;
|
||||
lines.push(` ${s.mermaidId}["${mermaidLabel(label)}"]`);
|
||||
}
|
||||
|
||||
if (dagMode) {
|
||||
@@ -89,12 +87,12 @@ export function workflowToArchitecture(parsed) {
|
||||
}
|
||||
for (const pid of parents) {
|
||||
const from = idToMermaid[pid];
|
||||
if (from) lines.push(` ${from}:R -- L:${s.mermaidId}`);
|
||||
if (from) lines.push(` ${from} --> ${s.mermaidId}`);
|
||||
}
|
||||
}
|
||||
for (const tid of triggerIds) {
|
||||
for (const rid of roots) {
|
||||
lines.push(` ${tid}:R -- L:${rid}`);
|
||||
lines.push(` ${tid} --> ${rid}`);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
@@ -102,18 +100,18 @@ export function workflowToArchitecture(parsed) {
|
||||
let firstScript = null;
|
||||
for (const s of parsedSteps) {
|
||||
if (!firstScript) firstScript = s.mermaidId;
|
||||
if (prev) lines.push(` ${prev}:R -- L:${s.mermaidId}`);
|
||||
if (prev) lines.push(` ${prev} --> ${s.mermaidId}`);
|
||||
prev = s.mermaidId;
|
||||
}
|
||||
if (firstScript) {
|
||||
for (const tid of triggerIds) {
|
||||
lines.push(` ${tid}:R -- L:${firstScript}`);
|
||||
lines.push(` ${tid} --> ${firstScript}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (triggerIds.length >= 2) {
|
||||
lines.push(` align column ${triggerIds.join(" ")}`);
|
||||
if (lines.length === 1) {
|
||||
return { chart: "", scriptIds };
|
||||
}
|
||||
|
||||
return { chart: lines.join("\n"), scriptIds };
|
||||
|
||||
@@ -70,7 +70,7 @@ export function HomePage() {
|
||||
<li key={w.key}>
|
||||
<Link
|
||||
className="link link-error"
|
||||
to={`/workflows?edit=${encodeURIComponent(w.owner)}/${encodeURIComponent(w.file)}`}
|
||||
to={`/workflows/${encodeURIComponent(w.owner)}/${encodeURIComponent(w.file)}/edit`}
|
||||
>
|
||||
{w.key}: {w.loadError}
|
||||
</Link>
|
||||
|
||||
@@ -0,0 +1,229 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { parse as parseYaml } from "yaml";
|
||||
import { LuArrowLeft, LuSave } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import { useOwners, useSaveWorkflow, 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]);
|
||||
}
|
||||
|
||||
function WorkflowEditorLayout({
|
||||
title,
|
||||
backTo = "/workflows",
|
||||
savePending,
|
||||
saveDisabled,
|
||||
saveError,
|
||||
saveSuccess,
|
||||
formId,
|
||||
children,
|
||||
}) {
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-5rem)] min-h-[32rem] flex-col gap-3">
|
||||
<div className="flex shrink-0 flex-wrap items-center gap-2">
|
||||
<Link to={backTo} className="btn btn-ghost btn-sm btn-square" aria-label="Back">
|
||||
<LuArrowLeft className="size-4" />
|
||||
</Link>
|
||||
<h1 className="truncate text-xl font-semibold">{title}</h1>
|
||||
<div className="flex-1" />
|
||||
<button
|
||||
type="submit"
|
||||
form={formId}
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={savePending || saveDisabled}
|
||||
>
|
||||
<LuSave className="size-4" />
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
{children}
|
||||
{saveError ? (
|
||||
<p className="text-error text-sm shrink-0">{saveError}</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function WorkflowNewPage() {
|
||||
const navigate = useNavigate();
|
||||
const { data: owners = [] } = useOwners();
|
||||
const [owner, setOwner] = useState("");
|
||||
const [file, setFile] = useState("");
|
||||
const [content, setContent] = useState(NEW_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();
|
||||
const yamlFile = file.endsWith(".yaml") || file.endsWith(".yml") ? file : `${file}.yaml`;
|
||||
save.mutate(
|
||||
{ owner, file: yamlFile, content },
|
||||
{
|
||||
onSuccess: () =>
|
||||
navigate(
|
||||
`/workflows/${encodeURIComponent(owner)}/${encodeURIComponent(yamlFile)}/edit`,
|
||||
),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<WorkflowEditorLayout
|
||||
title="New workflow"
|
||||
formId="workflow-edit-form"
|
||||
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}
|
||||
/>
|
||||
</form>
|
||||
</WorkflowEditorLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export function WorkflowEditPage() {
|
||||
const { owner: rawOwner, file: rawFile } = useParams();
|
||||
const owner = decodeURIComponent(rawOwner ?? "");
|
||||
const file = decodeURIComponent(rawFile ?? "");
|
||||
const existing = useWorkflow(owner, file);
|
||||
const save = useSaveWorkflow();
|
||||
const [content, setContent] = useState("");
|
||||
const [contentReady, setContentReady] = useState(false);
|
||||
const { parsed, parseError, mermaid } = useYamlPreview(content);
|
||||
|
||||
useEffect(() => {
|
||||
if (existing.isLoading) return;
|
||||
if (existing.data?.content != null) {
|
||||
setContent(existing.data.content);
|
||||
setContentReady(true);
|
||||
}
|
||||
}, [existing.data, existing.isLoading]);
|
||||
|
||||
function onSave(e) {
|
||||
e.preventDefault();
|
||||
save.mutate({ owner, file, content });
|
||||
}
|
||||
|
||||
if (existing.isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-[12rem] items-center justify-center">
|
||||
<span className="loading loading-spinner loading-lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (existing.isError) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Link to="/workflows" className="btn btn-ghost btn-sm">
|
||||
<LuArrowLeft className="size-4" />
|
||||
Back
|
||||
</Link>
|
||||
<p className="text-error">Workflow not found</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<WorkflowEditorLayout
|
||||
title={`${owner}/${file}`}
|
||||
formId="workflow-edit-form"
|
||||
savePending={save.isPending}
|
||||
saveDisabled={!contentReady}
|
||||
saveError={save.isError ? errorMessage(save.error) : null}
|
||||
saveSuccess={save.isSuccess}
|
||||
>
|
||||
<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}
|
||||
/>
|
||||
</form>
|
||||
</WorkflowEditorLayout>
|
||||
);
|
||||
}
|
||||
@@ -1,127 +1,38 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Link, useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { parse as parseYaml } from "yaml";
|
||||
import {
|
||||
LuActivity,
|
||||
LuPencil,
|
||||
LuPlay,
|
||||
LuPlus,
|
||||
LuRefreshCw,
|
||||
LuSave,
|
||||
LuTrash2,
|
||||
LuX,
|
||||
} from "react-icons/lu";
|
||||
import { useState } from "react";
|
||||
import { Link, Navigate, useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { LuActivity, LuPencil, LuPlay, LuPlus, LuRefreshCw, LuTrash2 } from "react-icons/lu";
|
||||
import { errorMessage } from "../api/client.js";
|
||||
import {
|
||||
useDeleteWorkflow,
|
||||
useOwners,
|
||||
useReregisterWorkflows,
|
||||
useRunWorkflow,
|
||||
useSaveWorkflow,
|
||||
useWorkflow,
|
||||
useWorkflows,
|
||||
} from "../api/hooks.js";
|
||||
import { CodeEditor } from "../components/CodeEditor.jsx";
|
||||
import { MermaidDiagram } from "../components/MermaidDiagram.jsx";
|
||||
import { formatTime, WorkflowStatusBadge } from "../lib/format.jsx";
|
||||
import { workflowToArchitecture } from "../lib/workflow-mermaid.js";
|
||||
|
||||
const NEW_YAML = `name: new workflow
|
||||
scripts:
|
||||
- get-current-time.js
|
||||
triggers:
|
||||
- type: HTTP
|
||||
method: POST
|
||||
path: /new
|
||||
`;
|
||||
|
||||
export function WorkflowsPage() {
|
||||
const navigate = useNavigate();
|
||||
const [params, setParams] = useSearchParams();
|
||||
const [params] = useSearchParams();
|
||||
const editParam = params.get("edit");
|
||||
const { data: workflows = [], isLoading } = useWorkflows();
|
||||
const { data: owners = [] } = useOwners();
|
||||
const [mode, setMode] = useState(null);
|
||||
const [owner, setOwner] = useState("default");
|
||||
const [file, setFile] = useState("");
|
||||
const [content, setContent] = useState("");
|
||||
const [confirmDelete, setConfirmDelete] = useState(null);
|
||||
const [runError, setRunError] = useState(null);
|
||||
|
||||
const existing = useWorkflow(
|
||||
mode === "edit" ? owner : null,
|
||||
mode === "edit" ? file : null,
|
||||
mode === "edit",
|
||||
);
|
||||
const save = useSaveWorkflow();
|
||||
const del = useDeleteWorkflow();
|
||||
const run = useRunWorkflow();
|
||||
const reregister = useReregisterWorkflows();
|
||||
|
||||
useEffect(() => {
|
||||
if (!editParam) return;
|
||||
if (editParam) {
|
||||
const slash = editParam.indexOf("/");
|
||||
if (slash === -1) return;
|
||||
setMode("edit");
|
||||
setOwner(editParam.slice(0, slash));
|
||||
setFile(editParam.slice(slash + 1));
|
||||
}, [editParam]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mode === "edit" && existing.data?.content != null) {
|
||||
setContent(existing.data.content);
|
||||
if (slash !== -1) {
|
||||
const owner = editParam.slice(0, slash);
|
||||
const file = editParam.slice(slash + 1);
|
||||
return (
|
||||
<Navigate
|
||||
to={`/workflows/${encodeURIComponent(owner)}/${encodeURIComponent(file)}/edit`}
|
||||
replace
|
||||
/>
|
||||
);
|
||||
}
|
||||
}, [mode, existing.data]);
|
||||
|
||||
const { parsed, parseError, mermaid } = useMemo(() => {
|
||||
try {
|
||||
const parsedYaml = parseYaml(content);
|
||||
const arch = workflowToArchitecture(parsedYaml);
|
||||
return { parsed: parsedYaml, parseError: null, mermaid: arch };
|
||||
} catch (err) {
|
||||
return {
|
||||
parsed: null,
|
||||
parseError: err instanceof Error ? err.message : String(err),
|
||||
mermaid: { chart: "", scriptIds: {} },
|
||||
};
|
||||
}
|
||||
}, [content]);
|
||||
|
||||
function openAdd() {
|
||||
setMode("add");
|
||||
setOwner(owners[0] || "default");
|
||||
setFile("");
|
||||
setContent(NEW_YAML);
|
||||
setParams({});
|
||||
}
|
||||
|
||||
function openEdit(w) {
|
||||
setMode("edit");
|
||||
setOwner(w.owner);
|
||||
setFile(w.file);
|
||||
setParams({ edit: `${w.owner}/${w.file}` });
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
setMode(null);
|
||||
setFile("");
|
||||
setContent("");
|
||||
setParams({});
|
||||
}
|
||||
|
||||
function onSave(e) {
|
||||
e.preventDefault();
|
||||
const yamlFile = file.endsWith(".yaml") || file.endsWith(".yml") ? file : `${file}.yaml`;
|
||||
save.mutate(
|
||||
{ owner, file: yamlFile, content },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setMode("edit");
|
||||
setFile(yamlFile);
|
||||
setParams({ edit: `${owner}/${yamlFile}` });
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function onRun(w) {
|
||||
@@ -145,9 +56,7 @@ export function WorkflowsPage() {
|
||||
}
|
||||
|
||||
const runningKey =
|
||||
run.isPending && run.variables
|
||||
? `${run.variables.owner}/${run.variables.file}`
|
||||
: null;
|
||||
run.isPending && run.variables ? `${run.variables.owner}/${run.variables.file}` : null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -168,10 +77,10 @@ export function WorkflowsPage() {
|
||||
)}
|
||||
Reregister
|
||||
</button>
|
||||
<button type="button" className="btn btn-primary btn-sm" onClick={openAdd}>
|
||||
<Link to="/workflows/new" className="btn btn-primary btn-sm">
|
||||
<LuPlus className="size-4" />
|
||||
Add
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -200,7 +109,14 @@ export function WorkflowsPage() {
|
||||
<tbody>
|
||||
{workflows.map((w) => (
|
||||
<tr key={w.key} className="hover">
|
||||
<td>{w.name}</td>
|
||||
<td>
|
||||
<Link
|
||||
className="link"
|
||||
to={`/workflows/${encodeURIComponent(w.owner)}/${encodeURIComponent(w.file)}/edit`}
|
||||
>
|
||||
{w.name}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="font-mono text-xs">{w.owner}</td>
|
||||
<td>
|
||||
<WorkflowStatusBadge workflow={w} />
|
||||
@@ -231,14 +147,13 @@ export function WorkflowsPage() {
|
||||
>
|
||||
<LuActivity className="size-4" />
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
<Link
|
||||
className="btn btn-ghost btn-xs"
|
||||
title="Edit"
|
||||
onClick={() => openEdit(w)}
|
||||
to={`/workflows/${encodeURIComponent(w.owner)}/${encodeURIComponent(w.file)}/edit`}
|
||||
>
|
||||
<LuPencil className="size-4" />
|
||||
</button>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
@@ -255,64 +170,6 @@ export function WorkflowsPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode ? (
|
||||
<form onSubmit={onSave} className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="font-semibold">
|
||||
{mode === "add" ? "New workflow" : `${owner}/${file}`}
|
||||
</h2>
|
||||
<button type="button" className="btn btn-ghost btn-sm btn-square" onClick={closeForm} aria-label="Close">
|
||||
<LuX className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
{mode === "add" ? (
|
||||
<div className="flex 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>
|
||||
) : null}
|
||||
{mode === "edit" && existing.isLoading ? (
|
||||
<span className="loading loading-spinner" />
|
||||
) : (
|
||||
<div className="grid gap-3 lg:grid-cols-2">
|
||||
<CodeEditor language="yaml" value={content} onChange={setContent} />
|
||||
<div>
|
||||
{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>
|
||||
)}
|
||||
{save.isError ? (
|
||||
<p className="text-error text-sm">{errorMessage(save.error)}</p>
|
||||
) : null}
|
||||
<button type="submit" className="btn btn-primary btn-sm" disabled={save.isPending}>
|
||||
<LuSave className="size-4" />
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
) : null}
|
||||
|
||||
{confirmDelete ? (
|
||||
<dialog className="modal modal-open">
|
||||
<div className="modal-box">
|
||||
@@ -331,14 +188,7 @@ export function WorkflowsPage() {
|
||||
onClick={() =>
|
||||
del.mutate(
|
||||
{ owner: confirmDelete.owner, file: confirmDelete.file },
|
||||
{
|
||||
onSuccess: () => {
|
||||
if (owner === confirmDelete.owner && file === confirmDelete.file) {
|
||||
closeForm();
|
||||
}
|
||||
setConfirmDelete(null);
|
||||
},
|
||||
},
|
||||
{ onSuccess: () => setConfirmDelete(null) },
|
||||
)
|
||||
}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user