fix(webapp): webhooks dashboard UI pass - #4490
Conversation
Webhooks was a section holding a single "Deliveries" item. It now sits as a top-level item below Sessions, and the page is titled "Webhook deliveries". Registering the page in the favorites registry also fixes its favorite name: favoriting it added "Page: Deliveries" to the side menu, and now adds "Webhook deliveries".
Make the whole delivery row clickable. The external delivery ID, created, processed and error cells carried no link, and the target cell only linked when the delivery had a run or session, so most of each row was dead. Dimmed "None" and "Unknown" cells now brighten with the rest of the row on hover. Move the new-deliveries button inline, to the left of the pager, rather than on its own row beneath it. Brighten the Test filter icon, drop the redundant search field from the Status and More filters menus, use the shared Badge for the "Test" tag, size the webhook icon to match the Tasks page, and show 60 deliveries per page instead of 25.
Drop the duplicate status badge from the title bar (the sidebar already has a Status row), centre the "nothing was captured" tab messages and set them a size larger, and ellipsise the copyable sidebar values so an unbreakable hash or opaque id no longer overflows its column. Those values move up to text-sm. Round the top of the delivery timeline's thick bar. The run timeline gets that corner from the start-cap-thick event above its thick line, but a delivery has only two timestamps, so the line itself starts the bar and had a square top on every succeeded and failed delivery. CopyableText gains an opt-in truncate prop and RunTimelineLine an opt-in roundedTop, so other callers are untouched.
The delivery seed script minted `id` and `friendlyId` as two independent ids, but the detail lookup derives the row id from the friendlyId, so every seeded delivery's page reported that the delivery could not be found.
The deliveries list passed stickyHeader, which switches the table container to overflow-visible and so stops it being the scroll container. Every other list in the app (runs, sessions, batches) leaves it off and renders the table directly in the layout's content row. The header stays sticky regardless, because TableHeader always sets sticky top-0.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
A UI pass over the webhooks dashboard, on top of #4344. No behaviour changes beyond the fixes below. ## Deliveries list - Whole row is clickable. The external delivery ID, created, processed and error cells had no link, and the target cell only linked when the delivery had a run or session, so most of each row was dead. - Dimmed "None" and "Unknown" cells now brighten with the row on hover. - The new-deliveries button sits inline, left of the pager, instead of on its own row beneath it. - The table scrolls. It was passing `stickyHeader`, which switches the table container to `overflow-visible` and stops it being the scroll container; every other list in the app leaves it off. The header stays sticky either way. - 60 deliveries per page, up from 25. Test tag uses the shared `Badge`, the webhook icon matches the Tasks page, and the Status and More filters menus drop their redundant search fields. ## Delivery detail - Dropped the duplicate status badge from the title bar; the sidebar already has a Status row. - The "nothing was captured" tab messages are centred and a size larger. - Copyable sidebar values ellipsise instead of overflowing their column, so an unbreakable hash or opaque id no longer runs past the edge. `CopyableText` gains an opt-in `truncate` prop that reserves a gutter for the copy button. - The delivery timeline's thick bar is rounded at the top. The run timeline gets that corner from the `start-cap-thick` event above its thick line, but a delivery only has two timestamps, so the line itself starts the bar and had a square top on every succeeded and failed delivery. `RunTimelineLine` gains an opt-in `roundedTop`, so other callers are unaffected. ## Navigation Webhooks was a section containing a single item. It now sits as a top-level item below Sessions, and the page is titled "Webhook deliveries". Registering the page in the favourites registry also fixes its favourite name, which was saving as "Page: Deliveries". ## Also One fix outside the UI: the delivery seed script minted `id` and `friendlyId` as two independent ids, but the detail lookup derives the row id from the friendlyId, so every seeded delivery's page reported that it could not be found.
A UI pass over the webhooks dashboard, on top of #4344. No behaviour changes beyond the fixes below.
Deliveries list
stickyHeader, which switches the table container tooverflow-visibleand stops it being the scroll container; every other list in the app leaves it off. The header stays sticky either way.Badge, the webhook icon matches the Tasks page, and the Status and More filters menus drop their redundant search fields.Delivery detail
CopyableTextgains an opt-intruncateprop that reserves a gutter for the copy button.start-cap-thickevent above its thick line, but a delivery only has two timestamps, so the line itself starts the bar and had a square top on every succeeded and failed delivery.RunTimelineLinegains an opt-inroundedTop, so other callers are unaffected.Navigation
Webhooks was a section containing a single item. It now sits as a top-level item below Sessions, and the page is titled "Webhook deliveries". Registering the page in the favourites registry also fixes its favourite name, which was saving as "Page: Deliveries".
Also
One fix outside the UI: the delivery seed script minted
idandfriendlyIdas two independent ids, but the detail lookup derives the row id from the friendlyId, so every seeded delivery's page reported that it could not be found.