feat: support tencent clb deployment in multiple ways

ui/src/components/certimate/DeployToTencentCLB.tsx

@@ -5,106 +5,76 @@ import { produce } from "immer";
 
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { useDeployEditContext } from "./DeployEdit";
 
 const DeployToTencentCLB = () => {
-  const { deploy: data, setDeploy, error, setError } = useDeployEditContext();
-
   const { t } = useTranslation();
 
-  useEffect(() => {
-    setError({});
-  }, []);
-
-  useEffect(() => {
-    const resp = domainSchema.safeParse(data.config?.domain);
-    if (!resp.success) {
-      setError({
-        ...error,
-        domain: JSON.parse(resp.error.message)[0].message,
-      });
-    } else {
-      setError({
-        ...error,
-        domain: "",
-      });
-    }
-  }, [data]);
-
-  useEffect(() => {
-    const clbIdresp = clbIdSchema.safeParse(data.config?.clbId);
-    if (!clbIdresp.success) {
-      setError({
-        ...error,
-        clbId: JSON.parse(clbIdresp.error.message)[0].message,
-      });
-    } else {
-      setError({
-        ...error,
-        clbId: "",
-      });
-    }
-  }, [data]);
-
-  useEffect(() => {
-    const lsnIdresp = lsnIdSchema.safeParse(data.config?.lsnId);
-    if (!lsnIdresp.success) {
-      setError({
-        ...error,
-        lsnId: JSON.parse(lsnIdresp.error.message)[0].message,
-      });
-    } else {
-      setError({
-        ...error,
-        lsnId: "",
-      });
-    }
-  }, [data]);
-
-  useEffect(() => {
-    const regionResp = regionSchema.safeParse(data.config?.region);
-    if (!regionResp.success) {
-      setError({
-        ...error,
-        region: JSON.parse(regionResp.error.message)[0].message,
-      });
-    } else {
-      setError({
-        ...error,
-        region: "",
-      });
-    }
-  }, []);
+  const { deploy: data, setDeploy, error, setError } = useDeployEditContext();
 
   useEffect(() => {
     if (!data.id) {
       setDeploy({
         ...data,
         config: {
-          lsnId: "",
-          clbId: "",
+          region: "ap-guangzhou",
+          resourceType: "",
+          loadbalancerId: "",
+          listenerId: "",
           domain: "",
-          region: "",
         },
       });
     }
   }, []);
 
-  const regionSchema = z.string().regex(/^ap-[a-z]+$/, {
-    message: t("domain.deployment.form.tencent_clb_region.placeholder"),
-  });
+  useEffect(() => {
+    setError({});
+  }, []);
 
-  const domainSchema = z.string().regex(/^$|^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
-    message: t("common.errmsg.domain_invalid"),
-  });
+  const formSchema = z
+    .object({
+      region: z.string().min(1, t("domain.deployment.form.tencent_clb_region.placeholder")),
+      resourceType: z.union([z.literal("ssl-deploy"), z.literal("loadbalancer"), z.literal("listener"), z.literal("ruledomain")], {
+        message: t("domain.deployment.form.tencent_clb_resource_type.placeholder"),
+      }),
+      loadbalancerId: z.string().min(1, t("domain.deployment.form.tencent_clb_loadbalancer_id.placeholder")),
+      listenerId: z.string().optional(),
+      domain: z.string().regex(/^$|^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, {
+        message: t("common.errmsg.domain_invalid"),
+      }),
+    })
+    .refine(
+      (data) => {
+        switch (data.resourceType) {
+          case "ssl-deploy":
+          case "listener":
+          case "ruledomain":
+            return !!data.listenerId?.trim();
+        }
+        return true;
+      },
+      {
+        message: t("domain.deployment.form.tencent_clb_listener_id.placeholder"),
+        path: ["listenerId"],
+      }
+    )
+    .refine((data) => (data.resourceType === "ruledomain" ? !!data.domain?.trim() : true), {
+      message: t("domain.deployment.form.tencent_clb_ruledomain.placeholder"),
+      path: ["domain"],
+    });
 
-  const clbIdSchema = z.string().regex(/^lb-[a-zA-Z0-9]{8}$/, {
-    message: t("domain.deployment.form.tencent_clb_id.placeholder"),
-  });
-
-  const lsnIdSchema = z.string().regex(/^lbl-.{8}$/, {
-    message: t("domain.deployment.form.tencent_clb_listener.placeholder"),
-  });
+  useEffect(() => {
+    const res = formSchema.safeParse(data.config);
+    setError({
+      ...error,
+      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]);
 
   return (
     <div className="flex flex-col space-y-8">
@@ -115,26 +85,9 @@ const DeployToTencentCLB = () => {
           className="w-full mt-1"
           value={data?.config?.region}
           onChange={(e) => {
-            const temp = e.target.value;
-
-            const resp = regionSchema.safeParse(temp);
-            if (!resp.success) {
-              setError({
-                ...error,
-                region: JSON.parse(resp.error.message)[0].message,
-              });
-            } else {
-              setError({
-                ...error,
-                region: "",
-              });
-            }
-
             const newData = produce(data, (draft) => {
-              if (!draft.config) {
-                draft.config = {};
-              }
-              draft.config.region = temp;
+              draft.config ??= {};
+              draft.config.region = e.target.value?.trim();
             });
             setDeploy(newData);
           }}
@@ -143,106 +96,111 @@ const DeployToTencentCLB = () => {
       </div>
 
       <div>
-        <Label>{t("domain.deployment.form.tencent_clb_id.label")}</Label>
-        <Input
-          placeholder={t("domain.deployment.form.tencent_clb_id.placeholder")}
-          className="w-full mt-1"
-          value={data?.config?.clbId}
-          onChange={(e) => {
-            const temp = e.target.value;
-
-            const resp = clbIdSchema.safeParse(temp);
-            if (!resp.success) {
-              setError({
-                ...error,
-                clbId: JSON.parse(resp.error.message)[0].message,
-              });
-            } else {
-              setError({
-                ...error,
-                clbId: "",
-              });
-            }
-
+        <Label>{t("domain.deployment.form.tencent_clb_resource_type.label")}</Label>
+        <Select
+          value={data?.config?.resourceType}
+          onValueChange={(value) => {
             const newData = produce(data, (draft) => {
-              if (!draft.config) {
-                draft.config = {};
-              }
-              draft.config.clbId = temp;
+              draft.config ??= {};
+              draft.config.resourceType = value;
             });
             setDeploy(newData);
           }}
-        />
-        <div className="text-red-600 text-sm mt-1">{error?.clbId}</div>
+        >
+          <SelectTrigger>
+            <SelectValue placeholder={t("domain.deployment.form.tencent_clb_resource_type.placeholder")} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="ssl-deploy">{t("domain.deployment.form.tencent_clb_resource_type.option.ssl_deploy.label")}</SelectItem>
+              <SelectItem value="loadbalancer">{t("domain.deployment.form.tencent_clb_resource_type.option.loadbalancer.label")}</SelectItem>
+              <SelectItem value="listener">{t("domain.deployment.form.tencent_clb_resource_type.option.listener.label")}</SelectItem>
+              <SelectItem value="ruledomain">{t("domain.deployment.form.tencent_clb_resource_type.option.ruledomain.label")}</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <div className="text-red-600 text-sm mt-1">{error?.resourceType}</div>
       </div>
 
       <div>
-        <Label>{t("domain.deployment.form.tencent_clb_listener.label")}</Label>
+        <Label>{t("domain.deployment.form.tencent_clb_loadbalancer_id.label")}</Label>
         <Input
-          placeholder={t("domain.deployment.form.tencent_clb_listener.placeholder")}
+          placeholder={t("domain.deployment.form.tencent_clb_loadbalancer_id.placeholder")}
           className="w-full mt-1"
-          value={data?.config?.lsnId}
+          value={data?.config?.loadbalancerId}
           onChange={(e) => {
-            const temp = e.target.value;
-
-            const resp = lsnIdSchema.safeParse(temp);
-            if (!resp.success) {
-              setError({
-                ...error,
-                lsnId: JSON.parse(resp.error.message)[0].message,
-              });
-            } else {
-              setError({
-                ...error,
-                lsnId: "",
-              });
-            }
-
             const newData = produce(data, (draft) => {
-              if (!draft.config) {
-                draft.config = {};
-              }
-              draft.config.lsnId = temp;
+              draft.config ??= {};
+              draft.config.loadbalancerId = e.target.value?.trim();
             });
             setDeploy(newData);
           }}
         />
-        <div className="text-red-600 text-sm mt-1">{error?.lsnId}</div>
+        <div className="text-red-600 text-sm mt-1">{error?.loadbalancerId}</div>
       </div>
 
-      <div>
-        <Label>{t("domain.deployment.form.tencent_clb_domain.label")}</Label>
-        <Input
-          placeholder={t("domain.deployment.form.tencent_clb_domain.placeholder")}
-          className="w-full mt-1"
-          value={data?.config?.domain}
-          onChange={(e) => {
-            const temp = e.target.value;
-
-            const resp = domainSchema.safeParse(temp);
-            if (!resp.success) {
-              setError({
-                ...error,
-                domain: JSON.parse(resp.error.message)[0].message,
+      {data?.config?.resourceType === "ssl-deploy" || data?.config?.resourceType === "listener" || data?.config?.resourceType === "ruledomain" ? (
+        <div>
+          <Label>{t("domain.deployment.form.tencent_clb_listener_id.label")}</Label>
+          <Input
+            placeholder={t("domain.deployment.form.tencent_clb_listener_id.placeholder")}
+            className="w-full mt-1"
+            value={data?.config?.listenerId}
+            onChange={(e) => {
+              const newData = produce(data, (draft) => {
+                draft.config ??= {};
+                draft.config.listenerId = e.target.value?.trim();
               });
-            } else {
-              setError({
-                ...error,
-                domain: "",
-              });
-            }
+              setDeploy(newData);
+            }}
+          />
+          <div className="text-red-600 text-sm mt-1">{error?.listenerId}</div>
+        </div>
+      ) : (
+        <></>
+      )}
 
-            const newData = produce(data, (draft) => {
-              if (!draft.config) {
-                draft.config = {};
-              }
-              draft.config.domain = temp;
-            });
-            setDeploy(newData);
-          }}
-        />
-        <div className="text-red-600 text-sm mt-1">{error?.domain}</div>
-      </div>
+      {data?.config?.resourceType === "ssl-deploy" ? (
+        <div>
+          <Label>{t("domain.deployment.form.tencent_clb_domain.label")}</Label>
+          <Input
+            placeholder={t("domain.deployment.form.tencent_clb_domain.placeholder")}
+            className="w-full mt-1"
+            value={data?.config?.domain}
+            onChange={(e) => {
+              const newData = produce(data, (draft) => {
+                draft.config ??= {};
+                draft.config.domain = e.target.value?.trim();
+              });
+              setDeploy(newData);
+            }}
+          />
+          <div className="text-red-600 text-sm mt-1">{error?.domain}</div>
+        </div>
+      ) : (
+        <></>
+      )}
+
+      {data?.config?.resourceType === "ruledomain" ? (
+        <div>
+          <Label>{t("domain.deployment.form.tencent_clb_ruledomain.label")}</Label>
+          <Input
+            placeholder={t("domain.deployment.form.tencent_clb_ruledomain.placeholder")}
+            className="w-full mt-1"
+            value={data?.config?.domain}
+            onChange={(e) => {
+              const newData = produce(data, (draft) => {
+                draft.config ??= {};
+                draft.config.domain = e.target.value?.trim();
+              });
+              setDeploy(newData);
+            }}
+          />
+          <div className="text-red-600 text-sm mt-1">{error?.domain}</div>
+        </div>
+      ) : (
+        <></>
+      )}
     </div>
   );
 };