feat: support template variables in webhook deployment

ui/src/components/workflow/node/DeployNodeFormWebhookFields.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { Form, Input } from "antd";
+import { Alert, Button, Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
@@ -14,11 +14,23 @@ const DeployNodeFormWebhookFields = () => {
       } catch {
         return false;
       }
-    }, t("workflow_node.deploy.form.webhook_data.placeholder")),
+    }, t("workflow_node.deploy.form.webhook_data.errmsg.json_invalid")),
   });
   const formRule = createSchemaFieldRule(formSchema);
   const formInst = Form.useFormInstance();
 
+  const initialValues: Partial<z.infer<typeof formSchema>> = {
+    webhookData: JSON.stringify(
+      {
+        name: "${DOMAINS}",
+        cert: "${CERTIFICATE}",
+        privkey: "${PRIVATE_KEY}",
+      },
+      null,
+      2
+    ),
+  };
+
   const handleWebhookDataBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
     try {
@@ -29,19 +41,34 @@ const DeployNodeFormWebhookFields = () => {
     }
   };
 
+  const handlePresetDataClick = () => {
+    formInst.setFieldValue("webhookData", initialValues.webhookData);
+  };
+
   return (
     <>
-      <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
-          autoSize={{ minRows: 3, maxRows: 10 }}
-          placeholder={t("workflow_node.deploy.form.webhook_data.placeholder")}
-          onBlur={handleWebhookDataBlur}
-        />
+      <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]} initialValue={initialValues.webhookData}>
+          <Input.TextArea
+            autoSize={{ minRows: 3, maxRows: 10 }}
+            placeholder={t("workflow_node.deploy.form.webhook_data.placeholder")}
+            onBlur={handleWebhookDataBlur}
+          />
+        </Form.Item>
+      </Form.Item>
+
+      <Form.Item>
+        <Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.webhook_data.guide") }}></span>} />
       </Form.Item>
     </>
   );

ui/src/i18n/locales/en/nls.settings.json

@@ -19,10 +19,10 @@
   "settings.notification.template.card.title": "Template",
   "settings.notification.template.form.subject.label": "Subject",
   "settings.notification.template.form.subject.placeholder": "Please enter notification subject",
-  "settings.notification.template.form.subject.extra": "Optional variables (${COUNT}: number of expiring soon)",
+  "settings.notification.template.form.subject.extra": "Supported variables (${COUNT}: number of expiring soon)",
   "settings.notification.template.form.message.label": "Message",
   "settings.notification.template.form.message.placeholder": "Please enter notification message",
-  "settings.notification.template.form.message.extra": "Optional variables (${COUNT}: number of expiring soon. ${DOMAINS}: Domain list)",
+  "settings.notification.template.form.message.extra": "Supported variables (${COUNT}: number of expiring soon. ${DOMAINS}: Domain list)",
   "settings.notification.channels.card.title": "Channels",
   "settings.notification.channel.enabled.on": "On",
   "settings.notification.channel.enabled.off": "Off",

ui/src/i18n/locales/en/nls.workflow.nodes.json

@@ -279,6 +279,9 @@
   "workflow_node.deploy.form.volcengine_live_domain.tooltip": "For more information, see <a href=\"https://console.volcengine.com/live\" target=\"_blank\">https://console.volcengine.com/live</a>",
   "workflow_node.deploy.form.webhook_data.label": "Webhook data (JSON format)",
   "workflow_node.deploy.form.webhook_data.placeholder": "Please enter Webhook data",
+  "workflow_node.deploy.form.webhook_data.guide": "Tips: The Webhook data should be a key-value pair in JSON format. The values in JSON support template variables, which will be replaced by actual values when sent to the Webhook URL. <br><br>Supported variables: <br><strong>${DOMAIN}</strong>: The primary domain of the certificate (<i>CommonName</i>).<br><strong>${DOMAINS}</strong>: The domain list of the certificate (<i>SubjectAltNames</i>).<br><strong>${CERTIFICATE}</strong>: The PEM format content of the certificate file.<br><strong>${PRIVATE_KEY}</strong>: The PEM format content of the private key file.",
+  "workflow_node.deploy.form.webhook_data.errmsg.json_invalid": "Please enter a valiod JSON string",
+  "workflow_node.deploy.form.webhook_data_preset.button": "Use preset template",
 
   "workflow_node.notify.label": "Notification",
   "workflow_node.notify.form.subject.label": "Subject",

ui/src/i18n/locales/zh/nls.settings.json

@@ -19,10 +19,10 @@
   "settings.notification.template.card.title": "通知模板",
   "settings.notification.template.form.subject.label": "通知主题",
   "settings.notification.template.form.subject.placeholder": "请输入通知主题",
-  "settings.notification.template.form.subject.extra": "可选的变量（${COUNT}: 即将过期张数）",
+  "settings.notification.template.form.subject.extra": "支持的变量（${COUNT}: 即将过期张数）",
   "settings.notification.template.form.message.label": "通知内容",
   "settings.notification.template.form.message.placeholder": "请输入通知内容",
-  "settings.notification.template.form.message.extra": "可选的变量（${COUNT}: 即将过期张数；${DOMAINS}: 域名列表）",
+  "settings.notification.template.form.message.extra": "支持的变量（${COUNT}: 即将过期张数；${DOMAINS}: 域名列表）",
   "settings.notification.channels.card.title": "通知渠道",
   "settings.notification.channel.enabled.on": "启用",
   "settings.notification.channel.enabled.off": "未启用",

ui/src/i18n/locales/zh/nls.workflow.nodes.json

@@ -279,6 +279,9 @@
   "workflow_node.deploy.form.volcengine_live_domain.tooltip": "这是什么？请参阅 <a href=\"https://console.volcengine.com/live\" target=\"_blank\">https://console.volcengine.com/live</a>",
   "workflow_node.deploy.form.webhook_data.label": "Webhook 回调数据（JSON 格式）",
   "workflow_node.deploy.form.webhook_data.placeholder": "请输入 Webhook 回调数据",
+  "workflow_node.deploy.form.webhook_data.guide": "小贴士：回调数据是一个 JSON 格式的键值对。其中值支持模板变量，将在被发送到指定的 Webhook URL 时被替换为实际值；其他内容将保持原样。<br><br>支持的变量：<br><strong>${DOMAIN}</strong>：证书的主域名（即 <i>CommonName</i>）<br><strong>${DOMAINS}</strong>：证书的多域名列表（即 <i>SubjectAltNames</i>）<br><strong>${CERTIFICATE}</strong>：证书文件 PEM 格式内容<br><strong>${PRIVATE_KEY}</strong>：私钥文件 PEM 格式内容",
+  "workflow_node.deploy.form.webhook_data.errmsg.json_invalid": "请输入有效的 JSON 格式字符串",
+  "workflow_node.deploy.form.webhook_data_preset.button": "使用预设模板",
 
   "workflow_node.notify.label": "通知",
   "workflow_node.notify.form.subject.label": "通知主题",