mirror of
https://github.com/usual2970/certimate.git
synced 2025-06-11 06:59:51 +00:00
feat(ui): new WorkflowNotifyNodeForm using antd
This commit is contained in:
parent
4d0f7c2e02
commit
6bd3b4998e
@ -73,8 +73,8 @@ func buildMsg(records []domain.Certificate) *domain.NotifyMessage {
|
|||||||
json.Unmarshal([]byte(setting.Content), &templates)
|
json.Unmarshal([]byte(setting.Content), &templates)
|
||||||
|
|
||||||
if templates != nil && len(templates.NotifyTemplates) > 0 {
|
if templates != nil && len(templates.NotifyTemplates) > 0 {
|
||||||
subject = templates.NotifyTemplates[0].Title
|
subject = templates.NotifyTemplates[0].Subject
|
||||||
message = templates.NotifyTemplates[0].Content
|
message = templates.NotifyTemplates[0].Message
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,11 +35,11 @@ type NotifyTemplates struct {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type NotifyTemplate struct {
|
type NotifyTemplate struct {
|
||||||
Title string `json:"title"`
|
Subject string `json:"subject"`
|
||||||
Content string `json:"content"`
|
Message string `json:"message"`
|
||||||
}
|
}
|
||||||
|
|
||||||
type NotifyMessage struct {
|
type NotifyMessage struct {
|
||||||
Subject string
|
Subject string `json:"subject"`
|
||||||
Message string
|
Message string `json:"message"`
|
||||||
}
|
}
|
||||||
|
@ -41,8 +41,8 @@ func (n *notifyNode) Run(ctx context.Context) error {
|
|||||||
return err
|
return err
|
||||||
}
|
}
|
||||||
|
|
||||||
if err := notify.SendToChannel(n.node.GetConfigString("title"),
|
if err := notify.SendToChannel(n.node.GetConfigString("subject"),
|
||||||
n.node.GetConfigString("content"),
|
n.node.GetConfigString("message"),
|
||||||
n.node.GetConfigString("channel"),
|
n.node.GetConfigString("channel"),
|
||||||
channelConfig,
|
channelConfig,
|
||||||
); err != nil {
|
); err != nil {
|
||||||
|
@ -53,7 +53,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, model, onMod
|
|||||||
|
|
||||||
const handleKubeFileChange: UploadProps["onChange"] = async ({ file }) => {
|
const handleKubeFileChange: UploadProps["onChange"] = async ({ file }) => {
|
||||||
if (file && file.status !== "removed") {
|
if (file && file.status !== "removed") {
|
||||||
formInst.setFieldValue("kubeConfig", (await readFileContent(file.originFileObj ?? (file as unknown as File))).trim());
|
formInst.setFieldValue("kubeConfig", await readFileContent(file.originFileObj ?? (file as unknown as File)));
|
||||||
setKubeFileList([file]);
|
setKubeFileList([file]);
|
||||||
} else {
|
} else {
|
||||||
formInst.setFieldValue("kubeConfig", "");
|
formInst.setFieldValue("kubeConfig", "");
|
||||||
|
@ -88,7 +88,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
|
|||||||
|
|
||||||
const handleKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
|
const handleKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
|
||||||
if (file && file.status !== "removed") {
|
if (file && file.status !== "removed") {
|
||||||
formInst.setFieldValue("key", (await readFileContent(file.originFileObj ?? (file as unknown as File))).trim());
|
formInst.setFieldValue("key", await readFileContent(file.originFileObj ?? (file as unknown as File)));
|
||||||
setKeyFileList([file]);
|
setKeyFileList([file]);
|
||||||
} else {
|
} else {
|
||||||
formInst.setFieldValue("key", "");
|
formInst.setFieldValue("key", "");
|
||||||
|
@ -1,174 +0,0 @@
|
|||||||
import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { z } from "zod";
|
|
||||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
|
|
||||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "../ui/select";
|
|
||||||
import { Input } from "../ui/input";
|
|
||||||
import { useWorkflowStore } from "@/stores/workflow";
|
|
||||||
import { useZustandShallowSelector } from "@/hooks";
|
|
||||||
import { usePanel } from "./PanelProvider";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Button } from "../ui/button";
|
|
||||||
import { useNotifyChannelStore } from "@/stores/notify";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { notifyChannelsMap } from "@/domain/settings";
|
|
||||||
import { SelectValue } from "@radix-ui/react-select";
|
|
||||||
import { Textarea } from "../ui/textarea";
|
|
||||||
import { RefreshCw, Settings } from "lucide-react";
|
|
||||||
|
|
||||||
type NotifyFormProps = {
|
|
||||||
data: WorkflowNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
type ChannelName = {
|
|
||||||
key: string;
|
|
||||||
label: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const i18nPrefix = "workflow.node.notify.form";
|
|
||||||
const NotifyForm = ({ data }: NotifyFormProps) => {
|
|
||||||
const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
|
|
||||||
const { hidePanel } = usePanel();
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const { channels: supportedChannels, fetchChannels } = useNotifyChannelStore();
|
|
||||||
|
|
||||||
const [channels, setChannels] = useState<ChannelName[]>([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchChannels();
|
|
||||||
}, [fetchChannels]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const rs: ChannelName[] = [];
|
|
||||||
for (const channel of notifyChannelsMap.values()) {
|
|
||||||
if (supportedChannels[channel.type]?.enabled) {
|
|
||||||
rs.push({ key: channel.type, label: channel.name });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setChannels(rs);
|
|
||||||
}, [supportedChannels]);
|
|
||||||
|
|
||||||
const formSchema = z.object({
|
|
||||||
channel: z.string(),
|
|
||||||
title: z.string().min(1),
|
|
||||||
content: z.string().min(1),
|
|
||||||
});
|
|
||||||
|
|
||||||
let config: WorkflowNodeConfig = {
|
|
||||||
channel: "",
|
|
||||||
title: "",
|
|
||||||
content: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
if (data) config = data.config ?? config;
|
|
||||||
|
|
||||||
const form = useForm<z.infer<typeof formSchema>>({
|
|
||||||
resolver: zodResolver(formSchema),
|
|
||||||
defaultValues: {
|
|
||||||
channel: config.channel as string,
|
|
||||||
title: config.title as string,
|
|
||||||
content: config.content as string,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = (config: z.infer<typeof formSchema>) => {
|
|
||||||
updateNode({ ...data, config, validated: true });
|
|
||||||
hidePanel();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Form {...form}>
|
|
||||||
<form
|
|
||||||
onSubmit={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
form.handleSubmit(onSubmit)(e);
|
|
||||||
}}
|
|
||||||
className="space-y-8 dark:text-stone-200"
|
|
||||||
>
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="channel"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel className="flex justify-between items-center">
|
|
||||||
<div className="flex space-x-2 items-center">
|
|
||||||
<div>{t(`${i18nPrefix}.channel.label`)}</div>
|
|
||||||
<RefreshCw size={16} className="cursor-pointer" onClick={() => fetchChannels()} />
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="#/settings/notification"
|
|
||||||
target="_blank"
|
|
||||||
className="flex justify-between items-center space-x-1 font-normal text-primary hover:underline cursor-pointer"
|
|
||||||
>
|
|
||||||
<Settings size={16} /> <div>{t(`${i18nPrefix}.settingChannel.label`)}</div>
|
|
||||||
</a>
|
|
||||||
</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Select
|
|
||||||
{...field}
|
|
||||||
value={field.value}
|
|
||||||
onValueChange={(value) => {
|
|
||||||
form.setValue("channel", value);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder={t(`${i18nPrefix}.channel.placeholder`)} />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectGroup>
|
|
||||||
{channels.map((item) => (
|
|
||||||
<SelectItem key={item.key} value={item.key}>
|
|
||||||
<div>{t(item.label)}</div>
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectGroup>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="title"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>{t(`${i18nPrefix}.title.label`)}</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder={t(`${i18nPrefix}.title.placeholder`)} {...field} />
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="content"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>{t(`${i18nPrefix}.content.label`)}</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Textarea placeholder={t(`${i18nPrefix}.content.placeholder`)} {...field} />
|
|
||||||
</FormControl>
|
|
||||||
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button type="submit">{t("common.button.save")}</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NotifyForm;
|
|
@ -2,7 +2,7 @@ import { WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
|
|||||||
import StartNodeForm from "./node/StartNodeForm";
|
import StartNodeForm from "./node/StartNodeForm";
|
||||||
import DeployPanelBody from "./DeployPanelBody";
|
import DeployPanelBody from "./DeployPanelBody";
|
||||||
import ApplyForm from "./ApplyForm";
|
import ApplyForm from "./ApplyForm";
|
||||||
import NotifyForm from "./NotifyForm";
|
import NotifyNodeForm from "./node/NotifyNodeForm";
|
||||||
|
|
||||||
type PanelBodyProps = {
|
type PanelBodyProps = {
|
||||||
data: WorkflowNode;
|
data: WorkflowNode;
|
||||||
@ -17,7 +17,7 @@ const PanelBody = ({ data }: PanelBodyProps) => {
|
|||||||
case WorkflowNodeType.Deploy:
|
case WorkflowNodeType.Deploy:
|
||||||
return <DeployPanelBody data={data} />;
|
return <DeployPanelBody data={data} />;
|
||||||
case WorkflowNodeType.Notify:
|
case WorkflowNodeType.Notify:
|
||||||
return <NotifyForm data={data} />;
|
return <NotifyNodeForm data={data} />;
|
||||||
case WorkflowNodeType.Branch:
|
case WorkflowNodeType.Branch:
|
||||||
return <div>分支节点</div>;
|
return <div>分支节点</div>;
|
||||||
case WorkflowNodeType.Condition:
|
case WorkflowNodeType.Condition:
|
||||||
|
118
ui/src/components/workflow/node/NotifyNodeForm.tsx
Normal file
118
ui/src/components/workflow/node/NotifyNodeForm.tsx
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { useDeepCompareEffect } from "ahooks";
|
||||||
|
import { Button, Form, Input, Select } from "antd";
|
||||||
|
import { createSchemaFieldRule } from "antd-zod";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { ChevronRight as ChevronRightIcon } from "lucide-react";
|
||||||
|
|
||||||
|
import { usePanel } from "../PanelProvider";
|
||||||
|
import { useZustandShallowSelector } from "@/hooks";
|
||||||
|
import { notifyChannelsMap } from "@/domain/settings";
|
||||||
|
import { type WorkflowNode, type WorkflowNodeConfig } from "@/domain/workflow";
|
||||||
|
import { useNotifyChannelStore } from "@/stores/notify";
|
||||||
|
import { useWorkflowStore } from "@/stores/workflow";
|
||||||
|
|
||||||
|
export type NotifyNodeFormProps = {
|
||||||
|
data: WorkflowNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
const initFormModel = () => {
|
||||||
|
return {
|
||||||
|
subject: "",
|
||||||
|
message: "",
|
||||||
|
} as WorkflowNodeConfig;
|
||||||
|
};
|
||||||
|
|
||||||
|
const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
|
||||||
|
const { hidePanel } = usePanel();
|
||||||
|
|
||||||
|
const { channels, loadedAtOnce: channelsLoadedAtOnce, fetchChannels } = useNotifyChannelStore();
|
||||||
|
useEffect(() => {
|
||||||
|
fetchChannels();
|
||||||
|
}, [fetchChannels]);
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
subject: z
|
||||||
|
.string({ message: t("workflow.nodes.notify.form.subject.placeholder") })
|
||||||
|
.min(1, t("workflow.nodes.notify.form.subject.placeholder"))
|
||||||
|
.max(1000, t("common.errmsg.string_max", { max: 1000 })),
|
||||||
|
message: z
|
||||||
|
.string({ message: t("workflow.nodes.notify.form.message.placeholder") })
|
||||||
|
.min(1, t("workflow.nodes.notify.form.message.placeholder"))
|
||||||
|
.max(1000, t("common.errmsg.string_max", { max: 1000 })),
|
||||||
|
channel: z.string({ message: t("workflow.nodes.notify.form.channel.placeholder") }).min(1, t("workflow.nodes.notify.form.channel.placeholder")),
|
||||||
|
});
|
||||||
|
const formRule = createSchemaFieldRule(formSchema);
|
||||||
|
const [formInst] = Form.useForm<z.infer<typeof formSchema>>();
|
||||||
|
const [formPending, setFormPending] = useState(false);
|
||||||
|
|
||||||
|
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(
|
||||||
|
(data?.config as Partial<z.infer<typeof formSchema>>) ?? initFormModel()
|
||||||
|
);
|
||||||
|
useDeepCompareEffect(() => {
|
||||||
|
setInitialValues((data?.config as Partial<z.infer<typeof formSchema>>) ?? initFormModel());
|
||||||
|
}, [data?.config]);
|
||||||
|
|
||||||
|
const handleFormFinish = async (values: z.infer<typeof formSchema>) => {
|
||||||
|
setFormPending(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await updateNode({ ...data, config: { ...values }, validated: true });
|
||||||
|
|
||||||
|
hidePanel();
|
||||||
|
} finally {
|
||||||
|
setFormPending(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form form={formInst} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
|
||||||
|
<Form.Item name="subject" label={t("workflow.nodes.notify.form.subject.label")} rules={[formRule]}>
|
||||||
|
<Input placeholder={t("workflow.nodes.notify.form.subject.placeholder")} />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item name="message" label={t("workflow.nodes.notify.form.message.label")} rules={[formRule]}>
|
||||||
|
<Input.TextArea autoSize={{ minRows: 3, maxRows: 5 }} placeholder={t("workflow.nodes.notify.form.message.placeholder")} />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item name="channel" rules={[formRule]}>
|
||||||
|
<label className="block mb-1">
|
||||||
|
<div className="flex items-center justify-between gap-4 w-full overflow-hidden">
|
||||||
|
<div className="flex-grow max-w-full truncate">{t("workflow.nodes.notify.form.channel.label")}</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<Link className="ant-typography" to="/settings/notification" target="_blank">
|
||||||
|
<Button className="p-0" type="link">
|
||||||
|
{t("workflow.nodes.notify.form.channel.button")}
|
||||||
|
<ChevronRightIcon size={14} />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<Select
|
||||||
|
loading={!channelsLoadedAtOnce}
|
||||||
|
options={Object.entries(channels)
|
||||||
|
.filter(([_, v]) => v?.enabled)
|
||||||
|
.map(([k, _]) => ({
|
||||||
|
label: t(notifyChannelsMap.get(k)?.name ?? k),
|
||||||
|
value: k,
|
||||||
|
}))}
|
||||||
|
placeholder={t("workflow.nodes.notify.form.channel.placeholder")}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit" loading={formPending}>
|
||||||
|
{t("common.button.save")}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NotifyNodeForm;
|
@ -48,7 +48,7 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
const formRule = createSchemaFieldRule(formSchema);
|
const formRule = createSchemaFieldRule(formSchema);
|
||||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
const [formInst] = Form.useForm<z.infer<typeof formSchema>>();
|
||||||
const [formPending, setFormPending] = useState(false);
|
const [formPending, setFormPending] = useState(false);
|
||||||
|
|
||||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(
|
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(
|
||||||
@ -69,7 +69,7 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
|
|||||||
setTriggerType(value);
|
setTriggerType(value);
|
||||||
|
|
||||||
if (value === "auto") {
|
if (value === "auto") {
|
||||||
form.setFieldValue("crontab", form.getFieldValue("crontab") || initFormModel().crontab);
|
formInst.setFieldValue("crontab", formInst.getFieldValue("crontab") || initFormModel().crontab);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -90,7 +90,7 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form form={form} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
|
<Form form={formInst} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
name="executionMethod"
|
name="executionMethod"
|
||||||
label={t("workflow.nodes.start.form.trigger.label")}
|
label={t("workflow.nodes.start.form.trigger.label")}
|
||||||
|
@ -40,6 +40,13 @@
|
|||||||
"workflow.nodes.start.form.trigger_cron.tooltip": "Time zone is based on the server.",
|
"workflow.nodes.start.form.trigger_cron.tooltip": "Time zone is based on the server.",
|
||||||
"workflow.nodes.start.form.trigger_cron.extra": "Expected execution time for the last 5 times:",
|
"workflow.nodes.start.form.trigger_cron.extra": "Expected execution time for the last 5 times:",
|
||||||
"workflow.nodes.start.form.trigger_cron_alert.content": "Tips: If you have multiple workflows, it is recommended to set them to run at multiple times of the day instead of always running at specific times.<br><br>Reference links:<br>1. <a href=\"https://letsencrypt.org/docs/rate-limits/\" target=\"_blank\">Let’s Encrypt rate limits</a><br>2. <a href=\"https://letsencrypt.org/docs/faq/#why-should-my-let-s-encrypt-acme-client-run-at-a-random-time\" target=\"_blank\">Why should my Let’s Encrypt (ACME) client run at a random time?</a>",
|
"workflow.nodes.start.form.trigger_cron_alert.content": "Tips: If you have multiple workflows, it is recommended to set them to run at multiple times of the day instead of always running at specific times.<br><br>Reference links:<br>1. <a href=\"https://letsencrypt.org/docs/rate-limits/\" target=\"_blank\">Let’s Encrypt rate limits</a><br>2. <a href=\"https://letsencrypt.org/docs/faq/#why-should-my-let-s-encrypt-acme-client-run-at-a-random-time\" target=\"_blank\">Why should my Let’s Encrypt (ACME) client run at a random time?</a>",
|
||||||
|
"workflow.nodes.notify.form.subject.label": "Subject",
|
||||||
|
"workflow.nodes.notify.form.subject.placeholder": "Please enter subject",
|
||||||
|
"workflow.nodes.notify.form.message.label": "Message",
|
||||||
|
"workflow.nodes.notify.form.message.placeholder": "Please enter message",
|
||||||
|
"workflow.nodes.notify.form.channel.label": "Channel",
|
||||||
|
"workflow.nodes.notify.form.channel.placeholder": "Please select channel",
|
||||||
|
"workflow.nodes.notify.form.channel.button": "Configure",
|
||||||
|
|
||||||
"workflow_run.props.id": "ID",
|
"workflow_run.props.id": "ID",
|
||||||
"workflow_run.props.status": "Status",
|
"workflow_run.props.status": "Status",
|
||||||
@ -70,13 +77,5 @@
|
|||||||
"workflow.node.setting.label": "Setting Node",
|
"workflow.node.setting.label": "Setting Node",
|
||||||
"workflow.node.delete.label": "Delete Node",
|
"workflow.node.delete.label": "Delete Node",
|
||||||
"workflow.node.addBranch.label": "Add Branch",
|
"workflow.node.addBranch.label": "Add Branch",
|
||||||
"workflow.node.selectNodeType.label": "Select Node Type",
|
"workflow.node.selectNodeType.label": "Select Node Type"
|
||||||
|
|
||||||
"workflow.node.notify.form.title.label": "Title",
|
|
||||||
"workflow.node.notify.form.title.placeholder": "Please enter title",
|
|
||||||
"workflow.node.notify.form.content.label": "Content",
|
|
||||||
"workflow.node.notify.form.content.placeholder": "Please enter content",
|
|
||||||
"workflow.node.notify.form.channel.label": "Channel",
|
|
||||||
"workflow.node.notify.form.channel.placeholder": "Please select channel",
|
|
||||||
"workflow.node.notify.form.settingChannel.label": "Configure Channels"
|
|
||||||
}
|
}
|
||||||
|
@ -40,6 +40,13 @@
|
|||||||
"workflow.nodes.start.form.trigger_cron.tooltip": "时区以服务器设置为准。",
|
"workflow.nodes.start.form.trigger_cron.tooltip": "时区以服务器设置为准。",
|
||||||
"workflow.nodes.start.form.trigger_cron.extra": "预计最近 5 次执行时间:",
|
"workflow.nodes.start.form.trigger_cron.extra": "预计最近 5 次执行时间:",
|
||||||
"workflow.nodes.start.form.trigger_cron_alert.content": "小贴士:如果你有多个工作流,建议将它们设置为在一天中的多个时间段运行,而非总是在相同的特定时间。<br><br>参考链接:<br>1. <a href=\"https://letsencrypt.org/zh-cn/docs/rate-limits/\" target=\"_blank\">Let’s Encrypt 速率限制</a><br>2. <a href=\"https://letsencrypt.org/zh-cn/docs/faq/#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E7%9A%84-let-s-encrypt-acme-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%90%AF%E5%8A%A8%E6%97%B6%E9%97%B4%E5%BA%94%E5%BD%93%E9%9A%8F%E6%9C%BA\" target=\"_blank\">为什么我的 Let’s Encrypt (ACME) 客户端启动时间应当随机?</a>",
|
"workflow.nodes.start.form.trigger_cron_alert.content": "小贴士:如果你有多个工作流,建议将它们设置为在一天中的多个时间段运行,而非总是在相同的特定时间。<br><br>参考链接:<br>1. <a href=\"https://letsencrypt.org/zh-cn/docs/rate-limits/\" target=\"_blank\">Let’s Encrypt 速率限制</a><br>2. <a href=\"https://letsencrypt.org/zh-cn/docs/faq/#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E7%9A%84-let-s-encrypt-acme-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%90%AF%E5%8A%A8%E6%97%B6%E9%97%B4%E5%BA%94%E5%BD%93%E9%9A%8F%E6%9C%BA\" target=\"_blank\">为什么我的 Let’s Encrypt (ACME) 客户端启动时间应当随机?</a>",
|
||||||
|
"workflow.nodes.notify.form.subject.label": "通知主题",
|
||||||
|
"workflow.nodes.notify.form.subject.placeholder": "请输入通知主题",
|
||||||
|
"workflow.nodes.notify.form.message.label": "通知内容",
|
||||||
|
"workflow.nodes.notify.form.message.placeholder": "请输入通知内容",
|
||||||
|
"workflow.nodes.notify.form.channel.label": "通知渠道",
|
||||||
|
"workflow.nodes.notify.form.channel.placeholder": "请选择通知渠道",
|
||||||
|
"workflow.nodes.notify.form.channel.button": "去配置",
|
||||||
|
|
||||||
"workflow_run.props.id": "ID",
|
"workflow_run.props.id": "ID",
|
||||||
"workflow_run.props.status": "状态",
|
"workflow_run.props.status": "状态",
|
||||||
@ -70,13 +77,5 @@
|
|||||||
"workflow.node.setting.label": "设置节点",
|
"workflow.node.setting.label": "设置节点",
|
||||||
"workflow.node.delete.label": "删除节点",
|
"workflow.node.delete.label": "删除节点",
|
||||||
"workflow.node.addBranch.label": "添加分支",
|
"workflow.node.addBranch.label": "添加分支",
|
||||||
"workflow.node.selectNodeType.label": "选择节点类型",
|
"workflow.node.selectNodeType.label": "选择节点类型"
|
||||||
|
|
||||||
"workflow.node.notify.form.title.label": "标题",
|
|
||||||
"workflow.node.notify.form.title.placeholder": "请输入标题",
|
|
||||||
"workflow.node.notify.form.content.label": "内容",
|
|
||||||
"workflow.node.notify.form.content.placeholder": "请输入内容",
|
|
||||||
"workflow.node.notify.form.channel.label": "推送渠道",
|
|
||||||
"workflow.node.notify.form.channel.placeholder": "请选择推送渠道",
|
|
||||||
"workflow.node.notify.form.settingChannel.label": "设置推送渠道"
|
|
||||||
}
|
}
|
||||||
|
@ -208,7 +208,7 @@ const SettingsSSLProvider = () => {
|
|||||||
const [messageApi, MessageContextHolder] = message.useMessage();
|
const [messageApi, MessageContextHolder] = message.useMessage();
|
||||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||||
|
|
||||||
const [form] = Form.useForm<{ provider?: string }>();
|
const [formInst] = Form.useForm<{ provider?: string }>();
|
||||||
const [formPending, setFormPending] = useState(false);
|
const [formPending, setFormPending] = useState(false);
|
||||||
|
|
||||||
const [settings, setSettings] = useState<SettingsModel<SSLProviderSettingsContent>>();
|
const [settings, setSettings] = useState<SettingsModel<SSLProviderSettingsContent>>();
|
||||||
@ -267,7 +267,7 @@ const SettingsSSLProvider = () => {
|
|||||||
{NotificationContextHolder}
|
{NotificationContextHolder}
|
||||||
|
|
||||||
<Show when={!loading} fallback={<Skeleton active />}>
|
<Show when={!loading} fallback={<Skeleton active />}>
|
||||||
<Form form={form} disabled={formPending} layout="vertical" initialValues={{ provider: providerType }}>
|
<Form form={formInst} disabled={formPending} layout="vertical" initialValues={{ provider: providerType }}>
|
||||||
<Form.Item className="mb-2" name="provider" label={t("settings.sslprovider.form.provider.label")}>
|
<Form.Item className="mb-2" name="provider" label={t("settings.sslprovider.form.provider.label")}>
|
||||||
<CheckCard.Group className="w-full" onChange={(value) => setFormProviderType(value as SSLProviders)}>
|
<CheckCard.Group className="w-full" onChange={(value) => setFormProviderType(value as SSLProviders)}>
|
||||||
<CheckCard
|
<CheckCard
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
import { cloneElement, memo, useEffect, useMemo, useState } from "react";
|
import { cloneElement, memo, useEffect, useMemo, useState } from "react";
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { useDeepCompareEffect } from "ahooks";
|
import { Button, Card, Dropdown, Form, Input, message, Modal, notification, Tabs, Typography } from "antd";
|
||||||
import { Button, Card, Dropdown, Form, Input, message, Modal, notification, Tabs, Typography, type FormInstance } from "antd";
|
|
||||||
import { createSchemaFieldRule } from "antd-zod";
|
import { createSchemaFieldRule } from "antd-zod";
|
||||||
import { PageHeader } from "@ant-design/pro-components";
|
import { PageHeader } from "@ant-design/pro-components";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
@ -13,7 +12,7 @@ import End from "@/components/workflow/End";
|
|||||||
import NodeRender from "@/components/workflow/NodeRender";
|
import NodeRender from "@/components/workflow/NodeRender";
|
||||||
import WorkflowRuns from "@/components/workflow/run/WorkflowRuns";
|
import WorkflowRuns from "@/components/workflow/run/WorkflowRuns";
|
||||||
import WorkflowProvider from "@/components/workflow/WorkflowProvider";
|
import WorkflowProvider from "@/components/workflow/WorkflowProvider";
|
||||||
import { useZustandShallowSelector } from "@/hooks";
|
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
|
||||||
import { allNodesValidated, type WorkflowModel, type WorkflowNode } from "@/domain/workflow";
|
import { allNodesValidated, type WorkflowModel, type WorkflowNode } from "@/domain/workflow";
|
||||||
import { useWorkflowStore } from "@/stores/workflow";
|
import { useWorkflowStore } from "@/stores/workflow";
|
||||||
import { remove as removeWorkflow } from "@/repository/workflow";
|
import { remove as removeWorkflow } from "@/repository/workflow";
|
||||||
@ -227,31 +226,23 @@ const WorkflowBaseInfoModalForm = memo(
|
|||||||
.nullish(),
|
.nullish(),
|
||||||
});
|
});
|
||||||
const formRule = createSchemaFieldRule(formSchema);
|
const formRule = createSchemaFieldRule(formSchema);
|
||||||
const [form] = Form.useForm<FormInstance<z.infer<typeof formSchema>>>();
|
const {
|
||||||
const [formPending, setFormPending] = useState(false);
|
form: formInst,
|
||||||
|
formPending,
|
||||||
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model as Partial<z.infer<typeof formSchema>>);
|
formProps,
|
||||||
useDeepCompareEffect(() => {
|
...formApi
|
||||||
setInitialValues(model as Partial<z.infer<typeof formSchema>>);
|
} = useAntdForm<z.infer<typeof formSchema>>({
|
||||||
}, [model]);
|
initialValues: model,
|
||||||
|
onSubmit: async () => {
|
||||||
const handleClickOk = async () => {
|
const ret = await onFinish?.(formInst.getFieldsValue(true));
|
||||||
setFormPending(true);
|
|
||||||
try {
|
|
||||||
await form.validateFields();
|
|
||||||
} catch (err) {
|
|
||||||
setFormPending(false);
|
|
||||||
return Promise.reject();
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const ret = await onFinish?.(form.getFieldsValue(true));
|
|
||||||
if (ret != null && !ret) return;
|
if (ret != null && !ret) return;
|
||||||
|
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
} finally {
|
},
|
||||||
setFormPending(false);
|
});
|
||||||
}
|
|
||||||
|
const handleClickOk = async () => {
|
||||||
|
formApi.submit();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleClickCancel = () => {
|
const handleClickCancel = () => {
|
||||||
@ -278,7 +269,7 @@ const WorkflowBaseInfoModalForm = memo(
|
|||||||
onCancel={handleClickCancel}
|
onCancel={handleClickCancel}
|
||||||
>
|
>
|
||||||
<div className="pt-4 pb-2">
|
<div className="pt-4 pb-2">
|
||||||
<Form form={form} initialValues={initialValues} layout="vertical">
|
<Form {...formProps} form={formInst} layout="vertical">
|
||||||
<Form.Item name="name" label={t("workflow.baseinfo.form.name.label")} rules={[formRule]}>
|
<Form.Item name="name" label={t("workflow.baseinfo.form.name.label")} rules={[formRule]}>
|
||||||
<Input placeholder={t("workflow.baseinfo.form.name.placeholder")} />
|
<Input placeholder={t("workflow.baseinfo.form.name.placeholder")} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user