import { useTranslation } from "react-i18next"; import { z } from "zod"; import { Input } from "@/components/ui/input"; import { DeployFormProps } from "./DeployForm"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow"; import { useWorkflowStore, WorkflowState } from "@/providers/workflow"; import { useShallow } from "zustand/shallow"; import { usePanel } from "./PanelProvider"; import { Button } from "../ui/button"; import { useEffect, useState } from "react"; import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select"; import { SelectLabel } from "@radix-ui/react-select"; import AccessEditDialog from "../certimate/AccessEditDialog"; import AccessSelect from "./AccessSelect"; import { Plus } from "lucide-react"; const selectState = (state: WorkflowState) => ({ updateNode: state.updateNode, getWorkflowOuptutBeforeId: state.getWorkflowOuptutBeforeId, }); const DeployToTencentCOS = ({ data }: DeployFormProps) => { const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useShallow(selectState)); const { hidePanel } = usePanel(); const { t } = useTranslation(); const [beforeOutput, setBeforeOutput] = useState<WorkflowNode[]>([]); useEffect(() => { const rs = getWorkflowOuptutBeforeId(data.id, "certificate"); console.log(rs); setBeforeOutput(rs); }, [data]); const formSchema = z.object({ providerType: z.string(), access: z.string().min(1, t("domain.deployment.form.access.placeholder")), certificate: z.string().min(1), region: z.string().min(1, t("domain.deployment.form.tencent_cos_region.placeholder")), bucket: z.string().min(1, t("domain.deployment.form.tencent_cos_bucket.placeholder")), domain: z.string().regex(/^(?:\*\.)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/, { message: t("common.errmsg.domain_invalid"), }), }); let config: WorkflowNodeConfig = { certificate: "", providerType: "", access: "", region: "", bucket: "", domain: "", }; if (data) config = data.config ?? config; const form = useForm<z.infer<typeof formSchema>>({ resolver: zodResolver(formSchema), defaultValues: { providerType: "tencent-cos", access: config.access as string, certificate: config.certificate as string, region: config.region as string, bucket: config.bucket as string, domain: config.domain as string, }, }); const onSubmit = async (config: z.infer<typeof formSchema>) => { updateNode({ ...data, config: { ...config }, validated: true }); hidePanel(); }; return ( <> <Form {...form}> <form onSubmit={(e) => { e.stopPropagation(); form.handleSubmit(onSubmit)(e); }} className="space-y-8" > <FormField control={form.control} name="access" render={({ field }) => ( <FormItem> <FormLabel className="flex justify-between"> <div>{t("domain.deployment.form.access.label")}</div> <AccessEditDialog trigger={ <div className="font-normal text-primary hover:underline cursor-pointer flex items-center"> <Plus size={14} /> {t("common.add")} </div> } op="add" outConfigType="tencent" /> </FormLabel> <FormControl> <AccessSelect {...field} value={field.value} onValueChange={(value) => { form.setValue("access", value); }} providerType="tencent-cos" /> </FormControl> <FormMessage /> </FormItem> )} /> <FormField control={form.control} name="certificate" render={({ field }) => ( <FormItem> <FormLabel>{t("workflow.common.certificate.label")}</FormLabel> <FormControl> <Select {...field} value={field.value} onValueChange={(value) => { form.setValue("certificate", value); }} > <SelectTrigger> <SelectValue placeholder={t("workflow.common.certificate.placeholder")} /> </SelectTrigger> <SelectContent> {beforeOutput.map((item) => ( <> <SelectGroup key={item.id}> <SelectLabel>{item.name}</SelectLabel> {item.output?.map((output) => ( <SelectItem key={output.name} value={`${item.id}#${output.name}`}> <div> {item.name}-{output.label} </div> </SelectItem> ))} </SelectGroup> </> ))} </SelectContent> </Select> </FormControl> <FormMessage /> </FormItem> )} /> <FormField control={form.control} name="region" render={({ field }) => ( <FormItem> <FormLabel>{t("domain.deployment.form.tencent_cos_region.label")}</FormLabel> <FormControl> <Input placeholder={t("domain.deployment.form.tencent_cos_region.placeholder")} {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> <FormField control={form.control} name="bucket" render={({ field }) => ( <FormItem> <FormLabel>{t("domain.deployment.form.tencent_cos_bucket.label")}</FormLabel> <FormControl> <Input placeholder={t("domain.deployment.form.tencent_cos_bucket.placeholder")} {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> <FormField control={form.control} name="domain" render={({ field }) => ( <FormItem> <FormLabel>{t("domain.deployment.form.domain.label")}</FormLabel> <FormControl> <Input placeholder={t("domain.deployment.form.domain.label")} {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> <div className="flex justify-end"> <Button type="submit">{t("common.save")}</Button> </div> </form> </Form> </> ); }; export default DeployToTencentCOS;