refactor: clean code

2024-10-22 12:20:13 +08:00
parent 716f5f1426
commit e53749e16e
21 changed files with 167 additions and 202 deletions
--- a/ui/src/components/certimate/AccessAliyunForm.tsx
+++ b/ui/src/components/certimate/AccessAliyunForm.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { PbErrorData } from "@/domain/base";
-import { Access, AliyunConfig, accessFormType, getUsageByConfigType } from "@/domain/access";
+import { accessProvidersMap, accessTypeFormSchema, type Access, type AliyunConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -27,7 +27,7 @@ const AccessAliyunForm = ({ data, op, onAfterReq }: AccessAliyunFormProps) => {
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    accessKeyId: z
      .string()
      .min(1, "access.authorization.form.access_key_id.placeholder")
@@ -60,7 +60,7 @@ const AccessAliyunForm = ({ data, op, onAfterReq }: AccessAliyunFormProps) => {
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        accessKeyId: data.accessKeyId,
        accessKeySecret: data.accessSecretId,
--- a/ui/src/components/certimate/AccessAwsForm.tsx
+++ b/ui/src/components/certimate/AccessAwsForm.tsx
@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/input";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Button } from "@/components/ui/button";
 import { PbErrorData } from "@/domain/base";
-import { Access, accessFormType, AwsConfig, getUsageByConfigType } from "@/domain/access";
+import { Access, accessProvidersMap, accessTypeFormSchema, type AwsConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -27,7 +27,7 @@ const AccessAwsForm = ({ data, op, onAfterReq }: AccessAwsFormProps) => {
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    region: z
      .string()
      .min(1, "access.authorization.form.region.placeholder")
@@ -72,7 +72,7 @@ const AccessAwsForm = ({ data, op, onAfterReq }: AccessAwsFormProps) => {
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        region: data.region,
        accessKeyId: data.accessKeyId,
--- a/ui/src/components/certimate/AccessCloudflareForm.tsx
+++ b/ui/src/components/certimate/AccessCloudflareForm.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { PbErrorData } from "@/domain/base";
-import { Access, accessFormType, CloudflareConfig, getUsageByConfigType } from "@/domain/access";
+import { accessProvidersMap, accessTypeFormSchema, type Access, type CloudflareConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -27,7 +27,7 @@ const AccessCloudflareForm = ({ data, op, onAfterReq }: AccessCloudflareFormProp
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    dnsApiToken: z
      .string()
      .min(1, "access.authorization.form.cloud_dns_api_token.placeholder")
@@ -54,7 +54,7 @@ const AccessCloudflareForm = ({ data, op, onAfterReq }: AccessCloudflareFormProp
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        dnsApiToken: data.dnsApiToken,
      },
--- a/ui/src/components/certimate/AccessEditDialog.tsx
+++ b/ui/src/components/certimate/AccessEditDialog.tsx
@@ -20,7 +20,7 @@ import AccessLocalForm from "./AccessLocalForm";
 import AccessSSHForm from "./AccessSSHForm";
 import AccessWebhookForm from "./AccessWebhookForm";
 import AccessKubernetesForm from "./AccessKubernetesForm";
-import { Access, accessTypeMap } from "@/domain/access";
+import { Access, accessProvidersMap } from "@/domain/access";

 type AccessEditProps = {
  op: "add" | "edit" | "copy";
@@ -30,10 +30,9 @@ type AccessEditProps = {
 };

 const AccessEditDialog = ({ trigger, op, data, className }: AccessEditProps) => {
-  const [open, setOpen] = useState(false);
  const { t } = useTranslation();

-  const typeKeys = Array.from(accessTypeMap.keys());
+  const [open, setOpen] = useState(false);

  const [configType, setConfigType] = useState(data?.configType || "");

@@ -232,11 +231,11 @@ const AccessEditDialog = ({ trigger, op, data, className }: AccessEditProps) =>
                <SelectContent>
                  <SelectGroup>
                    <SelectLabel>{t("access.authorization.form.type.list")}</SelectLabel>
-                    {typeKeys.map((key) => (
+                    {Array.from(accessProvidersMap.entries()).map(([key, provider]) => (
                      <SelectItem value={key} key={key}>
                        <div className={cn("flex items-center space-x-2 rounded cursor-pointer", getOptionCls(key))}>
-                          <img src={accessTypeMap.get(key)?.[1]} className="h-6 w-6" />
-                          <div>{t(accessTypeMap.get(key)?.[0] || "")}</div>
+                          <img src={provider.icon} className="h-6 w-6" />
+                          <div>{t(provider.name)}</div>
                        </div>
                      </SelectItem>
                    ))}
--- a/ui/src/components/certimate/AccessGodaddyForm.tsx
+++ b/ui/src/components/certimate/AccessGodaddyForm.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { PbErrorData } from "@/domain/base";
-import { Access, accessFormType, getUsageByConfigType, GodaddyConfig } from "@/domain/access";
+import { accessProvidersMap, accessTypeFormSchema, type Access, type GodaddyConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -27,7 +27,7 @@ const AccessGodaddyForm = ({ data, op, onAfterReq }: AccessGodaddyFormProps) =>
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    apiKey: z
      .string()
      .min(1, "access.authorization.form.godaddy_api_key.placeholder")
@@ -60,7 +60,7 @@ const AccessGodaddyForm = ({ data, op, onAfterReq }: AccessGodaddyFormProps) =>
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        apiKey: data.apiKey,
        apiSecret: data.apiSecret,
--- a/ui/src/components/certimate/AccessGroupList.tsx
+++ b/ui/src/components/certimate/AccessGroupList.tsx
@@ -19,7 +19,7 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { useToast } from "@/components/ui/use-toast";
 import AccessGroupEdit from "./AccessGroupEdit";
-import { getProviderInfo } from "@/domain/access";
+import { accessProvidersMap } from "@/domain/access";
 import { getErrMessage } from "@/lib/error";
 import { useConfigContext } from "@/providers/config";
 import { remove } from "@/repository/access_group";
@@ -86,11 +86,11 @@ const AccessGroupList = () => {
                      <div key={access.id} className="flex flex-col mb-3">
                        <div className="flex items-center">
                          <div className="">
-                            <img src={getProviderInfo(access.configType)![1]} alt="provider" className="w-8 h-8"></img>
+                            <img src={accessProvidersMap.get(access.configType)!.icon} alt="provider" className="w-8 h-8"></img>
                          </div>
                          <div className="ml-3">
                            <div className="text-sm font-semibold text-gray-700 dark:text-gray-200">{access.name}</div>
-                            <div className="text-xs text-muted-foreground">{getProviderInfo(access.configType)![0]}</div>
+                            <div className="text-xs text-muted-foreground">{accessProvidersMap.get(access.configType)!.name}</div>
                          </div>
                        </div>
                      </div>
--- a/ui/src/components/certimate/AccessHttpreqForm.tsx
+++ b/ui/src/components/certimate/AccessHttpreqForm.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { PbErrorData } from "@/domain/base";
-import { Access, HttpreqConfig, accessFormType, getUsageByConfigType } from "@/domain/access";
+import { accessProvidersMap, accessTypeFormSchema, type Access, type HttpreqConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -27,7 +27,7 @@ const AccessHttpreqForm = ({ data, op, onAfterReq }: AccessHttpreqFormProps) =>
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    endpoint: z.string().url("common.errmsg.url_invalid"),
    mode: z.enum(["RAW", ""]),
    username: z
@@ -66,7 +66,7 @@ const AccessHttpreqForm = ({ data, op, onAfterReq }: AccessHttpreqFormProps) =>
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        endpoint: data.endpoint,
        mode: data.mode,
--- a/ui/src/components/certimate/AccessHuaweicloudForm.tsx
+++ b/ui/src/components/certimate/AccessHuaweicloudForm.tsx
@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/input";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Button } from "@/components/ui/button";
 import { PbErrorData } from "@/domain/base";
-import { Access, accessFormType, HuaweiCloudConfig, getUsageByConfigType } from "@/domain/access";
+import { accessProvidersMap, accessTypeFormSchema, type Access, type HuaweiCloudConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -27,7 +27,7 @@ const AccessHuaweiCloudForm = ({ data, op, onAfterReq }: AccessHuaweiCloudFormPr
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    region: z
      .string()
      .min(1, "access.authorization.form.region.placeholder")
@@ -66,7 +66,7 @@ const AccessHuaweiCloudForm = ({ data, op, onAfterReq }: AccessHuaweiCloudFormPr
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        region: data.region,
        accessKeyId: data.accessKeyId,
--- a/ui/src/components/certimate/AccessKubernetesForm.tsx
+++ b/ui/src/components/certimate/AccessKubernetesForm.tsx
@@ -5,12 +5,12 @@ import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ClientResponseError } from "pocketbase";

-import { Access, accessFormType, getUsageByConfigType, KubernetesConfig } from "@/domain/access";
 import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { readFileContent } from "@/lib/file";
 import { PbErrorData } from "@/domain/base";
+import { accessProvidersMap, accessTypeFormSchema, type Access, type KubernetesConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -34,7 +34,7 @@ const AccessKubernetesForm = ({ data, op, onAfterReq }: AccessKubernetesFormProp
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    kubeConfig: z
      .string()
      .min(1, "access.authorization.form.k8s_kubeconfig.placeholder")
@@ -64,7 +64,7 @@ const AccessKubernetesForm = ({ data, op, onAfterReq }: AccessKubernetesFormProp
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        kubeConfig: data.kubeConfig,
      },
--- a/ui/src/components/certimate/AccessLocalForm.tsx
+++ b/ui/src/components/certimate/AccessLocalForm.tsx
@@ -8,7 +8,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { PbErrorData } from "@/domain/base";
-import { Access, accessFormType, getUsageByConfigType } from "@/domain/access";
+import { accessProvidersMap, accessTypeFormSchema, type Access } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -28,7 +28,7 @@ const AccessLocalForm = ({ data, op, onAfterReq }: AccessLocalFormProps) => {
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
  });

  const form = useForm<z.infer<typeof formSchema>>({
@@ -45,7 +45,7 @@ const AccessLocalForm = ({ data, op, onAfterReq }: AccessLocalFormProps) => {
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,

      config: {},
    };
--- a/ui/src/components/certimate/AccessNamesiloForm.tsx
+++ b/ui/src/components/certimate/AccessNamesiloForm.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { PbErrorData } from "@/domain/base";
-import { Access, accessFormType, getUsageByConfigType, NamesiloConfig } from "@/domain/access";
+import { accessProvidersMap, accessTypeFormSchema, type Access, type NamesiloConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -27,7 +27,7 @@ const AccessNamesiloForm = ({ data, op, onAfterReq }: AccessNamesiloFormProps) =
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    apiKey: z
      .string()
      .min(1, "access.authorization.form.namesilo_api_key.placeholder")
@@ -54,7 +54,7 @@ const AccessNamesiloForm = ({ data, op, onAfterReq }: AccessNamesiloFormProps) =
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        apiKey: data.apiKey,
      },
--- a/ui/src/components/certimate/AccessPdnsForm.tsx
+++ b/ui/src/components/certimate/AccessPdnsForm.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { PbErrorData } from "@/domain/base";
-import { Access, PdnsConfig, accessFormType, getUsageByConfigType } from "@/domain/access";
+import { accessProvidersMap, accessTypeFormSchema, type Access, type PdnsConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -27,7 +27,7 @@ const AccessPdnsForm = ({ data, op, onAfterReq }: AccessPdnsFormProps) => {
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    apiUrl: z.string().url("common.errmsg.url_invalid"),
    apiKey: z
      .string()
@@ -57,7 +57,7 @@ const AccessPdnsForm = ({ data, op, onAfterReq }: AccessPdnsFormProps) => {
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        apiUrl: data.apiUrl,
        apiKey: data.apiKey,
--- a/ui/src/components/certimate/AccessQiniuForm.tsx
+++ b/ui/src/components/certimate/AccessQiniuForm.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { PbErrorData } from "@/domain/base";
-import { Access, accessFormType, getUsageByConfigType, QiniuConfig } from "@/domain/access";
+import { accessProvidersMap, accessTypeFormSchema, type Access, type QiniuConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -27,7 +27,7 @@ const AccessQiniuForm = ({ data, op, onAfterReq }: AccessQiniuFormProps) => {
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    accessKey: z.string().min(1, "access.authorization.form.access_key.placeholder").max(64),
    secretKey: z.string().min(1, "access.authorization.form.secret_key.placeholder").max(64),
  });
@@ -54,7 +54,7 @@ const AccessQiniuForm = ({ data, op, onAfterReq }: AccessQiniuFormProps) => {
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        accessKey: data.accessKey,
        secretKey: data.secretKey,
--- a/ui/src/components/certimate/AccessSSHForm.tsx
+++ b/ui/src/components/certimate/AccessSSHForm.tsx
@@ -6,7 +6,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Plus } from "lucide-react";
 import { ClientResponseError } from "pocketbase";

-import { Access, accessFormType, getUsageByConfigType, SSHConfig } from "@/domain/access";
 import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
@@ -15,6 +14,7 @@ import AccessGroupEdit from "./AccessGroupEdit";
 import { readFileContent } from "@/lib/file";
 import { cn } from "@/lib/utils";
 import { PbErrorData } from "@/domain/base";
+import { accessProvidersMap, accessTypeFormSchema, type Access, type SSHConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { updateById } from "@/repository/access_group";
 import { useConfigContext } from "@/providers/config";
@@ -50,7 +50,7 @@ const AccessSSHForm = ({ data, op, onAfterReq }: AccessSSHFormProps) => {
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    host: z.string().refine(
      (str) => {
        return ipReg.test(str) || domainReg.test(str);
@@ -119,7 +119,7 @@ const AccessSSHForm = ({ data, op, onAfterReq }: AccessSSHFormProps) => {
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      group: group,
      config: {
        host: data.host,
--- a/ui/src/components/certimate/AccessTencentForm.tsx
+++ b/ui/src/components/certimate/AccessTencentForm.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { PbErrorData } from "@/domain/base";
-import { Access, accessFormType, getUsageByConfigType, TencentConfig } from "@/domain/access";
+import { accessProvidersMap, accessTypeFormSchema, type Access, type TencentConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -27,7 +27,7 @@ const AccessTencentForm = ({ data, op, onAfterReq }: AccessTencentFormProps) =>
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    secretId: z
      .string()
      .min(1, "access.authorization.form.secret_id.placeholder")
@@ -60,7 +60,7 @@ const AccessTencentForm = ({ data, op, onAfterReq }: AccessTencentFormProps) =>
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        secretId: data.secretId,
        secretKey: data.secretKey,
--- a/ui/src/components/certimate/AccessWebhookForm.tsx
+++ b/ui/src/components/certimate/AccessWebhookForm.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { PbErrorData } from "@/domain/base";
-import { Access, accessFormType, getUsageByConfigType, WebhookConfig } from "@/domain/access";
+import { Access, accessProvidersMap, accessTypeFormSchema, WebhookConfig } from "@/domain/access";
 import { save } from "@/repository/access";
 import { useConfigContext } from "@/providers/config";

@@ -27,7 +27,7 @@ const AccessWebhookForm = ({ data, op, onAfterReq }: AccessWebhookFormProps) =>
      .string()
      .min(1, "access.authorization.form.name.placeholder")
      .max(64, t("common.errmsg.string_max", { max: 64 })),
-    configType: accessFormType,
+    configType: accessTypeFormSchema,
    url: z.string().url("common.errmsg.url_invalid"),
  });

@@ -51,7 +51,7 @@ const AccessWebhookForm = ({ data, op, onAfterReq }: AccessWebhookFormProps) =>
      id: data.id as string,
      name: data.name,
      configType: data.configType,
-      usage: getUsageByConfigType(data.configType),
+      usage: accessProvidersMap.get(data.configType)!.usage,
      config: {
        url: data.url,
      },
--- a/ui/src/components/certimate/DeployList.tsx
+++ b/ui/src/components/certimate/DeployList.tsx
@@ -16,8 +16,8 @@ import { Textarea } from "@/components/ui/textarea";
 import AccessEditDialog from "./AccessEditDialog";
 import KVList from "./KVList";
 import { DeployConfig, KVType, targetTypeKeys, targetTypeMap } from "@/domain/domain";
-import { accessTypeMap } from "@/domain/access";
-import { useConfig } from "@/providers/config";
+import { accessProvidersMap } from "@/domain/access";
+import { useConfigContext } from "@/providers/config";

 type DeployEditContextProps = {
  deploy: DeployConfig;
@@ -32,6 +32,68 @@ export const useDeployEditContext = () => {
  return useContext(DeployEditContext);
 };

+type DeployItemProps = {
+  item: DeployConfig;
+  onDelete: () => void;
+  onSave: (deploy: DeployConfig) => void;
+};
+
+const DeployItem = ({ item, onDelete, onSave }: DeployItemProps) => {
+  const {
+    config: { accesses },
+  } = useConfigContext();
+  const { t } = useTranslation();
+
+  const access = accesses.find((access) => access.id === item.access);
+
+  const getTypeIcon = () => {
+    if (!access) {
+      return "";
+    }
+
+    return accessProvidersMap.get(access.configType)?.icon || "";
+  };
+
+  const getTypeName = () => {
+    if (!access) {
+      return "";
+    }
+
+    return t(accessProvidersMap.get(access.configType)?.name || "");
+  };
+
+  return (
+    <div className="flex justify-between text-sm p-3 items-center text-stone-700 dark:text-stone-200">
+      <div className="flex space-x-2 items-center">
+        <div>
+          <img src={getTypeIcon()} className="w-9"></img>
+        </div>
+        <div className="text-stone-600 flex-col flex space-y-0 dark:text-stone-200">
+          <div>{getTypeName()}</div>
+          <div>{access?.name}</div>
+        </div>
+      </div>
+      <div className="flex space-x-2">
+        <DeployEditDialog
+          trigger={<EditIcon size={16} className="cursor-pointer" />}
+          deployConfig={item}
+          onSave={(deploy: DeployConfig) => {
+            onSave(deploy);
+          }}
+        />
+
+        <Trash2
+          size={16}
+          className="cursor-pointer"
+          onClick={() => {
+            onDelete();
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
 type DeployListProps = {
  deploys: DeployConfig[];
  onChange: (deploys: DeployConfig[]) => void;
@@ -129,80 +191,6 @@ const DeployList = ({ deploys, onChange }: DeployListProps) => {

 export default DeployList;

-type DeployItemProps = {
-  item: DeployConfig;
-  onDelete: () => void;
-  onSave: (deploy: DeployConfig) => void;
-};
-
-const DeployItem = ({ item, onDelete, onSave }: DeployItemProps) => {
-  const {
-    config: { accesses },
-  } = useConfig();
-  const { t } = useTranslation();
-
-  const access = accesses.find((access) => access.id === item.access);
-
-  const getTypeIcon = () => {
-    if (!access) {
-      return "";
-    }
-
-    const accessType = accessTypeMap.get(access.configType);
-
-    if (accessType) {
-      return accessType[1];
-    }
-
-    return "";
-  };
-
-  const getTypeName = () => {
-    if (!access) {
-      return "";
-    }
-
-    const accessType = targetTypeMap.get(item.type);
-
-    if (accessType) {
-      return t(accessType[0]);
-    }
-
-    return "";
-  };
-
-  return (
-    <div className="flex justify-between text-sm p-3 items-center text-stone-700 dark:text-stone-200">
-      <div className="flex space-x-2 items-center">
-        <div>
-          <img src={getTypeIcon()} className="w-9"></img>
-        </div>
-        <div className="text-stone-600 flex-col flex space-y-0 dark:text-stone-200">
-          <div>{getTypeName()}</div>
-          <div>{access?.name}</div>
-        </div>
-      </div>
-      <div className="flex space-x-2">
-        <DeployEditDialog
-          trigger={<EditIcon size={16} className="cursor-pointer" />}
-          deployConfig={item}
-          onSave={(deploy: DeployConfig) => {
-            onSave(deploy);
-          }}
-        />
-
-        <Trash2
-          size={16}
-          className="cursor-pointer"
-          onClick={() => {
-            onDelete();
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
 type DeployEditDialogProps = {
  trigger: React.ReactNode;
  deployConfig?: DeployConfig;
@@ -212,7 +200,7 @@ type DeployEditDialogProps = {
 const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogProps) => {
  const {
    config: { accesses },
-  } = useConfig();
+  } = useConfigContext();

  const [deployType, setDeployType] = useState<TargetType>();

@@ -317,8 +305,8 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
    <DeployEditContext.Provider
      value={{
        deploy: locDeployConfig,
-        setDeploy: setDeploy,
        error: error,
+        setDeploy: setDeploy,
        setError: setError,
      }}
    >
@@ -391,7 +379,7 @@ const DeployEditDialog = ({ trigger, deployConfig, onSave }: DeployEditDialogPro
                  {targetAccesses.map((item) => (
                    <SelectItem key={item.id} value={item.id}>
                      <div className="flex items-center space-x-2">
-                        <img className="w-6" src={accessTypeMap.get(item.configType)?.[1]} />
+                        <img className="w-6" src={accessProvidersMap.get(item.configType)?.icon} />
                        <div>{item.name}</div>
                      </div>
                    </SelectItem>