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

@@ -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;