From 260cfb96ece4aa4bc3d34360840b40955dc58ec2 Mon Sep 17 00:00:00 2001 From: Fu Diwei Date: Thu, 31 Oct 2024 14:27:11 +0800 Subject: [PATCH] refactor(ui): declare deploy config params --- ui/src/components/certimate/DeployEdit.tsx | 21 +- .../components/certimate/DeployEditDialog.tsx | 30 +-- .../certimate/DeployToAliyunALB.tsx | 64 +++--- .../certimate/DeployToAliyunCDN.tsx | 34 +-- .../certimate/DeployToAliyunCLB.tsx | 63 +++--- .../certimate/DeployToAliyunNLB.tsx | 66 +++--- .../certimate/DeployToAliyunOSS.tsx | 50 +++-- .../certimate/DeployToHuaweiCloudCDN.tsx | 40 ++-- .../certimate/DeployToHuaweiCloudELB.tsx | 80 +++---- .../certimate/DeployToKubernetesSecret.tsx | 50 +++-- ui/src/components/certimate/DeployToLocal.tsx | 211 ++++++++++-------- .../components/certimate/DeployToQiniuCDN.tsx | 34 +-- ui/src/components/certimate/DeployToSSH.tsx | 161 ++++++------- .../certimate/DeployToTencentCDN.tsx | 34 +-- .../certimate/DeployToTencentCLB.tsx | 84 +++---- .../certimate/DeployToTencentCOS.tsx | 50 +++-- .../certimate/DeployToTencentTEO.tsx | 43 ++-- .../components/certimate/DeployToWebhook.tsx | 6 +- ui/src/i18n/locales/zh/nls.domain.json | 2 +- 19 files changed, 598 insertions(+), 525 deletions(-) diff --git a/ui/src/components/certimate/DeployEdit.tsx b/ui/src/components/certimate/DeployEdit.tsx index 81353a29..05559360 100644 --- a/ui/src/components/certimate/DeployEdit.tsx +++ b/ui/src/components/certimate/DeployEdit.tsx @@ -1,16 +1,17 @@ -import { createContext, useContext } from "react"; +import { createContext, useContext, type Context as ReactContext } from "react"; -import { DeployConfig } from "@/domain/domain"; +import { type DeployConfig } from "@/domain/domain"; -type DeployEditContext = { - deploy: DeployConfig; - error: Record; - setDeploy: (deploy: DeployConfig) => void; - setError: (error: Record) => void; +export type DeployEditContext = { + config: Omit & { config: T }; + setConfig: (config: Omit & { config: T }) => void; + + errors: { [K in keyof T]?: string }; + setErrors: (error: { [K in keyof T]?: string }) => void; }; export const Context = createContext({} as DeployEditContext); -export const useDeployEditContext = () => { - return useContext(Context); -}; +export function useDeployEditContext() { + return useContext>(Context as unknown as ReactContext>); +} diff --git a/ui/src/components/certimate/DeployEditDialog.tsx b/ui/src/components/certimate/DeployEditDialog.tsx index 6db96012..140ca0b0 100644 --- a/ui/src/components/certimate/DeployEditDialog.tsx +++ b/ui/src/components/certimate/DeployEditDialog.tsx @@ -8,7 +8,7 @@ import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"; import { ScrollArea } from "@/components/ui/scroll-area"; import AccessEditDialog from "./AccessEditDialog"; -import { Context as DeployEditContext } from "./DeployEdit"; +import { Context as DeployEditContext, type DeployEditContext as DeployEditContextType } from "./DeployEdit"; import DeployToAliyunOSS from "./DeployToAliyunOSS"; import DeployToAliyunCDN from "./DeployToAliyunCDN"; import DeployToAliyunCLB from "./DeployToAliyunCLB"; @@ -49,7 +49,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro type: "", }); - const [error, setError] = useState>({}); + const [errors, setErrors] = useState>({}); const [open, setOpen] = useState(false); @@ -66,10 +66,10 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro useEffect(() => { setDeployType(locDeployConfig.type); - setError({}); + setErrors({}); }, [locDeployConfig.type]); - const setDeploy = useCallback( + const setConfig = useCallback( (deploy: DeployConfig) => { if (deploy.type !== locDeployConfig.type) { setLocDeployConfig({ ...deploy, access: "", config: {} }); @@ -94,10 +94,10 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro const handleSaveClick = () => { // 验证数据 - const newError = { ...error }; + const newError = { ...errors }; newError.type = locDeployConfig.type === "" ? t("domain.deployment.form.access.placeholder") : ""; newError.access = locDeployConfig.access === "" ? t("domain.deployment.form.access.placeholder") : ""; - setError(newError); + setErrors(newError); if (Object.values(newError).some((e) => !!e)) return; // 保存数据 @@ -108,7 +108,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro access: "", type: "", }); - setError({}); + setErrors({}); // 关闭弹框 setOpen(false); @@ -171,10 +171,10 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro return ( @@ -199,7 +199,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro -
{error.type}
+
{errors.type}
{/* 授权配置 */} @@ -241,7 +241,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro -
{error.access}
+
{errors.access}
{/* 其他参数 */} diff --git a/ui/src/components/certimate/DeployToAliyunALB.tsx b/ui/src/components/certimate/DeployToAliyunALB.tsx index 94172fd4..33a7c562 100644 --- a/ui/src/components/certimate/DeployToAliyunALB.tsx +++ b/ui/src/components/certimate/DeployToAliyunALB.tsx @@ -8,27 +8,31 @@ import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToAliyunALBConfigParams = { + region?: string; + resourceType?: string; + loadbalancerId?: string; + listenerId?: string; +}; + const DeployToAliyunALB = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, + if (!config.id) { + setConfig({ + ...config, config: { region: "cn-hangzhou", - resourceType: "", - loadbalancerId: "", - listenerId: "", }, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z @@ -50,15 +54,15 @@ const DeployToAliyunALB = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message, loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message, listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message, }); - }, [data]); + }, [config]); return (
@@ -67,28 +71,28 @@ const DeployToAliyunALB = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.region = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.region}
+
{errors?.region}
-
{error?.resourceType}
+
{errors?.resourceType}
- {data?.config?.resourceType === "loadbalancer" ? ( + {config?.config?.resourceType === "loadbalancer" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.loadbalancerId = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.loadbalancerId}
+
{errors?.loadbalancerId}
) : ( <> )} - {data?.config?.resourceType === "listener" ? ( + {config?.config?.resourceType === "listener" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.listenerId = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.listenerId}
+
{errors?.listenerId}
) : ( <> diff --git a/ui/src/components/certimate/DeployToAliyunCDN.tsx b/ui/src/components/certimate/DeployToAliyunCDN.tsx index 32eb5a41..0d073720 100644 --- a/ui/src/components/certimate/DeployToAliyunCDN.tsx +++ b/ui/src/components/certimate/DeployToAliyunCDN.tsx @@ -7,24 +7,26 @@ import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToAliyunCDNConfigParams = { + domain?: string; +}; + const DeployToAliyunCDN = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, - config: { - domain: "", - }, + if (!config.id) { + setConfig({ + ...config, + config: {}, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z.object({ @@ -34,12 +36,12 @@ const DeployToAliyunCDN = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, }); - }, [data]); + }, [config]); return (
@@ -48,16 +50,16 @@ const DeployToAliyunCDN = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.domain = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.domain}
+
{errors?.domain}
); diff --git a/ui/src/components/certimate/DeployToAliyunCLB.tsx b/ui/src/components/certimate/DeployToAliyunCLB.tsx index d90574b3..a00c3b5b 100644 --- a/ui/src/components/certimate/DeployToAliyunCLB.tsx +++ b/ui/src/components/certimate/DeployToAliyunCLB.tsx @@ -8,19 +8,24 @@ import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToAliyunCLBConfigParams = { + region?: string; + resourceType?: string; + loadbalancerId?: string; + listenerPort?: string; +}; + const DeployToAliyunCLB = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, + if (!config.id) { + setConfig({ + ...config, config: { region: "cn-hangzhou", - resourceType: "", - loadbalancerId: "", listenerPort: "443", }, }); @@ -28,7 +33,7 @@ const DeployToAliyunCLB = () => { }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z @@ -50,15 +55,15 @@ const DeployToAliyunCLB = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message, loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message, listenerPort: res.error?.errors?.find((e) => e.path[0] === "listenerPort")?.message, }); - }, [data]); + }, [config]); return (
@@ -67,28 +72,28 @@ const DeployToAliyunCLB = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.region = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.region}
+
{errors?.region}
-
{error?.resourceType}
+
{errors?.resourceType}
@@ -109,34 +114,34 @@ const DeployToAliyunCLB = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.loadbalancerId = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.loadbalancerId}
+
{errors?.loadbalancerId}
- {data?.config?.resourceType === "listener" ? ( + {config?.config?.resourceType === "listener" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.listenerPort = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.listenerPort}
+
{errors?.listenerPort}
) : ( <> diff --git a/ui/src/components/certimate/DeployToAliyunNLB.tsx b/ui/src/components/certimate/DeployToAliyunNLB.tsx index 0e4ea03e..8ca68fa8 100644 --- a/ui/src/components/certimate/DeployToAliyunNLB.tsx +++ b/ui/src/components/certimate/DeployToAliyunNLB.tsx @@ -8,27 +8,31 @@ import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToAliyunNLBConfigParams = { + region?: string; + resourceType?: string; + loadbalancerId?: string; + listenerId?: string; +}; + const DeployToAliyunNLB = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, + if (!config.id) { + setConfig({ + ...config, config: { region: "cn-hangzhou", - resourceType: "", - loadbalancerId: "", - listenerId: "", }, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z @@ -50,15 +54,15 @@ const DeployToAliyunNLB = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message, loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message, listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message, }); - }, [data]); + }, [config]); return (
@@ -67,28 +71,28 @@ const DeployToAliyunNLB = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.region = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.region}
+
{errors?.region}
-
{error?.resourceType}
+
{errors?.resourceType}
- {data?.config?.resourceType === "loadbalancer" ? ( + {config?.config?.resourceType === "loadbalancer" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.loadbalancerId = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.loadbalancerId}
+
{errors?.loadbalancerId}
) : ( <> )} - {data?.config?.resourceType === "listener" ? ( + {config?.config?.resourceType === "listener" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.listenerId = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.listenerId}
+
{errors?.listenerId}
) : ( <> diff --git a/ui/src/components/certimate/DeployToAliyunOSS.tsx b/ui/src/components/certimate/DeployToAliyunOSS.tsx index 7037175c..14249758 100644 --- a/ui/src/components/certimate/DeployToAliyunOSS.tsx +++ b/ui/src/components/certimate/DeployToAliyunOSS.tsx @@ -7,26 +7,30 @@ import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToAliyunOSSConfigParams = { + endpoint?: string; + bucket?: string; + domain?: string; +}; + const DeployToAliyunOSS = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, + if (!config.id) { + setConfig({ + ...config, config: { endpoint: "oss.aliyuncs.com", - bucket: "", - domain: "", }, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z.object({ @@ -42,14 +46,14 @@ const DeployToAliyunOSS = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, endpoint: res.error?.errors?.find((e) => e.path[0] === "endpoint")?.message, bucket: res.error?.errors?.find((e) => e.path[0] === "bucket")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, }); - }, [data]); + }, [config]); return (
@@ -58,16 +62,16 @@ const DeployToAliyunOSS = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.endpoint = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.endpoint}
+
{errors?.endpoint}
@@ -75,16 +79,16 @@ const DeployToAliyunOSS = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.bucket = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.bucket}
+
{errors?.bucket}
@@ -92,16 +96,16 @@ const DeployToAliyunOSS = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.domain = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.domain}
+
{errors?.domain}
); diff --git a/ui/src/components/certimate/DeployToHuaweiCloudCDN.tsx b/ui/src/components/certimate/DeployToHuaweiCloudCDN.tsx index 10591530..eaeda1b7 100644 --- a/ui/src/components/certimate/DeployToHuaweiCloudCDN.tsx +++ b/ui/src/components/certimate/DeployToHuaweiCloudCDN.tsx @@ -7,25 +7,29 @@ import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToHuaweiCloudCDNConfigParams = { + region?: string; + domain?: string; +}; + const DeployToHuaweiCloudCDN = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, + if (!config.id) { + setConfig({ + ...config, config: { region: "cn-north-1", - domain: "", }, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z.object({ @@ -38,13 +42,13 @@ const DeployToHuaweiCloudCDN = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, }); - }, [data]); + }, [config]); return (
@@ -53,16 +57,16 @@ const DeployToHuaweiCloudCDN = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.region = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.region}
+
{errors?.region}
@@ -70,16 +74,16 @@ const DeployToHuaweiCloudCDN = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.domain = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.domain}
+
{errors?.domain}
); diff --git a/ui/src/components/certimate/DeployToHuaweiCloudELB.tsx b/ui/src/components/certimate/DeployToHuaweiCloudELB.tsx index a3d44f3c..a26d33c8 100644 --- a/ui/src/components/certimate/DeployToHuaweiCloudELB.tsx +++ b/ui/src/components/certimate/DeployToHuaweiCloudELB.tsx @@ -8,28 +8,32 @@ import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useDeployEditContext } from "./DeployEdit"; -const DeployToHuaweiCloudCDN = () => { +type DeployToHuaweiCloudELBConfigParams = { + region?: string; + resourceType?: string; + certificateId?: string; + loadbalancerId?: string; + listenerId?: string; +}; + +const DeployToHuaweiCloudELB = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, + if (!config.id) { + setConfig({ + ...config, config: { region: "cn-north-1", - resourceType: "", - certificateId: "", - loadbalancerId: "", - listenerId: "", }, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z @@ -56,16 +60,16 @@ const DeployToHuaweiCloudCDN = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message, certificateId: res.error?.errors?.find((e) => e.path[0] === "certificateId")?.message, loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message, listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message, }); - }, [data]); + }, [config]); return (
@@ -74,28 +78,28 @@ const DeployToHuaweiCloudCDN = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.region = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.region}
+
{errors?.region}
-
{error?.resourceType}
+
{errors?.resourceType}
- {data?.config?.resourceType === "certificate" ? ( + {config?.config?.resourceType === "certificate" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.certificateId = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.certificateId}
+
{errors?.certificateId}
) : ( <> )} - {data?.config?.resourceType === "loadbalancer" ? ( + {config?.config?.resourceType === "loadbalancer" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.loadbalancerId = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.loadbalancerId}
+
{errors?.loadbalancerId}
) : ( <> )} - {data?.config?.resourceType === "listener" ? ( + {config?.config?.resourceType === "listener" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.listenerId = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.listenerId}
+
{errors?.listenerId}
) : ( <> @@ -178,4 +182,4 @@ const DeployToHuaweiCloudCDN = () => { ); }; -export default DeployToHuaweiCloudCDN; +export default DeployToHuaweiCloudELB; diff --git a/ui/src/components/certimate/DeployToKubernetesSecret.tsx b/ui/src/components/certimate/DeployToKubernetesSecret.tsx index 90d6d84f..119ae12f 100644 --- a/ui/src/components/certimate/DeployToKubernetesSecret.tsx +++ b/ui/src/components/certimate/DeployToKubernetesSecret.tsx @@ -7,18 +7,24 @@ import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToKubernetesSecretConfigParams = { + namespace?: string; + secretName?: string; + secretDataKeyForCrt?: string; + secretDataKeyForKey?: string; +}; + const DeployToKubernetesSecret = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, + if (!config.id) { + setConfig({ + ...config, config: { namespace: "default", - secretName: "", secretDataKeyForCrt: "tls.crt", secretDataKeyForKey: "tls.key", }, @@ -27,7 +33,7 @@ const DeployToKubernetesSecret = () => { }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z.object({ @@ -46,15 +52,15 @@ const DeployToKubernetesSecret = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, namespace: res.error?.errors?.find((e) => e.path[0] === "namespace")?.message, secretName: res.error?.errors?.find((e) => e.path[0] === "secretName")?.message, secretDataKeyForCrt: res.error?.errors?.find((e) => e.path[0] === "secretDataKeyForCrt")?.message, secretDataKeyForKey: res.error?.errors?.find((e) => e.path[0] === "secretDataKeyForKey")?.message, }); - }, [data]); + }, [config]); return ( <> @@ -64,13 +70,13 @@ const DeployToKubernetesSecret = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.namespace = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> @@ -80,13 +86,13 @@ const DeployToKubernetesSecret = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.secretName = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> @@ -96,13 +102,13 @@ const DeployToKubernetesSecret = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.secretDataKeyForCrt = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> @@ -112,13 +118,13 @@ const DeployToKubernetesSecret = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.secretDataKeyForKey = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> diff --git a/ui/src/components/certimate/DeployToLocal.tsx b/ui/src/components/certimate/DeployToLocal.tsx index 45a88888..11a20c2a 100644 --- a/ui/src/components/certimate/DeployToLocal.tsx +++ b/ui/src/components/certimate/DeployToLocal.tsx @@ -12,33 +12,40 @@ import { Textarea } from "@/components/ui/textarea"; import { useDeployEditContext } from "./DeployEdit"; import { cn } from "@/lib/utils"; +type DeployToLocalConfigParams = { + format?: string; + certPath?: string; + keyPath?: string; + pfxPassword?: string; + jksAlias?: string; + jksKeypass?: string; + jksStorepass?: string; + shell?: string; + preCommand?: string; + command?: string; +}; + const DeployToLocal = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, + if (!config.id) { + setConfig({ + ...config, config: { format: "pem", certPath: "/etc/nginx/ssl/nginx.crt", keyPath: "/etc/nginx/ssl/nginx.key", - pfxPassword: "", - jksAlias: "", - jksKeypass: "", - jksStorepass: "", shell: "sh", - preCommand: "", - command: "sudo service nginx reload", }, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z @@ -86,9 +93,9 @@ const DeployToLocal = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, format: res.error?.errors?.find((e) => e.path[0] === "format")?.message, certPath: res.error?.errors?.find((e) => e.path[0] === "certPath")?.message, keyPath: res.error?.errors?.find((e) => e.path[0] === "keyPath")?.message, @@ -100,38 +107,41 @@ const DeployToLocal = () => { preCommand: res.error?.errors?.find((e) => e.path[0] === "preCommand")?.message, command: res.error?.errors?.find((e) => e.path[0] === "command")?.message, }); - }, [data]); + }, [config]); useEffect(() => { - if (data.config?.format === "pem") { - if (/(.pfx|.jks)$/.test(data.config.certPath)) { - const newData = produce(data, (draft) => { - draft.config ??= {}; - draft.config.certPath = data.config!.certPath.replace(/(.pfx|.jks)$/, ".crt"); - }); - setDeploy(newData); + if (config.config?.format === "pem") { + if (/(.pfx|.jks)$/.test(config.config.certPath!)) { + setConfig( + produce(config, (draft) => { + draft.config ??= {}; + draft.config.certPath = config.config!.certPath!.replace(/(.pfx|.jks)$/, ".crt"); + }) + ); } - } else if (data.config?.format === "pfx") { - if (/(.crt|.jks)$/.test(data.config.certPath)) { - const newData = produce(data, (draft) => { - draft.config ??= {}; - draft.config.certPath = data.config!.certPath.replace(/(.crt|.jks)$/, ".pfx"); - }); - setDeploy(newData); + } else if (config.config?.format === "pfx") { + if (/(.crt|.jks)$/.test(config.config.certPath!)) { + setConfig( + produce(config, (draft) => { + draft.config ??= {}; + draft.config.certPath = config.config!.certPath!.replace(/(.crt|.jks)$/, ".pfx"); + }) + ); } - } else if (data.config?.format === "jks") { - if (/(.crt|.pfx)$/.test(data.config.certPath)) { - const newData = produce(data, (draft) => { - draft.config ??= {}; - draft.config.certPath = data.config!.certPath.replace(/(.crt|.pfx)$/, ".jks"); - }); - setDeploy(newData); + } else if (config.config?.format === "jks") { + if (/(.crt|.pfx)$/.test(config.config.certPath!)) { + setConfig( + produce(config, (draft) => { + draft.config ??= {}; + draft.config.certPath = config.config!.certPath!.replace(/(.crt|.pfx)$/, ".jks"); + }) + ); } } - }, [data.config?.format]); + }, [config.config?.format]); const getOptionCls = (val: string) => { - if (data.config?.shell === val) { + if (config.config?.shell === val) { return "border-primary dark:border-primary"; } @@ -142,21 +152,23 @@ const DeployToLocal = () => { switch (key) { case "reload_nginx": { - const newData = produce(data, (draft) => { - draft.config ??= {}; - draft.config.shell = "sh"; - draft.config.command = "sudo service nginx reload"; - }); - setDeploy(newData); + setConfig( + produce(config, (draft) => { + draft.config ??= {}; + draft.config.shell = "sh"; + draft.config.command = "sudo service nginx reload"; + }) + ); } break; case "binding_iis": { - const newData = produce(data, (draft) => { - draft.config ??= {}; - draft.config.shell = "powershell"; - draft.config.command = ` + setConfig( + produce(config, (draft) => { + draft.config ??= {}; + draft.config.shell = "powershell"; + draft.config.command = ` # 请将以下变量替换为实际值 $pfxPath = "" # PFX 文件路径 $pfxPassword = "" # PFX 密码 @@ -185,17 +197,18 @@ $binding.AddSslCertificate($thumbprint, "My") # 删除目录下的证书文件 Remove-Item -Path "$pfxPath" -Force `.trim(); - }); - setDeploy(newData); + }) + ); } break; case "binding_netsh": { - const newData = produce(data, (draft) => { - draft.config ??= {}; - draft.config.shell = "powershell"; - draft.config.command = ` + setConfig( + produce(config, (draft) => { + draft.config ??= {}; + draft.config.shell = "powershell"; + draft.config.command = ` # 请将以下变量替换为实际值 $pfxPath = "" # PFX 文件路径 $pfxPassword = "" # PFX 密码 @@ -216,8 +229,8 @@ netsh http add sslcert ipport=$addr certhash=$thumbprint # 删除目录下的证书文件 Remove-Item -Path "$pfxPath" -Force `.trim(); - }); - setDeploy(newData); + }) + ); } break; } @@ -229,13 +242,13 @@ Remove-Item -Path "$pfxPath" -Force
-
{error?.format}
+
{errors?.format}
@@ -257,77 +270,77 @@ Remove-Item -Path "$pfxPath" -Force { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.certPath = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.certPath}
+
{errors?.certPath}
- {data.config?.format === "pem" ? ( + {config.config?.format === "pem" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.keyPath = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.keyPath}
+
{errors?.keyPath}
) : ( <> )} - {data.config?.format === "pfx" ? ( + {config.config?.format === "pfx" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.pfxPassword = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.pfxPassword}
+
{errors?.pfxPassword}
) : ( <> )} - {data.config?.format === "jks" ? ( + {config.config?.format === "jks" ? ( <>
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.jksAlias = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.jksAlias}
+
{errors?.jksAlias}
@@ -335,16 +348,16 @@ Remove-Item -Path "$pfxPath" -Force { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.jksKeypass = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.jksKeypass}
+
{errors?.jksKeypass}
@@ -352,16 +365,16 @@ Remove-Item -Path "$pfxPath" -Force { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.jksStorepass = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.jksStorepass}
+
{errors?.jksStorepass}
) : ( @@ -372,13 +385,13 @@ Remove-Item -Path "$pfxPath" -Force { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.shell = val; }); - setDeploy(newData); + setConfig(nv); }} >
@@ -406,24 +419,24 @@ Remove-Item -Path "$pfxPath" -Force
-
{error?.shell}
+
{errors?.shell}
-
{error?.preCommand}
+
{errors?.preCommand}
@@ -448,17 +461,17 @@ Remove-Item -Path "$pfxPath" -Force
-
{error?.command}
+
{errors?.command}
diff --git a/ui/src/components/certimate/DeployToQiniuCDN.tsx b/ui/src/components/certimate/DeployToQiniuCDN.tsx index d7358b09..90163c12 100644 --- a/ui/src/components/certimate/DeployToQiniuCDN.tsx +++ b/ui/src/components/certimate/DeployToQiniuCDN.tsx @@ -7,24 +7,26 @@ import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToQiniuCDNConfigParams = { + domain?: string; +}; + const DeployToQiniuCDN = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, - config: { - domain: "", - }, + if (!config.id) { + setConfig({ + ...config, + config: {}, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z.object({ @@ -34,12 +36,12 @@ const DeployToQiniuCDN = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, }); - }, [data]); + }, [config]); return (
@@ -48,16 +50,16 @@ const DeployToQiniuCDN = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.domain = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.domain}
+
{errors?.domain}
); diff --git a/ui/src/components/certimate/DeployToSSH.tsx b/ui/src/components/certimate/DeployToSSH.tsx index 74d37e33..8db0cde5 100644 --- a/ui/src/components/certimate/DeployToSSH.tsx +++ b/ui/src/components/certimate/DeployToSSH.tsx @@ -9,24 +9,32 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa import { Textarea } from "@/components/ui/textarea"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToSSHConfigParams = { + format?: string; + certPath?: string; + keyPath?: string; + pfxPassword?: string; + jksAlias?: string; + jksKeypass?: string; + jksStorepass?: string; + shell?: string; + preCommand?: string; + command?: string; +}; + const DeployToSSH = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, + if (!config.id) { + setConfig({ + ...config, config: { format: "pem", certPath: "/etc/nginx/ssl/nginx.crt", keyPath: "/etc/nginx/ssl/nginx.key", - pfxPassword: "", - jksAlias: "", - jksKeypass: "", - jksStorepass: "", - preCommand: "", command: "sudo service nginx reload", }, }); @@ -34,7 +42,7 @@ const DeployToSSH = () => { }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z @@ -79,9 +87,9 @@ const DeployToSSH = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, format: res.error?.errors?.find((e) => e.path[0] === "format")?.message, certPath: res.error?.errors?.find((e) => e.path[0] === "certPath")?.message, keyPath: res.error?.errors?.find((e) => e.path[0] === "keyPath")?.message, @@ -92,35 +100,38 @@ const DeployToSSH = () => { preCommand: res.error?.errors?.find((e) => e.path[0] === "preCommand")?.message, command: res.error?.errors?.find((e) => e.path[0] === "command")?.message, }); - }, [data]); + }, [config]); useEffect(() => { - if (data.config?.format === "pem") { - if (/(.pfx|.jks)$/.test(data.config.certPath)) { - const newData = produce(data, (draft) => { - draft.config ??= {}; - draft.config.certPath = data.config!.certPath.replace(/(.pfx|.jks)$/, ".crt"); - }); - setDeploy(newData); + if (config.config?.format === "pem") { + if (/(.pfx|.jks)$/.test(config.config.certPath!)) { + setConfig( + produce(config, (draft) => { + draft.config ??= {}; + draft.config.certPath = config.config!.certPath!.replace(/(.pfx|.jks)$/, ".crt"); + }) + ); } - } else if (data.config?.format === "pfx") { - if (/(.crt|.jks)$/.test(data.config.certPath)) { - const newData = produce(data, (draft) => { - draft.config ??= {}; - draft.config.certPath = data.config!.certPath.replace(/(.crt|.jks)$/, ".pfx"); - }); - setDeploy(newData); + } else if (config.config?.format === "pfx") { + if (/(.crt|.jks)$/.test(config.config.certPath!)) { + setConfig( + produce(config, (draft) => { + draft.config ??= {}; + draft.config.certPath = config.config!.certPath!.replace(/(.crt|.jks)$/, ".pfx"); + }) + ); } - } else if (data.config?.format === "jks") { - if (/(.crt|.pfx)$/.test(data.config.certPath)) { - const newData = produce(data, (draft) => { - draft.config ??= {}; - draft.config.certPath = data.config!.certPath.replace(/(.crt|.pfx)$/, ".jks"); - }); - setDeploy(newData); + } else if (config.config?.format === "jks") { + if (/(.crt|.pfx)$/.test(config.config.certPath!)) { + setConfig( + produce(config, (draft) => { + draft.config ??= {}; + draft.config.certPath = config.config!.certPath!.replace(/(.crt|.pfx)$/, ".jks"); + }) + ); } } - }, [data.config?.format]); + }, [config.config?.format]); return ( <> @@ -128,13 +139,13 @@ const DeployToSSH = () => {
-
{error?.format}
+
{errors?.format}
@@ -156,77 +167,77 @@ const DeployToSSH = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.certPath = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.certPath}
+
{errors?.certPath}
- {data.config?.format === "pem" ? ( + {config.config?.format === "pem" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.keyPath = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.keyPath}
+
{errors?.keyPath}
) : ( <> )} - {data.config?.format === "pfx" ? ( + {config.config?.format === "pfx" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.pfxPassword = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.pfxPassword}
+
{errors?.pfxPassword}
) : ( <> )} - {data.config?.format === "jks" ? ( + {config.config?.format === "jks" ? ( <>
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.jksAlias = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.jksAlias}
+
{errors?.jksAlias}
@@ -234,16 +245,16 @@ const DeployToSSH = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.jksKeypass = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.jksKeypass}
+
{errors?.jksKeypass}
@@ -251,16 +262,16 @@ const DeployToSSH = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.jksStorepass = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.jksStorepass}
+
{errors?.jksStorepass}
) : ( @@ -271,34 +282,34 @@ const DeployToSSH = () => { -
{error?.preCommand}
+
{errors?.preCommand}
-
{error?.command}
+
{errors?.command}
diff --git a/ui/src/components/certimate/DeployToTencentCDN.tsx b/ui/src/components/certimate/DeployToTencentCDN.tsx index 63f2c7ef..fff3d9b5 100644 --- a/ui/src/components/certimate/DeployToTencentCDN.tsx +++ b/ui/src/components/certimate/DeployToTencentCDN.tsx @@ -7,24 +7,26 @@ import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToTencentCDNParams = { + domain?: string; +}; + const DeployToTencentCDN = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, - config: { - domain: "", - }, + if (!config.id) { + setConfig({ + ...config, + config: {}, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z.object({ @@ -34,12 +36,12 @@ const DeployToTencentCDN = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, }); - }, [data]); + }, [config]); return (
@@ -48,16 +50,16 @@ const DeployToTencentCDN = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.domain = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.domain}
+
{errors?.domain}
); diff --git a/ui/src/components/certimate/DeployToTencentCLB.tsx b/ui/src/components/certimate/DeployToTencentCLB.tsx index a3828a78..c9ab56ff 100644 --- a/ui/src/components/certimate/DeployToTencentCLB.tsx +++ b/ui/src/components/certimate/DeployToTencentCLB.tsx @@ -8,28 +8,32 @@ import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToTencentCLBParams = { + region?: string; + resourceType?: string; + loadbalancerId?: string; + listenerId?: string; + domain?: string; +}; + const DeployToTencentCLB = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, + if (!config.id) { + setConfig({ + ...config, config: { region: "ap-guangzhou", - resourceType: "", - loadbalancerId: "", - listenerId: "", - domain: "", }, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z @@ -65,16 +69,16 @@ const DeployToTencentCLB = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, resourceType: res.error?.errors?.find((e) => e.path[0] === "resourceType")?.message, loadbalancerId: res.error?.errors?.find((e) => e.path[0] === "loadbalancerId")?.message, listenerId: res.error?.errors?.find((e) => e.path[0] === "listenerId")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, }); - }, [data]); + }, [config]); return (
@@ -83,28 +87,28 @@ const DeployToTencentCLB = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.region = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.region}
+
{errors?.region}
-
{error?.resourceType}
+
{errors?.resourceType}
@@ -127,76 +131,76 @@ const DeployToTencentCLB = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.loadbalancerId = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.loadbalancerId}
+
{errors?.loadbalancerId}
- {data?.config?.resourceType === "ssl-deploy" || data?.config?.resourceType === "listener" || data?.config?.resourceType === "ruledomain" ? ( + {config?.config?.resourceType === "ssl-deploy" || config?.config?.resourceType === "listener" || config?.config?.resourceType === "ruledomain" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.listenerId = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.listenerId}
+
{errors?.listenerId}
) : ( <> )} - {data?.config?.resourceType === "ssl-deploy" ? ( + {config?.config?.resourceType === "ssl-deploy" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.domain = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.domain}
+
{errors?.domain}
) : ( <> )} - {data?.config?.resourceType === "ruledomain" ? ( + {config?.config?.resourceType === "ruledomain" ? (
{ - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.domain = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.domain}
+
{errors?.domain}
) : ( <> diff --git a/ui/src/components/certimate/DeployToTencentCOS.tsx b/ui/src/components/certimate/DeployToTencentCOS.tsx index f95eb778..b045fb22 100644 --- a/ui/src/components/certimate/DeployToTencentCOS.tsx +++ b/ui/src/components/certimate/DeployToTencentCOS.tsx @@ -7,26 +7,30 @@ import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToTencentCOSParams = { + region?: string; + bucket?: string; + domain?: string; +}; + const DeployToTencentCOS = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, + if (!config.id) { + setConfig({ + ...config, config: { region: "ap-guangzhou", - bucket: "", - domain: "", }, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z.object({ @@ -38,14 +42,14 @@ const DeployToTencentCOS = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, region: res.error?.errors?.find((e) => e.path[0] === "region")?.message, bucket: res.error?.errors?.find((e) => e.path[0] === "bucket")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, }); - }, [data]); + }, [config]); return (
@@ -54,16 +58,16 @@ const DeployToTencentCOS = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.region = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.region}
+
{errors?.region}
@@ -71,16 +75,16 @@ const DeployToTencentCOS = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.bucket = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.bucket}
+
{errors?.bucket}
@@ -88,16 +92,16 @@ const DeployToTencentCOS = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.domain = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.domain}
+
{errors?.domain}
); diff --git a/ui/src/components/certimate/DeployToTencentTEO.tsx b/ui/src/components/certimate/DeployToTencentTEO.tsx index 6b90c55c..56de4d68 100644 --- a/ui/src/components/certimate/DeployToTencentTEO.tsx +++ b/ui/src/components/certimate/DeployToTencentTEO.tsx @@ -8,24 +8,27 @@ import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { useDeployEditContext } from "./DeployEdit"; +type DeployToTencentTEOParams = { + zoneId?: string; + domain?: string; +}; + const DeployToTencentTEO = () => { const { t } = useTranslation(); - const { deploy: data, setDeploy, error, setError } = useDeployEditContext(); + const { config, setConfig, errors, setErrors } = useDeployEditContext(); useEffect(() => { - if (!data.id) { - setDeploy({ - ...data, - config: { - zoneId: "", - }, + if (!config.id) { + setConfig({ + ...config, + config: {}, }); } }, []); useEffect(() => { - setError({}); + setErrors({}); }, []); const formSchema = z.object({ @@ -36,13 +39,13 @@ const DeployToTencentTEO = () => { }); useEffect(() => { - const res = formSchema.safeParse(data.config); - setError({ - ...error, + const res = formSchema.safeParse(config.config); + setErrors({ + ...errors, zoneId: res.error?.errors?.find((e) => e.path[0] === "zoneId")?.message, domain: res.error?.errors?.find((e) => e.path[0] === "domain")?.message, }); - }, [data]); + }, [config]); return (
@@ -51,16 +54,16 @@ const DeployToTencentTEO = () => { { - const newData = produce(data, (draft) => { + const nv = produce(config, (draft) => { draft.config ??= {}; draft.config.zoneId = e.target.value?.trim(); }); - setDeploy(newData); + setConfig(nv); }} /> -
{error?.zoneId}
+
{errors?.zoneId}
@@ -68,16 +71,16 @@ const DeployToTencentTEO = () => {