feat(web): test-fire modal + fixture library (NF-UI-8) #367

Merged

code-lead merged 1 commit from feat/338-nfui8-test-fire into main

2026-04-24 17:12:54 +00:00

claude-desktop commented

2026-04-24 17:01:33 +00:00

Collaborator

Summary

Adds a ▶ Fire test event button on the trigger-source node that opens a two-tab modal (Fixture / Replay past) and submits the chosen payload via flowsApi.testFire (mock shape matching NF-7's POST /flows/:id/dry-run).
On success the canvas drops into editor-local dry-run: ModeBanner flips to dry-run-local (yellow), every node paints a synthesized status/duration overlay through the existing NF-UI-7 replay helpers, and a floating Exit test pill top-right clears the trace.
Ships the first bundled fixture library — 5 seed payloads covering issues.assigned, pull_request.opened, issue_comment.slash_command, cron.tick, and manual — plus flowsApi.listFixtures / getFixture so the list/detail surface is already shape-stable against a future /flows/fixtures endpoint.
Suppresses the test-fire entry point while the canvas is already pinned to a past run (replay wins); save is disabled during an overlay so ephemeral state can't be persisted by accident.

Files touched

apps/web/src/features/flows/TestFireModal.tsx — new (two tabs, JSON preview, Escape / backdrop / Cancel dismiss).
apps/web/src/features/flows/TestFireModal.test.tsx — new (12 cases).
apps/web/src/features/flows/FlowCanvas.test-fire.test.tsx — new (7 cases).
apps/web/src/features/flows/FlowCanvas.tsx — source-node button in edit mode, modal wire-up, canvas-local dry-run state lifted to FlowCanvas so the banner flips without remounting the editor shell.
apps/web/src/features/flows/flowsApi.ts — listFixtures / getFixture / testFire mocks plus TriggerFixture / TestFireResponse types; synthesized trace walks the recorded graph body so the overlay paints in the author's node order.
apps/web/src/fixtures/trigger-samples.json — new (5 fixtures).

Test plan

bun x turbo run typecheck — clean.
bun x biome check . — clean.
bun x vitest run src/features/flows/ — 152 tests pass (19 new).
Manual smoke on /flows/default.issue-assigned — click the source-node's Fire test event button, pick the issue-assigned-dashboard fixture, confirm banner flips to the yellow dry-run-local strip and every node paints the green ok outline.
Confirm the Exit test pill clears the trace and the banner falls back to the server mode (live / dry-run / off).
Confirm the Fire button is hidden / inactive while a ?run=… replay is active.

Out of scope

Fixture-library editor UI (pick-only in v1; ad-hoc payload editing parked for a later story).
Real POST /flows/:id/dry-run wire-up — NF-7 ships the server, swap tracked in #366.
Live executor subscription for ephemeral runs — NF-UI-8 keeps the overlay client-only; SSE support lands with the NF-UI-6 / NF-UI-8 streaming follow-up.

Closes #338

🤖 Generated with Claude Code

## Summary - Adds a **▶ Fire test event** button on the trigger-source node that opens a two-tab modal (Fixture / Replay past) and submits the chosen payload via `flowsApi.testFire` (mock shape matching NF-7's `POST /flows/:id/dry-run`). - On success the canvas drops into **editor-local dry-run**: `ModeBanner` flips to `dry-run-local` (yellow), every node paints a synthesized status/duration overlay through the existing NF-UI-7 replay helpers, and a floating **Exit test** pill top-right clears the trace. - Ships the first bundled fixture library — 5 seed payloads covering `issues.assigned`, `pull_request.opened`, `issue_comment.slash_command`, `cron.tick`, and `manual` — plus `flowsApi.listFixtures` / `getFixture` so the list/detail surface is already shape-stable against a future `/flows/fixtures` endpoint. - Suppresses the test-fire entry point while the canvas is already pinned to a past run (replay wins); save is disabled during an overlay so ephemeral state can't be persisted by accident. ## Files touched - `apps/web/src/features/flows/TestFireModal.tsx` — new (two tabs, JSON preview, Escape / backdrop / Cancel dismiss). - `apps/web/src/features/flows/TestFireModal.test.tsx` — new (12 cases). - `apps/web/src/features/flows/FlowCanvas.test-fire.test.tsx` — new (7 cases). - `apps/web/src/features/flows/FlowCanvas.tsx` — source-node button in edit mode, modal wire-up, canvas-local dry-run state lifted to `FlowCanvas` so the banner flips without remounting the editor shell. - `apps/web/src/features/flows/flowsApi.ts` — `listFixtures` / `getFixture` / `testFire` mocks plus `TriggerFixture` / `TestFireResponse` types; synthesized trace walks the recorded graph body so the overlay paints in the author's node order. - `apps/web/src/fixtures/trigger-samples.json` — new (5 fixtures). ## Test plan - [x] `bun x turbo run typecheck` — clean. - [x] `bun x biome check .` — clean. - [x] `bun x vitest run src/features/flows/` — 152 tests pass (19 new). - [ ] Manual smoke on `/flows/default.issue-assigned` — click the source-node's Fire test event button, pick the `issue-assigned-dashboard` fixture, confirm banner flips to the yellow `dry-run-local` strip and every node paints the green `ok` outline. - [ ] Confirm the Exit test pill clears the trace and the banner falls back to the server mode (live / dry-run / off). - [ ] Confirm the Fire button is hidden / inactive while a `?run=…` replay is active. ## Out of scope - Fixture-library editor UI (pick-only in v1; ad-hoc payload editing parked for a later story). - Real `POST /flows/:id/dry-run` wire-up — NF-7 ships the server, swap tracked in #366. - Live executor subscription for ephemeral runs — NF-UI-8 keeps the overlay client-only; SSE support lands with the NF-UI-6 / NF-UI-8 streaming follow-up. Closes #338 🤖 Generated with [Claude Code](https://claude.com/claude-code)

claude-desktop added 2 commits

2026-04-24 17:01:33 +00:00

feat(web): replay mode + runs drawer (NF-UI-7)

qa / qa (pull_request) Successful in 4m54s

Details

qa / dockerfile (pull_request) Successful in 9s

Details

f3d4dfe446

Bottom-docked RunsDrawer lists recent flow runs across every /flows/*
route; clicking a row navigates to /flows/:flowId?run=:runId, which
flips the FlowCanvas into replay mode: pinned-version body, disabled
save, status/duration/IO overlays per node, and an exit-replay pill.

Closes #337

feat(web): test-fire modal + fixture library (NF-UI-8)

qa / qa (pull_request) Successful in 5m11s

Details

qa / dockerfile (pull_request) Successful in 8s

Details

7e204bac2b

Adds a "▶ Fire test event" button on the trigger-source node that opens a
two-tab modal (Fixture / Replay past) and submits the chosen payload via
flowsApi.testFire. On success the canvas drops into editor-local dry-run
— ModeBanner flips to "dry-run-local" (yellow), every node paints a
synthesized status/duration overlay, and a floating "Exit test" pill
top-right clears the trace.

Ships:
  - TestFireModal.tsx — fixture tree + replay-past list + JSON preview.
  - trigger-samples.json — seed fixtures (issues.assigned,
    pull_request.opened, issue_comment.slash_command, cron.tick, manual).
  - flowsApi.listFixtures / getFixture / testFire (mock-first; shape
    matches NF-7 /flows/:id/dry-run so the swap is a one-file change).
  - FlowCanvas — source-node button in edit mode, modal wire-up, local
    dry-run state propagation to the existing replay overlay helpers.

Tests: 19 new cases across TestFireModal.test.tsx (12) and
FlowCanvas.test-fire.test.tsx (7) — tab switching, fixture/replay
selection, submit dispatch, modal dismissal, save-gate during overlay,
replay-mode suppresses the test-fire entry point.

Out of scope: fixture-library editor UI, server-side
POST /flows/:id/dry-run (NF-7 ships that; swap tracked in #366).

Closes #338

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>