feat(webhook): add support for dynamic placeholders in webhook URL (#1491)
* feat(wehbook): add support for dynamic placeholders in webhook URL * refactor(webhook): rename supportPlaceholders to supportVariables and update related logic Signed-off-by: 0xsysr3ll <0xsysr3ll@pm.me> * feat(i18n): add missing translations Signed-off-by: 0xsysr3ll <0xsysr3ll@pm.me> * refactor(notifications): simplify webhook URL validation logic Signed-off-by: 0xsysr3ll <0xsysr3ll@pm.me> * fix: wrong docs url Co-authored-by: Gauthier <mail@gauthierth.fr> * fix: update webhook documentation URL to point to Jellyseerr Signed-off-by: 0xsysr3ll <0xsysr3ll@pm.me> --------- Signed-off-by: 0xsysr3ll <0xsysr3ll@pm.me> Co-authored-by: Gauthier <mail@gauthierth.fr>
This commit is contained in:
0xsysr3ll
@@ -1,6 +1,7 @@
|
||||
import Button from '@app/components/Common/Button';
|
||||
import LoadingSpinner from '@app/components/Common/LoadingSpinner';
|
||||
import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
|
||||
import SettingsBadge from '@app/components/Settings/SettingsBadge';
|
||||
import globalMessages from '@app/i18n/globalMessages';
|
||||
import defineMessages from '@app/utils/defineMessages';
|
||||
import { isValidURL } from '@app/utils/urlValidationHelper';
|
||||
@@ -73,6 +74,11 @@ const messages = defineMessages(
|
||||
{
|
||||
agentenabled: 'Enable Agent',
|
||||
webhookUrl: 'Webhook URL',
|
||||
webhookUrlTip:
|
||||
'Test Notification URL is set to {testUrl} instead of the actual webhook URL.',
|
||||
supportVariables: 'Support URL Variables',
|
||||
supportVariablesTip:
|
||||
'Available variables are documented in the webhook template variables section',
|
||||
authheader: 'Authorization Header',
|
||||
validationJsonPayloadRequired: 'You must provide a valid JSON payload',
|
||||
webhooksettingssaved: 'Webhook notification settings saved successfully!',
|
||||
@@ -111,8 +117,14 @@ const NotificationsWebhook = () => {
|
||||
.test(
|
||||
'valid-url',
|
||||
intl.formatMessage(messages.validationWebhookUrl),
|
||||
isValidURL
|
||||
function (value) {
|
||||
const { supportVariables } = this.parent;
|
||||
return supportVariables || isValidURL(value);
|
||||
}
|
||||
),
|
||||
|
||||
supportVariables: Yup.boolean(),
|
||||
|
||||
jsonPayload: Yup.string()
|
||||
.when('enabled', {
|
||||
is: true,
|
||||
@@ -147,6 +159,7 @@ const NotificationsWebhook = () => {
|
||||
webhookUrl: data.options.webhookUrl,
|
||||
jsonPayload: data.options.jsonPayload,
|
||||
authHeader: data.options.authHeader,
|
||||
supportVariables: data.options.supportVariables ?? false,
|
||||
}}
|
||||
validationSchema={NotificationsWebhookSchema}
|
||||
onSubmit={async (values) => {
|
||||
@@ -158,6 +171,7 @@ const NotificationsWebhook = () => {
|
||||
webhookUrl: values.webhookUrl,
|
||||
jsonPayload: JSON.stringify(values.jsonPayload),
|
||||
authHeader: values.authHeader,
|
||||
supportVariables: values.supportVariables,
|
||||
},
|
||||
});
|
||||
addToast(intl.formatMessage(messages.webhooksettingssaved), {
|
||||
@@ -215,6 +229,7 @@ const NotificationsWebhook = () => {
|
||||
webhookUrl: values.webhookUrl,
|
||||
jsonPayload: JSON.stringify(values.jsonPayload),
|
||||
authHeader: values.authHeader,
|
||||
supportVariables: values.supportVariables ?? false,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -249,10 +264,59 @@ const NotificationsWebhook = () => {
|
||||
<Field type="checkbox" id="enabled" name="enabled" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="supportVariables" className="checkbox-label">
|
||||
<span className="mr-2">
|
||||
{intl.formatMessage(messages.supportVariables)}
|
||||
</span>
|
||||
<SettingsBadge badgeType="experimental" />
|
||||
<span className="label-tip">
|
||||
{intl.formatMessage(messages.supportVariablesTip)}
|
||||
</span>
|
||||
</label>
|
||||
<div className="form-input-area">
|
||||
<Field
|
||||
type="checkbox"
|
||||
id="supportVariables"
|
||||
name="supportVariables"
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setFieldValue('supportVariables', e.target.checked)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{values.supportVariables && (
|
||||
<div className="mt-2">
|
||||
<Link
|
||||
href="https://docs.jellyseerr.dev/using-jellyseerr/notifications/webhook#template-variables"
|
||||
passHref
|
||||
legacyBehavior
|
||||
>
|
||||
<Button
|
||||
as="a"
|
||||
buttonSize="sm"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<QuestionMarkCircleIcon />
|
||||
<span>
|
||||
{intl.formatMessage(messages.templatevariablehelp)}
|
||||
</span>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-row">
|
||||
<label htmlFor="webhookUrl" className="text-label">
|
||||
{intl.formatMessage(messages.webhookUrl)}
|
||||
<span className="label-required">*</span>
|
||||
{values.supportVariables && (
|
||||
<div className="label-tip">
|
||||
{intl.formatMessage(messages.webhookUrlTip, {
|
||||
testUrl: '/test',
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
<div className="form-input-area">
|
||||
<div className="form-input-field">
|
||||
@@ -312,7 +376,7 @@ const NotificationsWebhook = () => {
|
||||
<span>{intl.formatMessage(messages.resetPayload)}</span>
|
||||
</Button>
|
||||
<Link
|
||||
href="https://docs.overseerr.dev/using-overseerr/notifications/webhooks#template-variables"
|
||||
href="https://docs.jellyseerr.dev/using-jellyseerr/notifications/webhook#template-variables"
|
||||
passHref
|
||||
legacyBehavior
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user