feat(ui): new WorkflowDetail using antd
This commit is contained in:
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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);
|
||||
Reference in New Issue
Block a user