feat(ui): new WorkflowDetail using antd

This commit is contained in:
Fu Diwei
2024-12-24 20:39:01 +08:00
parent 8b1ae309fb
commit 4e5373de73
38 changed files with 293 additions and 320 deletions

View File

@@ -161,7 +161,7 @@ const ApplyForm = ({ data }: ApplyFormProps) => {
<FormLabel className="flex justify-between w-full">
<div>{t("domain.application.form.access.label")}</div>
<AccessEditModal
mode="add"
preset="add"
trigger={
<div className="flex items-center font-normal cursor-pointer text-primary hover:underline">
<PlusIcon size={14} />

View File

@@ -103,7 +103,7 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "aliyun" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -84,7 +84,7 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "aliyun" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -103,7 +103,7 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "aliyun" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -93,7 +93,7 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "aliyun" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -83,7 +83,7 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "baiducloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -83,7 +83,7 @@ const DeployToByteplusCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "byteplus" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -85,7 +85,7 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "dogecloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -90,7 +90,7 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "huaweicloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -112,7 +112,7 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "huaweicloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -99,7 +99,7 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "k8s" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -32,11 +32,11 @@ const formSchema = z
certPath: z
.string()
.min(1, t("domain.deployment.form.file_cert_path.placeholder"))
.max(255, t("common.errmsg.string_max", { max: 255 })),
.max(256, t("common.errmsg.string_max", { max: 256 })),
keyPath: z
.string()
.min(0, t("domain.deployment.form.file_key_path.placeholder"))
.max(255, t("common.errmsg.string_max", { max: 255 }))
.max(256, t("common.errmsg.string_max", { max: 256 }))
.nullish(),
pfxPassword: z.string().nullish(),
jksAlias: z.string().nullish(),
@@ -209,7 +209,7 @@ Remove-Item -Path "$pfxPath" -Force
<AccessEditModal
data={{ configType: "local" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -85,7 +85,7 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "qiniu" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -31,11 +31,11 @@ const formSchema = z
certPath: z
.string()
.min(1, t("domain.deployment.form.file_cert_path.placeholder"))
.max(255, t("common.errmsg.string_max", { max: 255 })),
.max(256, t("common.errmsg.string_max", { max: 256 })),
keyPath: z
.string()
.min(0, t("domain.deployment.form.file_key_path.placeholder"))
.max(255, t("common.errmsg.string_max", { max: 255 }))
.max(256, t("common.errmsg.string_max", { max: 256 }))
.nullish(),
pfxPassword: z.string().nullish(),
jksAlias: z.string().nullish(),
@@ -127,7 +127,7 @@ const DeployToSSH = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "ssh" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -83,7 +83,7 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "tencentcloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -123,7 +123,7 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "tencentcloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -89,7 +89,7 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "tencentcloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -86,7 +86,7 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "tencentcloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -83,7 +83,7 @@ const DeployToVolcengineCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "volcengine" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -83,7 +83,7 @@ const DeployToVolcengineLive = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "volcengine" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -86,7 +86,7 @@ const DeployToWebhook = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "webhook" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

View File

@@ -1,125 +0,0 @@
import { z } from "zod";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
import { useWorkflowStore } from "@/stores/workflow";
import { useZustandShallowSelector } from "@/hooks";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { useTranslation } from "react-i18next";
import { memo, useEffect, useMemo, useState } from "react";
import { Textarea } from "../ui/textarea";
type WorkflowNameEditDialogProps = {
trigger: React.ReactNode;
};
const formSchema = z.object({
name: z.string(),
description: z.string(),
});
const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) => {
const { setBaseInfo, workflow } = useWorkflowStore(useZustandShallowSelector(["setBaseInfo", "workflow"]));
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
});
const memoWorkflow = useMemo(() => workflow, [workflow]);
useEffect(() => {
form.reset({ name: workflow.name, description: workflow.description });
}, [memoWorkflow]);
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const onSubmit = async (config: z.infer<typeof formSchema>) => {
await setBaseInfo(config.name, config.description);
setOpen(false);
};
return (
<>
<Dialog
open={open}
onOpenChange={(val) => {
setOpen(val);
}}
>
<DialogTrigger>{trigger}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle className="dark:text-stone-200">{t("workflow.baseinfo.title")}</DialogTitle>
</DialogHeader>
<div>
<Form {...form}>
<form
onSubmit={(e) => {
e.stopPropagation();
form.handleSubmit(onSubmit)(e);
}}
className="space-y-8 dark:text-stone-200"
>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t("workflow.props.name")}</FormLabel>
<FormControl>
<Input
placeholder={t("workflow.props.name.placeholder")}
{...field}
value={field.value}
defaultValue={workflow.name}
onChange={(e) => {
form.setValue("name", e.target.value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>{t("workflow.props.description")}</FormLabel>
<FormControl>
<Textarea
placeholder={t("workflow.props.description.placeholder")}
{...field}
value={field.value}
defaultValue={workflow.description}
onChange={(e) => {
form.setValue("description", e.target.value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex justify-end">
<Button type="submit">{t("common.button.save")}</Button>
</div>
</form>
</Form>
</div>
</DialogContent>
</Dialog>
</>
);
};
export default memo(WorkflowNameBaseInfoDialog);