@gntik-ai/templates 0.8.0 → 0.10.0

package/src/workflow-builder/Page.test.tsx

@@ -1,8 +1,8 @@
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expectNoAxeViolations } from '../test/a11y';
 import { useState } from 'react';
-import type { ConsoleEntry } from '@gntik-ai/blocks';
+import { builderNodes, builderEdges, type ConsoleEntry, type FlowGraph } from '@gntik-ai/blocks';
 import FlowBuilderPage from './Page';
 
 // React Flow in jsdom reads the zoom from DOMMatrixReadOnly and node sizes from offset*.
@@ -19,6 +19,107 @@ beforeAll(() => {
 });
 
 describe('FlowBuilderPage', () => {
+  it('keeps nodes and edges as initial values when uncontrolled', async () => {
+    const onSave = vi.fn<(graph: FlowGraph) => void>();
+    const { rerender } = render(<FlowBuilderPage nodes={builderNodes} edges={builderEdges} onSave={onSave} />);
+    rerender(<FlowBuilderPage nodes={[]} edges={[]} onSave={onSave} />);
+    expect(screen.getByText('5 nodes · 4 edges')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onSave.mock.calls[0]?.[0].nodes).toHaveLength(5);
+    expect(onSave.mock.calls[0]?.[0].edges).toHaveLength(4);
+  });
+
+  it('saves the controlled graph on screen when the host ignores a reported edit', async () => {
+    const graph = {
+      nodes: builderNodes.map((node) => ({
+        ...node,
+        selected: node.id === 'validate',
+        dragging: false,
+        measured: { width: 208, height: 90 },
+      })),
+      edges: builderEdges,
+    };
+    const changed = vi.fn();
+    const onSave = vi.fn<(graph: FlowGraph) => void>();
+    render(<FlowBuilderPage graph={graph} onGraphChange={changed} onSave={onSave} />);
+    fireEvent.change(screen.getByRole('textbox', { name: 'Title' }), { target: { value: 'Ignored edit' } });
+    expect(changed).toHaveBeenCalledOnce();
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    const saved = onSave.mock.calls[0]![0];
+    expect(saved.nodes.find((node) => node.id === 'validate')?.data.title).toBe('Validate payload');
+    for (const node of saved.nodes) {
+      expect(node).not.toHaveProperty('selected');
+      expect(node).not.toHaveProperty('dragging');
+      expect(node).not.toHaveProperty('measured');
+    }
+  });
+
+  it('keeps edits made during a pending save unsaved', async () => {
+    let finish = () => {};
+    const onSave = () =>
+      new Promise<void>((resolve) => {
+        finish = resolve;
+      });
+    render(<FlowBuilderPage onSave={onSave} />);
+    fireEvent.click(screen.getByTestId('rf__node-validate'));
+    fireEvent.change(screen.getByRole('textbox', { name: 'Title' }), { target: { value: 'First' } });
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute('aria-busy', 'true');
+    fireEvent.change(screen.getByRole('textbox', { name: 'Title' }), { target: { value: 'Second' } });
+    await act(async () => finish());
+    expect(screen.getByText('You have unsaved changes')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Save' })).not.toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('marks edits unsaved, marks a resolved save saved and leaves failed saves unsaved', async () => {
+    const onSave = vi
+      .fn<(graph: FlowGraph) => Promise<void>>()
+      .mockResolvedValueOnce()
+      .mockRejectedValueOnce(new Error('Offline'));
+    render(<FlowBuilderPage onSave={onSave} />);
+    fireEvent.click(screen.getByTestId('rf__node-validate'));
+    const title = screen.getByRole('textbox', { name: 'Title' });
+    fireEvent.change(title, { target: { value: 'Check order' } });
+    expect(screen.getByText('You have unsaved changes')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(await screen.findByText('All changes saved')).toBeInTheDocument();
+    fireEvent.change(title, { target: { value: 'Check again' } });
+    expect(screen.getByText('You have unsaved changes')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(screen.getByText('You have unsaved changes')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Save' })).not.toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('saves the initial sample graph before an edit', async () => {
+    const onSave = vi.fn<(graph: FlowGraph) => Promise<void>>(() => Promise.resolve());
+    render(<FlowBuilderPage onSave={onSave} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onSave).toHaveBeenCalledOnce();
+    expect(onSave.mock.calls[0]).toEqual([
+      expect.objectContaining({
+        nodes: expect.arrayContaining([expect.objectContaining({ id: 'validate' })]),
+      }),
+    ]);
+    expect(onSave.mock.calls[0]?.[0].nodes).toHaveLength(5);
+    expect(onSave.mock.calls[0]?.[0].edges).toHaveLength(4);
+  });
+
+  it('saves the edited title in the graph', async () => {
+    const onSave = vi.fn(() => Promise.resolve());
+    render(<FlowBuilderPage onSave={onSave} />);
+    fireEvent.click(screen.getByTestId('rf__node-validate'));
+    fireEvent.change(screen.getByRole('textbox', { name: 'Title' }), { target: { value: 'Check order' } });
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onSave).toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({
+        nodes: expect.arrayContaining([
+          expect.objectContaining({ id: 'validate', data: expect.objectContaining({ title: 'Check order' }) }),
+        ]),
+        edges: expect.any(Array),
+      }),
+    );
+  });
+
   it('renders the editor chrome and the flow builder', { timeout: 15000 }, async () => {
     render(<FlowBuilderPage />);
     expect(screen.getByRole('main', { name: 'Order sync editor' })).toBeInTheDocument();

package/src/workflow-builder/Page.tsx

@@ -1,17 +1,21 @@
 import {
   CodePanel,
+  builderNodes,
+  builderEdges,
+  cleanFlowGraph,
   type CodePanelProps,
   FlowBuilder,
   type ConsoleEntry,
   type FlowBuilderProps,
   type FlowEdge,
+  type FlowGraph,
   type FlowNode,
   type FlowNodeKind,
   type PaletteItem,
 } from '@gntik-ai/blocks';
 import { Save, Upload } from '@gntik-ai/icons';
-import { Breadcrumbs, Button, CanvasLayout, StatusTag, type BreadcrumbItem } from '@gntik-ai/ui';
-import { useState } from 'react';
+import { Breadcrumbs, Button, CanvasLayout, StatusTag, useI18n, type BreadcrumbItem } from '@gntik-ai/ui';
+import { useRef, useState } from 'react';
 import { flowBuilderBreadcrumbs, flowBuilderContent } from './data';
 
 export interface FlowBuilderPageProps<Kind extends string = FlowNodeKind> extends Pick<
@@ -25,6 +29,8 @@ export interface FlowBuilderPageProps<Kind extends string = FlowNodeKind> extend
   | 'mode'
   | 'nodeStatus'
   | 'onNodeSelect'
+  | 'graph'
+  | 'onGraphChange'
 > {
   /** Optional companion code panel; run mode forces readOnly. */
   codePanel?: CodePanelProps;
@@ -43,7 +49,7 @@ export interface FlowBuilderPageProps<Kind extends string = FlowNodeKind> extend
   defaultConsoleEntries: ConsoleEntry[];
   onConsoleChange: (entries: ConsoleEntry[]) => void;
   onConsoleClear: () => void;
-  onSave: () => void | Promise<void>;
+  onSave: (graph: FlowGraph<Kind>) => void | Promise<void>;
   onPublish: () => void;
   breadcrumbs: BreadcrumbItem[];
   /** Builder height in px on wide screens. */
@@ -61,8 +67,8 @@ export default function FlowBuilderPage<Kind extends string = FlowNodeKind>(
   const {
     title = flowBuilderContent.title,
     status = flowBuilderContent.status,
-    nodes,
-    edges,
+    nodes = builderNodes,
+    edges = builderEdges,
     palette,
     onRun,
     consoleEntries,
@@ -80,19 +86,32 @@ export default function FlowBuilderPage<Kind extends string = FlowNodeKind>(
     mode,
     nodeStatus,
     onNodeSelect,
+    graph,
+    onGraphChange,
     codePanel,
     breadcrumbs = flowBuilderBreadcrumbs,
     height = 640,
     fullScreen = true,
   } = props;
   const [saving, setSaving] = useState(false);
-  const [savedNote, setSavedNote] = useState(flowBuilderContent.lastSaved);
+  const [initialGraph] = useState<FlowGraph<Kind>>(() => ({ nodes, edges }));
+  const [latestGraph, setLatestGraph] = useState<FlowGraph<Kind>>();
+  const [saveState, setSaveState] = useState<'initial' | 'unsaved' | 'saved'>('initial');
+  const revision = useRef(0);
+  const { t } = useI18n();
+  const savedNote =
+    saveState === 'initial'
+      ? flowBuilderContent.lastSaved
+      : t(saveState === 'unsaved' ? 'actionBar.unsaved' : 'actionBar.saved');
 
   const save = async () => {
     setSaving(true);
+    const savedRevision = revision.current;
     try {
-      await onSave?.();
-      setSavedNote('All changes saved');
+      await onSave?.(cleanFlowGraph(graph ?? latestGraph ?? initialGraph));
+      if (revision.current === savedRevision) setSaveState('saved');
+    } catch {
+      // The host owns persistence errors; retain the unsaved note and allow a retry.
     } finally {
       setSaving(false);
     }
@@ -133,6 +152,13 @@ export default function FlowBuilderPage<Kind extends string = FlowNodeKind>(
           title={title}
           nodes={nodes}
           edges={edges}
+          graph={graph}
+          onGraphChange={(next, change) => {
+            revision.current += 1;
+            setLatestGraph(next);
+            setSaveState('unsaved');
+            onGraphChange?.(next, change);
+          }}
           palette={palette}
           onRun={onRun}
           consoleEntries={consoleEntries}

package/src/workflow-builder/examples/SaveGraph.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import { builderNodes, builderEdges, cleanFlowGraph, type FlowGraph } from '@gntik-ai/blocks';
+import WorkflowBuilderPage from '../Page';
+
+/** Save the graph currently on screen to browser storage; products own persistence. */
+export default function SaveGraph() {
+  const [graph, setGraph] = useState<FlowGraph>(() => cleanFlowGraph({ nodes: builderNodes, edges: builderEdges }));
+  return (
+    <WorkflowBuilderPage
+      graph={graph}
+      onGraphChange={setGraph}
+      onSave={(next) => {
+        localStorage.setItem('workflow-builder-example', JSON.stringify(next));
+      }}
+    />
+  );
+}

package/src/workflow-builder/template.meta.ts

@@ -6,7 +6,7 @@ export const meta: TemplateMeta = {
   priority: 'P3',
   status: 'experimental',
   description:
-    'Full-screen workflow editor with optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode="run", nodeStatus and onNodeSelect passed to FlowBuilder; codePanel passes readOnly, markers, onValidityChange, onMonacoReady and loader to an optional CodePanel (branch, parallel, sequence and worker-backed YAML examples). The app must import \'@gntik-ai/flow/styles.css\' once for the canvas styles. Optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode, nodeStatus and onNodeSelect pass to FlowBuilder unchanged (see its branch, parallel and sequence examples). mode="run" hides Save, Publish and the saved notice, and preserves focus and node selection. Optional codePanel renders a companion CodePanel and passes all its extensions: readOnly, markers, onValidityChange, onMonacoReady and loader; run mode forces its readOnly to true. For example, WorkflowBuilderPage mode="run" nodeStatus={{step:"running"}} onNodeSelect={openDetails}; codePanel={{files,problems:[],loader:yamlLoader,markers}} uses consumer-owned same-origin YAML workers and inline schemas.',
+    'onSave(graph) receives the graph on screen (controlled graph, latest reported edit, or initial starter graph), without selected, dragging or measured node fields. Zero-argument handlers remain valid. Optional graph and onGraphChange pass through to FlowBuilder. Committed edits show actionBar.unsaved, a resolved save shows actionBar.saved, and a rejected save retains unsaved status and releases loading. Edits during a pending save remain unsaved. examples/SaveGraph.tsx shows a controlled graph and onSave={(graph) => localStorage.setItem("workflow-builder-example", JSON.stringify(graph))}; hosts own persistence. Full-screen workflow editor with optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode="run", nodeStatus and onNodeSelect passed to FlowBuilder; codePanel passes readOnly, markers, onValidityChange, onMonacoReady and loader to an optional CodePanel (branch, parallel, sequence and worker-backed YAML examples). The app must import \'@gntik-ai/flow/styles.css\' once for the canvas styles. Optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode, nodeStatus and onNodeSelect pass to FlowBuilder unchanged (see its branch, parallel and sequence examples). mode="run" hides Save, Publish and the saved notice, and preserves focus and node selection. Optional codePanel renders a companion CodePanel and passes all its extensions: readOnly, markers, onValidityChange, onMonacoReady and loader; run mode forces its readOnly to true. For example, WorkflowBuilderPage mode="run" nodeStatus={{step:"running"}} onNodeSelect={openDetails}; codePanel={{files,problems:[],loader:yamlLoader,markers}} uses consumer-owned same-origin YAML workers and inline schemas.',
   layout: 'CanvasLayout',
   blocks: ['flow-builder', 'code-panel'],
 };