({ webhook }: Props)
| 46 | } |
| 47 | |
| 48 | export function Webhook({ webhook }: Props) { |
| 49 | // Get version for requests to switch webhook action type |
| 50 | const version = useVersion() |
| 51 | const { t } = useTranslation('products') |
| 52 | const router = useRouter() |
| 53 | const { locale } = router |
| 54 | |
| 55 | const context = useMainContext() |
| 56 | // Get more user friendly language for the different availability options in |
| 57 | // the webhook schema (we can't change it directly in the schema). Note that |
| 58 | // we specifically don't want to translate these strings with useTranslation() |
| 59 | // like we usually do with strings from data/ui.yml. |
| 60 | const rephraseAvailability = context.data.ui.products.webhooks.rephrase_availability |
| 61 | |
| 62 | // The param that was clicked so we can expand its property <details> element |
| 63 | const [clickedBodyParameterName, setClickedBodyParameterName] = useState<undefined | string>('') |
| 64 | // The selected webhook action type the user selects via a dropdown |
| 65 | const [selectedWebhookActionType, setSelectedWebhookActionType] = useState('') |
| 66 | // The index of the selected action type so we can highlight which one is selected |
| 67 | // in the action type dropdown |
| 68 | const [selectedActionTypeIndex, setSelectedActionTypeIndex] = useState(0) |
| 69 | |
| 70 | const webhookSlug = slug(webhook.data.category) |
| 71 | const webhookFetchUrl = `/api/webhooks/v1?${new URLSearchParams({ |
| 72 | category: webhook.data.category, |
| 73 | version: version.currentVersion, |
| 74 | })}` |
| 75 | |
| 76 | // When you load the page we want to support linking to a specific webhook type |
| 77 | // so this effect sets the webhook type if it's provided in the URL e.g.: |
| 78 | // |
| 79 | // webhook-events-and-payloads?actionType=published#package |
| 80 | // |
| 81 | // where the webhook is set in the hash (which is equal to webhookSlug) and |
| 82 | // the webhook action type is passed in the actionType parameter. |
| 83 | useEffect(() => { |
| 84 | const url = new URL(location.href) |
| 85 | const actionType = url.searchParams.get('actionType') |
| 86 | const hash = url.hash?.slice(1) |
| 87 | |
| 88 | if (actionType && hash && webhook.actionTypes.includes(actionType) && hash === webhookSlug) { |
| 89 | setSelectedWebhookActionType(actionType) |
| 90 | setSelectedActionTypeIndex(webhook.actionTypes.indexOf(actionType)) |
| 91 | } |
| 92 | }, []) |
| 93 | |
| 94 | // callback for the action type dropdown -- sets the action type to the given |
| 95 | // type, index is the index of the selected type so we can highlight it as |
| 96 | // selected. |
| 97 | // |
| 98 | // Besides setting the action type state, we also want to: |
| 99 | // |
| 100 | // * clear the clicked body param so that no properties are expanded when we |
| 101 | // re-render the webhook |
| 102 | // * update the URL so people can link to a specific webhook action type |
| 103 | function handleActionTypeChange(type: string, index: number) { |
| 104 | setClickedBodyParameterName('') |
| 105 | setSelectedWebhookActionType(type) |
nothing calls this directly
no test coverage detected