feat: support overwriting the default webhook data of deployers and notifiers

This commit is contained in:
Fu Diwei
2025-04-27 22:06:04 +08:00
parent e533f9407f
commit d33b8caf14
16 changed files with 320 additions and 75 deletions

View File

@@ -246,7 +246,12 @@ const AccessForm = forwardRef<AccessFormInstance, AccessFormProps>(({ className,
case ACCESS_PROVIDERS.WANGSU:
return <AccessFormWangsuConfig {...nestedFormProps} />;
case ACCESS_PROVIDERS.WEBHOOK:
return <AccessFormWebhookConfig {...nestedFormProps} />;
return (
<AccessFormWebhookConfig
usage={usage === "notification-only" ? "notification" : usage === "both-dns-hosting" ? "deployment" : "none"}
{...nestedFormProps}
/>
);
case ACCESS_PROVIDERS.WESTCN:
return <AccessFormWestcnConfig {...nestedFormProps} />;
case ACCESS_PROVIDERS.ZEROSSL:

View File

@@ -112,11 +112,11 @@ const AccessFormEmailConfig = ({ form: formInst, formName, disabled, initialValu
</Form.Item>
<Form.Item name="defaultSenderAddress" label={t("access.form.email_default_sender_address.label")} rules={[formRule]}>
<Input type="email" placeholder={t("access.form.email_default_sender_address.placeholder")} />
<Input type="email" allowClear placeholder={t("access.form.email_default_sender_address.placeholder")} />
</Form.Item>
<Form.Item name="defaultReceiverAddress" label={t("access.form.email_default_receiver_address.label")} rules={[formRule]}>
<Input type="email" placeholder={t("access.form.email_default_receiver_address.placeholder")} />
<Input type="email" allowClear placeholder={t("access.form.email_default_receiver_address.placeholder")} />
</Form.Item>
</Form>
);

View File

@@ -70,7 +70,7 @@ const AccessFormMattermostConfig = ({ form: formInst, formName, disabled, initia
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.mattermost_default_channel_id.tooltip") }}></span>}
>
<Input placeholder={t("access.form.mattermost_default_channel_id.placeholder")} />
<Input allowClear placeholder={t("access.form.mattermost_default_channel_id.placeholder")} />
</Form.Item>
</Form>
);

View File

@@ -72,7 +72,7 @@ const AccessFormTelegramConfig = ({ form: formInst, formName, disabled, initialV
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.telegram_default_chat_id.tooltip") }}></span>}
>
<Input type="number" placeholder={t("access.form.telegram_default_chat_id.placeholder")} />
<Input type="number" allowClear placeholder={t("access.form.telegram_default_chat_id.placeholder")} />
</Form.Item>
</Form>
);

View File

@@ -1,8 +1,9 @@
import { useTranslation } from "react-i18next";
import { Form, type FormInstance, Input, Select, Switch } from "antd";
import { Alert, Button, Form, type FormInstance, Input, Select, Switch } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import Show from "@/components/Show";
import { type AccessConfigForWebhook } from "@/domain/access";
type AccessFormWebhookConfigFieldValues = Nullish<AccessConfigForWebhook>;
@@ -12,6 +13,7 @@ export type AccessFormWebhookConfigProps = {
formName: string;
disabled?: boolean;
initialValues?: AccessFormWebhookConfigFieldValues;
usage?: "deployment" | "notification" | "none";
onValuesChange?: (values: AccessFormWebhookConfigFieldValues) => void;
};
@@ -21,10 +23,27 @@ const initFormModel = (): AccessFormWebhookConfigFieldValues => {
method: "POST",
headers: "Content-Type: application/json",
allowInsecureConnections: false,
defaultDataForDeployment: JSON.stringify(
{
name: "${DOMAINS}",
cert: "${CERTIFICATE}",
privkey: "${PRIVATE_KEY}",
},
null,
2
),
defaultDataForNotification: JSON.stringify(
{
subject: "${SUBJECT}",
message: "${MESSAGE}",
},
null,
2
),
};
};
const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormWebhookConfigProps) => {
const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialValues, usage, onValuesChange }: AccessFormWebhookConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -47,6 +66,34 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
return true;
}, t("access.form.webhook_headers.errmsg.invalid")),
allowInsecureConnections: z.boolean().nullish(),
defaultDataForDeployment: z
.string()
.nullish()
.refine((v) => {
if (usage && usage !== "deployment") return true;
if (!v) return true;
try {
const obj = JSON.parse(v);
return typeof obj === "object" && !Array.isArray(obj);
} catch {
return false;
}
}, t("access.form.webhook_default_data.errmsg.json_invalid")),
defaultDataForNotification: z
.string()
.nullish()
.refine((v) => {
if (usage && usage !== "notification") return true;
if (!v) return true;
try {
const obj = JSON.parse(v);
return typeof obj === "object" && !Array.isArray(obj);
} catch {
return false;
}
}, t("access.form.webhook_default_data.errmsg.json_invalid")),
});
const formRule = createSchemaFieldRule(formSchema);
@@ -57,6 +104,34 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
formInst.setFieldValue("headers", value);
};
const handleWebhookDataForDeploymentBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
try {
const json = JSON.stringify(JSON.parse(value), null, 2);
formInst.setFieldValue("defaultDataForDeployment", json);
} catch {
return;
}
};
const handleWebhookDataForNotificationBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
try {
const json = JSON.stringify(JSON.parse(value), null, 2);
formInst.setFieldValue("defaultDataForNotification", json);
} catch {
return;
}
};
const handlePresetDataForDeploymentClick = () => {
formInst.setFieldValue("defaultDataForDeployment", initFormModel().defaultDataForDeployment);
};
const handlePresetDataForNotificationClick = () => {
formInst.setFieldValue("defaultDataForNotification", initFormModel().defaultDataForNotification);
};
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onValuesChange?.(values);
};
@@ -90,6 +165,60 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
<Input.TextArea autoSize={{ minRows: 3, maxRows: 5 }} placeholder={t("access.form.webhook_headers.placeholder")} onBlur={handleWebhookHeadersBlur} />
</Form.Item>
<Show when={!usage || usage === "deployment"}>
<Form.Item className="mb-0">
<label className="mb-1 block">
<div className="flex w-full items-center justify-between gap-4">
<div className="max-w-full grow truncate">{t("access.form.webhook_default_data_for_deployment.label")}</div>
<div className="text-right">
<Button size="small" type="link" onClick={handlePresetDataForDeploymentClick}>
{t("access.form.webhook_default_data_preset.button")}
</Button>
</div>
</div>
</label>
<Form.Item name="defaultDataForDeployment" rules={[formRule]}>
<Input.TextArea
allowClear
autoSize={{ minRows: 3, maxRows: 10 }}
placeholder={t("access.form.webhook_default_data_for_deployment.placeholder")}
onBlur={handleWebhookDataForDeploymentBlur}
/>
</Form.Item>
</Form.Item>
<Form.Item>
<Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("access.form.webhook_default_data_for_deployment.guide") }}></span>} />
</Form.Item>
</Show>
<Show when={!usage || usage === "notification"}>
<Form.Item className="mb-0">
<label className="mb-1 block">
<div className="flex w-full items-center justify-between gap-4">
<div className="max-w-full grow truncate">{t("access.form.webhook_default_data_for_notification.label")}</div>
<div className="text-right">
<Button size="small" type="link" onClick={handlePresetDataForNotificationClick}>
{t("access.form.webhook_default_data_preset.button")}
</Button>
</div>
</div>
</label>
<Form.Item name="defaultDataForNotification" rules={[formRule]}>
<Input.TextArea
allowClear
autoSize={{ minRows: 3, maxRows: 10 }}
placeholder={t("access.form.webhook_default_data_for_notification.placeholder")}
onBlur={handleWebhookDataForNotificationBlur}
/>
</Form.Item>
</Form.Item>
<Form.Item>
<Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("access.form.webhook_default_data_for_notification.guide") }}></span>} />
</Form.Item>
</Show>
<Form.Item
name="allowInsecureConnections"
label={t("access.form.webhook_allow_insecure_conns.label")}

View File

@@ -452,7 +452,7 @@ const ApplyNodeConfigForm = forwardRef<ApplyNodeConfigFormInstance, ApplyNodeCon
<Form.Item name="caProviderAccessId" rules={[formRule]}>
<AccessSelect
filter={(record) => {
if (!!record.reserve && record.reserve !== "ca") return false;
if (record.reserve !== "ca") return false;
if (fieldCAProvider) return caProvidersMap.get(fieldCAProvider)?.provider === record.provider;
const provider = accessProvidersMap.get(record.provider);

View File

@@ -1,5 +1,5 @@
import { useTranslation } from "react-i18next";
import { Alert, Button, Form, type FormInstance, Input } from "antd";
import { Alert, Form, type FormInstance, Input } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
@@ -16,31 +16,26 @@ export type DeployNodeConfigFormWebhookConfigProps = {
};
const initFormModel = (): DeployNodeConfigFormWebhookConfigFieldValues => {
return {
webhookData: JSON.stringify(
{
name: "${DOMAINS}",
cert: "${CERTIFICATE}",
privkey: "${PRIVATE_KEY}",
},
null,
2
),
};
return {};
};
const DeployNodeConfigFormWebhookConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: DeployNodeConfigFormWebhookConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
webhookData: z.string({ message: t("workflow_node.deploy.form.webhook_data.placeholder") }).refine((v) => {
try {
JSON.parse(v);
return true;
} catch {
return false;
}
}, t("workflow_node.deploy.form.webhook_data.errmsg.json_invalid")),
webhookData: z
.string()
.nullish()
.refine((v) => {
if (!v) return true;
try {
const obj = JSON.parse(v);
return typeof obj === "object" && !Array.isArray(obj);
} catch {
return false;
}
}, t("workflow_node.deploy.form.webhook_data.errmsg.json_invalid")),
});
const formRule = createSchemaFieldRule(formSchema);
@@ -54,10 +49,6 @@ const DeployNodeConfigFormWebhookConfig = ({ form: formInst, formName, disabled,
}
};
const handlePresetDataClick = () => {
formInst.setFieldValue("webhookData", initFormModel().webhookData);
};
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onValuesChange?.(values);
};
@@ -71,24 +62,18 @@ const DeployNodeConfigFormWebhookConfig = ({ form: formInst, formName, disabled,
name={formName}
onValuesChange={handleFormChange}
>
<Form.Item className="mb-0">
<label className="mb-1 block">
<div className="flex w-full items-center justify-between gap-4">
<div className="max-w-full grow truncate">{t("workflow_node.deploy.form.webhook_data.label")}</div>
<div className="text-right">
<Button size="small" type="link" onClick={handlePresetDataClick}>
{t("workflow_node.deploy.form.webhook_data_preset.button")}
</Button>
</div>
</div>
</label>
<Form.Item name="webhookData" rules={[formRule]}>
<Input.TextArea
autoSize={{ minRows: 3, maxRows: 10 }}
placeholder={t("workflow_node.deploy.form.webhook_data.placeholder")}
onBlur={handleWebhookDataBlur}
/>
</Form.Item>
<Form.Item
name="webhookData"
label={t("workflow_node.deploy.form.webhook_data.label")}
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.webhook_data.tooltip") }}></span>}
>
<Input.TextArea
allowClear
autoSize={{ minRows: 3, maxRows: 10 }}
placeholder={t("workflow_node.deploy.form.webhook_data.placeholder")}
onBlur={handleWebhookDataBlur}
/>
</Form.Item>
<Form.Item>

View File

@@ -2,13 +2,14 @@ import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } f
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { PlusOutlined as PlusOutlinedIcon, RightOutlined as RightOutlinedIcon } from "@ant-design/icons";
import { Button, Form, type FormInstance, Input, Select } from "antd";
import { Button, Divider, Form, type FormInstance, Input, Select, Typography } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import AccessEditModal from "@/components/access/AccessEditModal";
import AccessSelect from "@/components/access/AccessSelect";
import NotificationProviderSelect from "@/components/provider/NotificationProviderSelect";
import Show from "@/components/Show";
import { ACCESS_USAGES, NOTIFICATION_PROVIDERS, accessProvidersMap, notificationProvidersMap } from "@/domain/provider";
import { notifyChannelsMap } from "@/domain/settings";
import { type WorkflowNodeConfigForNotify } from "@/domain/workflow";
@@ -19,6 +20,7 @@ import { useNotifyChannelsStore } from "@/stores/notify";
import NotifyNodeConfigFormEmailConfig from "./NotifyNodeConfigFormEmailConfig";
import NotifyNodeConfigFormMattermostConfig from "./NotifyNodeConfigFormMattermostConfig";
import NotifyNodeConfigFormTelegramConfig from "./NotifyNodeConfigFormTelegramConfig";
import NotifyNodeConfigFormWebhookConfig from "./NotifyNodeConfigFormWebhookConfig";
type NotifyNodeConfigFormFieldValues = Partial<WorkflowNodeConfigForNotify>;
@@ -114,6 +116,8 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
return <NotifyNodeConfigFormMattermostConfig {...nestedFormProps} />;
case NOTIFICATION_PROVIDERS.TELEGRAM:
return <NotifyNodeConfigFormTelegramConfig {...nestedFormProps} />;
case NOTIFICATION_PROVIDERS.WEBHOOK:
return <NotifyNodeConfigFormWebhookConfig {...nestedFormProps} />;
}
}, [disabled, initialValues?.providerConfig, fieldProvider, nestedFormInst, nestedFormName]);
@@ -250,7 +254,7 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
<Form.Item name="providerAccessId" rules={[formRule]}>
<AccessSelect
filter={(record) => {
if (!!record.reserve && record.reserve !== "notification") return false;
if (record.reserve !== "notification") return false;
const provider = accessProvidersMap.get(record.provider);
return !!provider?.usages?.includes(ACCESS_USAGES.NOTIFICATION);
@@ -261,7 +265,15 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
</Form.Item>
</Form.Item>
{nestedFormEl}
<Show when={!!nestedFormEl}>
<Divider className="my-1">
<Typography.Text className="text-xs font-normal" type="secondary">
{t("workflow_node.notify.form.params_config.label")}
</Typography.Text>
</Divider>
{nestedFormEl}
</Show>
</Form>
);
}

View File

@@ -62,7 +62,7 @@ const NotifyNodeConfigFormEmailConfig = ({ form: formInst, formName, disabled, i
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.notify.form.email_sender_address.tooltip") }}></span>}
>
<Input type="email" placeholder={t("workflow_node.notify.form.email_sender_address.placeholder")} />
<Input type="email" allowClear placeholder={t("workflow_node.notify.form.email_sender_address.placeholder")} />
</Form.Item>
<Form.Item
@@ -71,7 +71,7 @@ const NotifyNodeConfigFormEmailConfig = ({ form: formInst, formName, disabled, i
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.notify.form.email_receiver_address.tooltip") }}></span>}
>
<Input type="email" placeholder={t("workflow_node.notify.form.email_receiver_address.placeholder")} />
<Input type="email" allowClear placeholder={t("workflow_node.notify.form.email_receiver_address.placeholder")} />
</Form.Item>
</Form>
);

View File

@@ -52,7 +52,7 @@ const NotifyNodeConfigFormMattermostConfig = ({
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.notify.form.mattermost_channel_id.tooltip") }}></span>}
>
<Input placeholder={t("workflow_node.notify.form.mattermost_channel_id.placeholder")} />
<Input allowClear placeholder={t("workflow_node.notify.form.mattermost_channel_id.placeholder")} />
</Form.Item>
</Form>
);

View File

@@ -57,7 +57,7 @@ const NotifyNodeConfigFormTelegramConfig = ({ form: formInst, formName, disabled
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.notify.form.telegram_chat_id.tooltip") }}></span>}
>
<Input type="number" placeholder={t("workflow_node.notify.form.telegram_chat_id.placeholder")} />
<Input type="number" allowClear placeholder={t("workflow_node.notify.form.telegram_chat_id.placeholder")} />
</Form.Item>
</Form>
);

View File

@@ -0,0 +1,86 @@
import { useTranslation } from "react-i18next";
import { Alert, Form, type FormInstance, Input } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
type NotifyNodeConfigFormWebhookConfigFieldValues = Nullish<{
webhookData: string;
}>;
export type NotifyNodeConfigFormWebhookConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
initialValues?: NotifyNodeConfigFormWebhookConfigFieldValues;
onValuesChange?: (values: NotifyNodeConfigFormWebhookConfigFieldValues) => void;
};
const initFormModel = (): NotifyNodeConfigFormWebhookConfigFieldValues => {
return {};
};
const NotifyNodeConfigFormWebhookConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: NotifyNodeConfigFormWebhookConfigProps) => {
const { t } = useTranslation();
const formSchema = z.object({
webhookData: z
.string()
.nullish()
.refine((v) => {
if (!v) return true;
try {
const obj = JSON.parse(v);
return typeof obj === "object" && !Array.isArray(obj);
} catch {
return false;
}
}, t("workflow_node.notify.form.webhook_data.errmsg.json_invalid")),
});
const formRule = createSchemaFieldRule(formSchema);
const handleWebhookDataBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
try {
const json = JSON.stringify(JSON.parse(value), null, 2);
formInst.setFieldValue("webhookData", json);
} catch {
return;
}
};
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onValuesChange?.(values);
};
return (
<Form
form={formInst}
disabled={disabled}
initialValues={initialValues ?? initFormModel()}
layout="vertical"
name={formName}
onValuesChange={handleFormChange}
>
<Form.Item
name="webhookData"
label={t("workflow_node.notify.form.webhook_data.label")}
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.notify.form.webhook_data.tooltip") }}></span>}
>
<Input.TextArea
allowClear
autoSize={{ minRows: 3, maxRows: 10 }}
placeholder={t("workflow_node.notify.form.webhook_data.placeholder")}
onBlur={handleWebhookDataBlur}
/>
</Form.Item>
<Form.Item>
<Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.notify.form.webhook_data.guide") }}></span>} />
</Form.Item>
</Form>
);
};
export default NotifyNodeConfigFormWebhookConfig;