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.
2026-08-14 19:41:09 +07:00
parent 049f5c56e3
commit fdb1c0a8a6
5 changed files with 288 additions and 208 deletions
@@ -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) },
                  )
                }
              >