feat: rename configType/providerType to provider

2025-01-03 22:20:34 +08:00
parent 849e065bb2
commit e695c8ee5c
20 changed files with 192 additions and 87 deletions
--- a/ui/src/components/access/AccessEditForm.tsx
+++ b/ui/src/components/access/AccessEditForm.tsx
@@ -7,7 +7,7 @@ import { z } from "zod";

 import AccessProviderSelect from "@/components/provider/AccessProviderSelect";
 import { type AccessModel } from "@/domain/access";
-import { ACCESS_PROVIDERS } from "@/domain/provider";
+import { ACCESS_PROVIDERS, accessProvidersMap } from "@/domain/provider";
 import { useAntdForm } from "@/hooks";

 import AccessEditFormACMEHttpReqConfig from "./AccessEditFormACMEHttpReqConfig";
@@ -57,7 +57,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
      .min(1, t("access.form.name.placeholder"))
      .max(64, t("common.errmsg.string_max", { max: 64 }))
      .trim(),
-    configType: z.nativeEnum(ACCESS_PROVIDERS, { message: t("access.form.type.placeholder") }),
+    provider: z.nativeEnum(ACCESS_PROVIDERS, { message: t("access.form.provider.placeholder") }),
    config: z.any(),
  });
  const formRule = createSchemaFieldRule(formSchema);
@@ -65,10 +65,10 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
    initialValues: initialValues,
  });

-  const [configType, setConfigType] = useState(initialValues?.configType);
+  const [fieldProvider, setFieldProvider] = useState(initialValues?.provider);
  useEffect(() => {
-    setConfigType(initialValues?.configType);
-  }, [initialValues?.configType]);
+    setFieldProvider(initialValues?.provider);
+  }, [initialValues?.provider]);

  const [configFormInst] = Form.useForm();
  const configFormName = useCreation(() => `accessEditForm_config${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, []);
@@ -78,7 +78,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
      NOTICE: If you add new child component, please keep ASCII order.
     */
    const configFormProps = { form: configFormInst, formName: configFormName, disabled: disabled, initialValues: initialValues?.config };
-    switch (configType) {
+    switch (fieldProvider) {
      case ACCESS_PROVIDERS.ACMEHTTPREQ:
        return <AccessEditFormACMEHttpReqConfig {...configFormProps} />;
      case ACCESS_PROVIDERS.ALIYUN:
@@ -118,7 +118,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
      case ACCESS_PROVIDERS.WEBHOOK:
        return <AccessEditFormWebhookConfig {...configFormProps} />;
    }
-  }, [disabled, initialValues, configType, configFormInst, configFormName]);
+  }, [disabled, initialValues, fieldProvider, configFormInst, configFormName]);

  const handleFormProviderChange = (name: string) => {
    if (name === configFormName) {
@@ -128,8 +128,8 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
  };

  const handleFormChange = (_: unknown, values: AccessEditFormFieldValues) => {
-    if (values.configType !== configType) {
-      setConfigType(values.configType);
+    if (values.provider !== fieldProvider) {
+      setFieldProvider(values.provider);
    }

    onValuesChange?.(values);
@@ -160,12 +160,12 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
          </Form.Item>

          <Form.Item
-            name="configType"
-            label={t("access.form.type.label")}
+            name="provider"
+            label={t("access.form.provider.label")}
            rules={[formRule]}
-            tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.type.tooltip") }}></span>}
+            tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.provider.tooltip") }}></span>}
          >
-            <AccessProviderSelect disabled={preset !== "add"} placeholder={t("access.form.type.placeholder")} showSearch={!disabled} />
+            <AccessProviderSelect disabled={preset !== "add"} placeholder={t("access.form.provider.placeholder")} showSearch={!disabled} />
          </Form.Item>
        </Form>

--- a/ui/src/components/access/AccessEditModal.tsx
+++ b/ui/src/components/access/AccessEditModal.tsx
@@ -4,6 +4,7 @@ import { useControllableValue } from "ahooks";
 import { Modal, notification } from "antd";

 import { type AccessModel } from "@/domain/access";
+import { accessProvidersMap } from "@/domain/provider";
 import { useTriggerElement, useZustandShallowSelector } from "@/hooks";
 import { useAccessesStore } from "@/stores/access";
 import { getErrMsg } from "@/utils/error";
@@ -48,24 +49,25 @@ const AccessEditModal = ({ data, loading, trigger, preset, onSubmit, ...props }:
    }

    try {
-      let res: AccessModel;
+      let temp: AccessModel = formRef.current!.getFieldsValue();
+      temp.usage = accessProvidersMap.get(temp.provider)!.usage;
      if (preset === "add") {
        if (data?.id) {
          throw "Invalid props: `data`";
        }

-        res = await createAccess(formRef.current!.getFieldsValue() as AccessModel);
+        temp = await createAccess(temp);
      } else if (preset === "edit") {
        if (!data?.id) {
          throw "Invalid props: `data`";
        }

-        res = await updateAccess({ ...data, ...formRef.current!.getFieldsValue() } as AccessModel);
+        temp = await updateAccess({ ...data, ...temp });
      } else {
        throw "Invalid props: `preset`";
      }

-      onSubmit?.(res);
+      onSubmit?.(temp);
      setOpen(false);
    } catch (err) {
      notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
--- a/ui/src/components/access/AccessSelect.tsx
+++ b/ui/src/components/access/AccessSelect.tsx
@@ -45,7 +45,7 @@ const AccessSelect = ({ filter, ...props }: AccessTypeSelectProps) => {
      );
    }

-    const provider = accessProvidersMap.get(access.configType);
+    const provider = accessProvidersMap.get(access.provider);
    return (
      <Space className="max-w-full grow truncate" size={4}>
        <Avatar src={provider?.icon} size="small" />
--- a/ui/src/components/provider/DeployProviderPicker.tsx
+++ b/ui/src/components/provider/DeployProviderPicker.tsx
@@ -41,7 +41,7 @@ const DeployProviderPicker = ({ className, style, onSelect }: DeployProviderPick

  return (
    <div className={className} style={style}>
-      <Input.Search placeholder={t("workflow_node.deploy.search.provider_type.placeholder")} onChange={(e) => setKeyword(e.target.value.trim())} />
+      <Input.Search placeholder={t("workflow_node.deploy.search.provider.placeholder")} onChange={(e) => setKeyword(e.target.value.trim())} />

      <div className="mt-4">
        <Show when={providers.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
--- a/ui/src/components/workflow/WorkflowElement.tsx
+++ b/ui/src/components/workflow/WorkflowElement.tsx
@@ -52,7 +52,7 @@ const WorkflowElement = ({ node }: NodeProps) => {
      }

      case WorkflowNodeType.Deploy: {
-        const provider = deployProvidersMap.get(node.config?.providerType as string);
+        const provider = deployProvidersMap.get(node.config?.provider as string);
        return (
          <Space>
            <Avatar src={provider?.icon} size="small" />
--- a/ui/src/components/workflow/node/ApplyNodeForm.tsx
+++ b/ui/src/components/workflow/node/ApplyNodeForm.tsx
@@ -163,7 +163,7 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
                  </Button>
                }
                onSubmit={(record) => {
-                  const provider = accessProvidersMap.get(record.configType);
+                  const provider = accessProvidersMap.get(record.provider);
                  if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage) {
                    formInst.setFieldValue("access", record.id);
                  }
@@ -176,7 +176,7 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
          <AccessSelect
            placeholder={t("workflow_node.apply.form.access.placeholder")}
            filter={(record) => {
-              const provider = accessProvidersMap.get(record.configType);
+              const provider = accessProvidersMap.get(record.provider);
              return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
            }}
          />
--- a/ui/src/components/workflow/node/DeployNodeForm.tsx
+++ b/ui/src/components/workflow/node/DeployNodeForm.tsx
@@ -55,9 +55,7 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
  const { hidePanel } = usePanel();

  const formSchema = z.object({
-    providerType: z
-      .string({ message: t("workflow_node.deploy.form.provider_type.placeholder") })
-      .nonempty(t("workflow_node.deploy.form.provider_type.placeholder")),
+    provider: z.string({ message: t("workflow_node.deploy.form.provider.placeholder") }).nonempty(t("workflow_node.deploy.form.provider.placeholder")),
    access: z
      .string({ message: t("workflow_node.deploy.form.provider_access.placeholder") })
      .nonempty(t("workflow_node.deploy.form.provider_access.placeholder")),
@@ -88,14 +86,14 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
    setPreviousOutput(rs);
  }, [node, getWorkflowOuptutBeforeId]);

-  const fieldProviderType = Form.useWatch("providerType", { form: formInst, preserve: true });
+  const fieldProvider = Form.useWatch("provider", { form: formInst, preserve: true });

  const formFieldsComponent = useMemo(() => {
    /*
      注意：如果追加新的子组件，请保持以 ASCII 排序。
      NOTICE: If you add new child component, please keep ASCII order.
     */
-    switch (fieldProviderType) {
+    switch (fieldProvider) {
      case DEPLOY_PROVIDERS.ALIYUN_ALB:
        return <DeployNodeFormAliyunALBFields />;
      case DEPLOY_PROVIDERS.ALIYUN_CLB:
@@ -143,26 +141,26 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
      case DEPLOY_PROVIDERS.WEBHOOK:
        return <DeployNodeFormWebhookFields />;
    }
-  }, [fieldProviderType]);
+  }, [fieldProvider]);

-  const handleProviderTypePick = useCallback(
+  const handleProviderPick = useCallback(
    (value: string) => {
-      formInst.setFieldValue("providerType", value);
+      formInst.setFieldValue("provider", value);
    },
    [formInst]
  );

-  const handleProviderTypeSelect = (value: string) => {
-    if (fieldProviderType === value) return;
+  const handleProviderSelect = (value: string) => {
+    if (fieldProvider === value) return;

    // 切换部署目标时重置表单，避免其他部署目标的配置字段影响当前部署目标
-    if (node.config?.providerType === value) {
+    if (node.config?.provider === value) {
      formInst.resetFields();
    } else {
      const oldValues = formInst.getFieldsValue();
      const newValues: Record<string, unknown> = {};
      for (const key in oldValues) {
-        if (key === "providerType" || key === "access" || key === "certificate") {
+        if (key === "provider" || key === "access" || key === "certificate") {
          newValues[key] = oldValues[key];
        } else {
          newValues[key] = undefined;
@@ -170,7 +168,7 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
      }
      formInst.setFieldsValue(newValues);

-      if (deployProvidersMap.get(fieldProviderType)?.provider !== deployProvidersMap.get(value)?.provider) {
+      if (deployProvidersMap.get(fieldProvider)?.provider !== deployProvidersMap.get(value)?.provider) {
        formInst.setFieldValue("access", undefined);
      }
    }
@@ -178,14 +176,9 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {

  return (
    <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
-      <Show when={!!fieldProviderType} fallback={<DeployProviderPicker onSelect={handleProviderTypePick} />}>
-        <Form.Item name="providerType" label={t("workflow_node.deploy.form.provider_type.label")} rules={[formRule]}>
-          <DeployProviderSelect
-            allowClear
-            placeholder={t("workflow_node.deploy.form.provider_type.placeholder")}
-            showSearch
-            onSelect={handleProviderTypeSelect}
-          />
+      <Show when={!!fieldProvider} fallback={<DeployProviderPicker onSelect={handleProviderPick} />}>
+        <Form.Item name="provider" label={t("workflow_node.deploy.form.provider.label")} rules={[formRule]}>
+          <DeployProviderSelect allowClear placeholder={t("workflow_node.deploy.form.provider.placeholder")} showSearch onSelect={handleProviderSelect} />
        </Form.Item>

        <Form.Item className="mb-0">
@@ -201,7 +194,7 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
              </div>
              <div className="text-right">
                <AccessEditModal
-                  data={{ configType: deployProvidersMap.get(fieldProviderType!)?.provider }}
+                  data={{ provider: deployProvidersMap.get(fieldProvider!)?.provider }}
                  preset="add"
                  trigger={
                    <Button size="small" type="link">
@@ -210,7 +203,7 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
                    </Button>
                  }
                  onSubmit={(record) => {
-                    const provider = accessProvidersMap.get(record.configType);
+                    const provider = accessProvidersMap.get(record.provider);
                    if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) {
                      formInst.setFieldValue("access", record.id);
                    }
@@ -223,11 +216,11 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
            <AccessSelect
              placeholder={t("workflow_node.deploy.form.provider_access.placeholder")}
              filter={(record) => {
-                if (fieldProviderType) {
-                  return deployProvidersMap.get(fieldProviderType)?.provider === record.configType;
+                if (fieldProvider) {
+                  return deployProvidersMap.get(fieldProvider)?.provider === record.provider;
                }

-                const provider = accessProvidersMap.get(record.configType);
+                const provider = accessProvidersMap.get(record.provider);
                return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
              }}
            />