Webhook Tested Success Block for React

Nothing was delivered or stored. The two deliveries, their ids and times, the bodies and the headers are typed constants at the top of the file, and the host ends in .example. Send again only lists the second one, and Save changes only turns the badge to Saved. To wire it, fill DELIVERIES from your delivery log, make Send again call your relay's test endpoint and add the row it returns, and make Save changes store the endpoint. Show a failed status (a non-2xx code) in the same row and detail; the layout does not change.

It lists a second sample delivery, selects it and says "Sent again in this demo. Nothing was delivered." The second slot is held from the start by a quiet row of the same height, so the window and the detail below it on a phone never move. Once both are listed the button stays in place, keeps its focus and answers with "Both sample deliveries are listed.".

The tabs follow the library's own keys. In the JSON trees the arrow keys move between nodes and open or close the ones that hold more, and the headers table sits in a named region that takes focus so a keyboard can scroll a wide value sideways. The bodies read as plain foreground text, since status never relies on colour here: "200 OK" has a check and its words.

The endpoint is a draft when the page opens, so the badge says Not saved and the button is the one primary. Pressing it says "Saved in this demo. Nothing was stored.", turns the badge to Saved and leaves the button where it is, quiet, so a second press answers "No changes to save." instead of vanishing.

The chosen delivery's id (for example dlv_4f8a21), through the browser's clipboard, and it says so in the window's one live line. If the clipboard refuses, the line says it could not copy and to copy it by hand. Pick the second delivery and the button copies that one's id.

It keeps its height (36rem on a phone, 46rem from the medium breakpoint) and scrolls inside itself. Below the medium breakpoint the deliveries sit above the detail, and the tab panels grow with their content instead of scrolling on their own. The live line stays at the window's foot.