Event Webhook detail page with logs

[tinahollygb]

Features and Changes

SimpleTooltip component and useCopyToClipboard hook

The <CopyToClipboard /> component had some useful UI and functionality. I didn't want all of the UI it provided, so I created 2 separate pieces of functionality to assist in the parts I did want, and de-coupled the responsibility of how stuff looks from the responsibility of the behaviour/functionality:

• SimpleTooltip is the UI only for the tooltip part of the above-mentioned component, which uses the bootstrap classes. It has no behaviour and is only concerned about showing the tooltip in the desired position. It takes a position prop to allow devs to choose where it shows up relative to where it's placed. It does not do any kind of boundary detection so it's up to the developer to choose the position. Usually choosing top or bottom will be ok, and left or right works for elements that are centred in the page for mobile and desktop.
• useCopyToClipboard is functionality for copying to the clipboard. The existing component was using deprecated API's so I moved to the newer navigator.clipboard API. I retained similar functionality for checking for browser support, as well as a successful copy. As a convenience, I've added the ability to set a timeout to flip the success flag, to allow for similar implementations (hiding a tooltip after X ms). This separate hook will allow us to use copy to clipboard functionality with the current browser API's while also not being tied to any required UI in order to get that convenience.

Here's a video of how tooltip position works:

tooltip.position.mov

Here's a video of the tooltip and the hook implemented:

token.copied.mov

EventWebHookDetail

I've split the detail page into 2 components, this is the 1st one. It implements the above-mentioned SimpleTooltip and useCopyToClipboard functionality to allow for copying of the webhook secret. When there is no browser support, the clipboard icon and button are hidden so the functionality is not present and the user will need to copy the text. If it is supported, the user can still copy the text manually but the button will provide a nicer UX where the clipboard icon turns into a clipboard icon with a checkmark temporarily while the copied message is visible in the temporary tooltip.

Last run successful:

Last run failed:

No runs:

I've also included an example for how this UI scales when we add a lot more events. Please note, only 3 of these events are real.

Here's the copy secret functionality:

copy.secret.UX.mov

EventWebHookDetail and EventWebHookLogs

Here's an example URL to get to the page: http://localhost:3000/settings/webhooks/event/ewh-7a6d333d-165d-40ed-bb6f-1b60c02152ec

Default state:

The payload code box also expands.

Unfortunately no stories for this one because the <Code /> component uses next/dynamic for lazy loading the Prism syntax highlighting and this doesn't work in Storybook.

Here's a video of a webhook with both successful and failed runs:

navigating.run.logs.mov

Empty state

I'm hiding the 2-up layout when there are no runs.

Dependencies

None

Testing

Enable the EventWebHooks component in ./packages/front-end/pages/settings/webhooks/index.tsx and navigate to Webhooks in the sidebar. Click on event web hooks.

Create an event webhook if you don't have one already.

Watch event feature.updated.

Go to the features tab and toggle any of the environment toggles.