feat(ui): new AccessEditForm using antd

2024-12-17 17:11:11 +08:00
parent 047b3bc079
commit c27818b3b0
66 changed files with 2104 additions and 238 deletions
--- a/ui/src/components/workflow/ApplyForm.tsx
+++ b/ui/src/components/workflow/ApplyForm.tsx
@@ -10,7 +10,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/component
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
-import AccessEditDialog from "@/components/certimate/AccessEditDialog";
+import AccessEditModal from "@/components/access/AccessEditModal";
 import EmailsEdit from "@/components/certimate/EmailsEdit";
 import StringList from "@/components/certimate/StringList";

@@ -165,14 +165,14 @@ const ApplyForm = ({ data }: ApplyFormProps) => {
              <FormItem>
                <FormLabel className="flex justify-between w-full">
                  <div>{t("domain.application.form.access.label")}</div>
-                  <AccessEditDialog
+                  <AccessEditModal
+                    mode="add"
                    trigger={
                      <div className="flex items-center font-normal cursor-pointer text-primary hover:underline">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToAliyunALB.tsx
+++ b/ui/src/components/workflow/DeployToAliyunALB.tsx
@@ -15,7 +15,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { Button } from "../ui/button";

 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -106,15 +106,15 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "aliyun" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="aliyun"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToAliyunCDN.tsx
+++ b/ui/src/components/workflow/DeployToAliyunCDN.tsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -86,15 +86,15 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "aliyun" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="aliyun"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToAliyunCLB.tsx
+++ b/ui/src/components/workflow/DeployToAliyunCLB.tsx
@@ -15,7 +15,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { Button } from "../ui/button";

 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -106,15 +106,15 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "aliyun" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="aliyun"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToAliyunOss.tsx
+++ b/ui/src/components/workflow/DeployToAliyunOss.tsx
@@ -17,7 +17,7 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
 import { SelectLabel } from "@radix-ui/react-select";

 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -97,15 +97,15 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "aliyun" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="aliyun"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToBaiduCloudCDN.tsx
+++ b/ui/src/components/workflow/DeployToBaiduCloudCDN.tsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -86,15 +86,15 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "baiducloud" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="baiducloud"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToByteplusCDN.tsx
+++ b/ui/src/components/workflow/DeployToByteplusCDN.tsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -86,15 +86,15 @@ const DeployToByteplusCDN = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "byteplus" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="byteplus"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToDogeCloudCDN.tsx
+++ b/ui/src/components/workflow/DeployToDogeCloudCDN.tsx
@@ -17,7 +17,7 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
 import { SelectLabel } from "@radix-ui/react-select";
 import AccessSelect from "./AccessSelect";
 import { Plus } from "lucide-react";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";

 const selectState = (state: WorkflowState) => ({
  updateNode: state.updateNode,
@@ -87,15 +87,15 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "dogecloud" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="dogecloud"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToHuaweiCloudCDN.tsx
+++ b/ui/src/components/workflow/DeployToHuaweiCloudCDN.tsx
@@ -17,7 +17,7 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
 import { SelectLabel } from "@radix-ui/react-select";

 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -92,15 +92,15 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "huaweicloud" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="huaweicloud"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToHuaweiCloudELB.tsx
+++ b/ui/src/components/workflow/DeployToHuaweiCloudELB.tsx
@@ -15,7 +15,7 @@ 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 AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 import AccessSelect from "./AccessSelect";

@@ -114,15 +114,15 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "huaweicloud" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="huaweicloud"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToKubernetesSecret.tsx
+++ b/ui/src/components/workflow/DeployToKubernetesSecret.tsx
@@ -15,7 +15,7 @@ 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 AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";
 import AccessSelect from "./AccessSelect";

@@ -101,15 +101,15 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "k8s" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="k8s"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToLocal.tsx
+++ b/ui/src/components/workflow/DeployToLocal.tsx
@@ -16,7 +16,7 @@ import { WorkflowNode } from "@/domain/workflow";
 import { Textarea } from "../ui/textarea";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -211,15 +211,15 @@ Remove-Item -Path "$pfxPath" -Force
              <FormLabel className="flex justify-between">
                <div>{t("domain.deployment.form.access.label")}</div>

-                <AccessEditDialog
+                <AccessEditModal
+                  data={{ configType: "local" }}
+                  mode="add"
                  trigger={
                    <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                      <Plus size={14} />
                      {t("common.button.add")}
                    </div>
                  }
-                  op="add"
-                  outConfigType="local"
                />
              </FormLabel>
              <FormControl>
--- a/ui/src/components/workflow/DeployToQiniuCDN.tsx
+++ b/ui/src/components/workflow/DeployToQiniuCDN.tsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -87,15 +87,15 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "qiniu" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="qiniu"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToSSH.tsx
+++ b/ui/src/components/workflow/DeployToSSH.tsx
@@ -15,7 +15,7 @@ import i18n from "@/i18n";
 import { WorkflowNode } from "@/domain/workflow";
 import { Textarea } from "../ui/textarea";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -129,15 +129,15 @@ const DeployToSSH = ({ data }: DeployFormProps) => {
              <FormLabel className="flex justify-between">
                <div>{t("domain.deployment.form.access.label")}</div>

-                <AccessEditDialog
+                <AccessEditModal
+                  data={{ configType: "ssh" }}
+                  mode="add"
                  trigger={
                    <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                      <Plus size={14} />
                      {t("common.button.add")}
                    </div>
                  }
-                  op="add"
-                  outConfigType="ssh"
                />
              </FormLabel>
              <FormControl>
--- a/ui/src/components/workflow/DeployToTencentCDN.tsx
+++ b/ui/src/components/workflow/DeployToTencentCDN.tsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -86,15 +86,15 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "tencentcloud" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="tencentcloud"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToTencentCLB.tsx
+++ b/ui/src/components/workflow/DeployToTencentCLB.tsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 type TencentResourceType = "ssl-deploy" | "loadbalancer" | "listener" | "ruledomain";
@@ -126,15 +126,15 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "tencentcloud" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="tencentcloud"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToTencentCOS.tsx
+++ b/ui/src/components/workflow/DeployToTencentCOS.tsx
@@ -15,7 +15,7 @@ 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 AccessEditModal from "../access/AccessEditModal";
 import AccessSelect from "./AccessSelect";
 import { Plus } from "lucide-react";

@@ -92,15 +92,15 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "tencentcloud" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="tencentcloud"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToTencentTEO.tsx
+++ b/ui/src/components/workflow/DeployToTencentTEO.tsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -89,15 +89,15 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "tencentcloud" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="tencentcloud"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToVolcengineCDN.tsx
+++ b/ui/src/components/workflow/DeployToVolcengineCDN.tsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -86,15 +86,15 @@ const DeployToVolcengineCDN = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "volcengine" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="volcengine"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToVolcengineLive.tsx
+++ b/ui/src/components/workflow/DeployToVolcengineLive.tsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { SelectLabel } from "@radix-ui/react-select";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -86,15 +86,15 @@ const DeployToVolcengineLive = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "volcengine" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="volcengine"
                  />
                </FormLabel>
                <FormControl>
--- a/ui/src/components/workflow/DeployToWebhook.tsx
+++ b/ui/src/components/workflow/DeployToWebhook.tsx
@@ -16,7 +16,7 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
 import { SelectLabel } from "@radix-ui/react-select";
 import KVList from "../certimate/KVList";
 import AccessSelect from "./AccessSelect";
-import AccessEditDialog from "../certimate/AccessEditDialog";
+import AccessEditModal from "../access/AccessEditModal";
 import { Plus } from "lucide-react";

 const selectState = (state: WorkflowState) => ({
@@ -90,15 +90,15 @@ const DeployToWebhook = ({ data }: DeployFormProps) => {
                <FormLabel className="flex justify-between">
                  <div>{t("domain.deployment.form.access.label")}</div>

-                  <AccessEditDialog
+                  <AccessEditModal
+                    data={{ configType: "webhook" }}
+                    mode="add"
                    trigger={
                      <div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
                        <Plus size={14} />
                        {t("common.button.add")}
                      </div>
                    }
-                    op="add"
-                    outConfigType="webhook"
                  />
                </FormLabel>
                <FormControl>