refactor: clean code

2025-01-05 17:19:57 +08:00
parent dfc192cb68
commit e4c51aece4
18 changed files with 169 additions and 148 deletions
--- a/ui/src/components/DrawerForm.tsx
+++ b/ui/src/components/DrawerForm.tsx
@@ -46,7 +46,7 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
    trigger: "onOpenChange",
  });

-  const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });

  const {
    form: formInst,
@@ -66,7 +66,7 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
    },
  });
  const mergedFormProps = {
-    preserve: drawerProps?.destroyOnClose ? false : undefined,
+    clearOnDestroy: drawerProps?.destroyOnClose ? true : undefined,
    ...formProps,
    ...props,
  };
@@ -86,11 +86,18 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({

  return (
    <>
-      {triggerDom}
+      {triggerEl}

      <Drawer
+        afterOpenChange={(open) => {
+          if (!open && !mergedFormProps.preserve) {
+            formInst.resetFields();
+          }
+
+          drawerProps?.afterOpenChange?.(open);
+        }}
        footer={
-          <Space>
+          <Space className="w-full justify-end">
            <Button {...cancelButtonProps} onClick={handleCancelClick}>
              {cancelText || t("common.button.cancel")}
            </Button>
--- a/ui/src/components/ModalForm.tsx
+++ b/ui/src/components/ModalForm.tsx
@@ -57,7 +57,7 @@ const ModalForm = <T extends NonNullable<unknown> = any>({
    trigger: "onOpenChange",
  });

-  const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });

  const {
    form: formInst,
@@ -77,7 +77,7 @@ const ModalForm = <T extends NonNullable<unknown> = any>({
    },
  });
  const mergedFormProps = {
-    preserve: modalProps?.destroyOnClose ? false : undefined,
+    clearOnDestroy: modalProps?.destroyOnClose ? true : undefined,
    ...formProps,
    ...props,
  };
@@ -97,9 +97,16 @@ const ModalForm = <T extends NonNullable<unknown> = any>({

  return (
    <>
-      {triggerDom}
+      {triggerEl}

      <Modal
+        afterClose={() => {
+          if (!mergedFormProps.preserve) {
+            formInst.resetFields();
+          }
+
+          modalProps?.afterClose?.();
+        }}
        cancelButtonProps={cancelButtonProps}
        cancelText={cancelText}
        confirmLoading={formPending}
--- a/ui/src/components/access/AccessEditForm.tsx
+++ b/ui/src/components/access/AccessEditForm.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import { forwardRef, useImperativeHandle, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
@@ -64,11 +64,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
    initialValues: initialValues,
  });

-  const [fieldProvider, setFieldProvider] = useState(initialValues?.provider);
-  useEffect(() => {
-    setFieldProvider(initialValues?.provider);
-  }, [initialValues?.provider]);
-
+  const configProvider = Form.useWatch("provider", formInst);
  const [configFormInst] = Form.useForm();
  const configFormName = useAntdFormName({ form: configFormInst, name: "accessEditConfigForm" });
  const configFormComponent = useMemo(() => {
@@ -77,7 +73,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 (fieldProvider) {
+    switch (configProvider) {
      case ACCESS_PROVIDERS.ACMEHTTPREQ:
        return <AccessEditFormACMEHttpReqConfig {...configFormProps} />;
      case ACCESS_PROVIDERS.ALIYUN:
@@ -117,7 +113,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
      case ACCESS_PROVIDERS.WEBHOOK:
        return <AccessEditFormWebhookConfig {...configFormProps} />;
    }
-  }, [disabled, initialValues, fieldProvider, configFormInst, configFormName]);
+  }, [disabled, initialValues, configProvider, configFormInst, configFormName]);

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

  const handleFormChange = (_: unknown, values: AccessEditFormFieldValues) => {
-    if (values.provider !== fieldProvider) {
-      setFieldProvider(values.provider);
+    if (values.provider !== configProvider) {
+      formInst.setFieldValue("provider", values.provider);
    }

    onValuesChange?.(values);
@@ -153,7 +149,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
  return (
    <Form.Provider onFormChange={handleFormProviderChange}>
      <div className={className} style={style}>
-        <Form {...formProps} disabled={disabled} layout="vertical" onValuesChange={handleFormChange}>
+        <Form {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
          <Form.Item name="name" label={t("access.form.name.label")} rules={[formRule]}>
            <Input placeholder={t("access.form.name.placeholder")} />
          </Form.Item>
--- a/ui/src/components/access/AccessEditFormKubernetesConfig.tsx
+++ b/ui/src/components/access/AccessEditFormKubernetesConfig.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { flushSync } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons";
 import { useDeepCompareEffect } from "ahooks";
@@ -55,7 +54,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue
      setFieldKubeFileList([]);
    }

-    flushSync(() => onValuesChange?.(form.getFieldsValue(true)));
+    onValuesChange?.(form.getFieldsValue(true));
  };

  return (
--- a/ui/src/components/access/AccessEditFormSSHConfig.tsx
+++ b/ui/src/components/access/AccessEditFormSSHConfig.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { flushSync } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons";
 import { useDeepCompareEffect } from "ahooks";
@@ -33,8 +32,14 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
  const { t } = useTranslation();

  const formSchema = z.object({
-    host: z.string().refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
-    port: z.number().int().gte(1, t("common.errmsg.port_invalid")).lte(65535, t("common.errmsg.port_invalid")),
+    host: z
+      .string({ message: t("access.form.ssh_host.placeholder") })
+      .refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
+    port: z
+      .number({ message: t("access.form.ssh_port.placeholder") })
+      .int()
+      .gte(1, t("common.errmsg.port_invalid"))
+      .lte(65535, t("common.errmsg.port_invalid")),
    username: z
      .string()
      .min(1, "access.form.ssh_username.placeholder")
@@ -74,7 +79,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
      setFieldKeyFileList([]);
    }

-    flushSync(() => onValuesChange?.(form.getFieldsValue(true)));
+    onValuesChange?.(form.getFieldsValue(true));
  };

  return (
--- a/ui/src/components/access/AccessEditModal.tsx
+++ b/ui/src/components/access/AccessEditModal.tsx
@@ -34,7 +34,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, onSubmit, ...props }:
    trigger: "onOpenChange",
  });

-  const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });

  const formRef = useRef<AccessEditFormInstance>(null);
  const [formPending, setFormPending] = useState(false);
@@ -86,7 +86,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, onSubmit, ...props }:
    <>
      {NotificationContextHolder}

-      {triggerDom}
+      {triggerEl}

      <Modal
        afterClose={() => setOpen(false)}
--- a/ui/src/components/certificate/CertificateDetailDrawer.tsx
+++ b/ui/src/components/certificate/CertificateDetailDrawer.tsx
@@ -21,11 +21,11 @@ const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: Certifica
    trigger: "onOpenChange",
  });

-  const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });

  return (
    <>
-      {triggerDom}
+      {triggerEl}

      <Drawer
        afterOpenChange={setOpen}
@@ -34,7 +34,7 @@ const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: Certifica
        open={open}
        loading={loading}
        placement="right"
-        title={`certimate-${data?.id}`}
+        title={`Certificate #${data?.id}`}
        width={640}
        onClose={() => setOpen(false)}
      >
--- a/ui/src/components/notification/NotifyChannelEditForm.tsx
+++ b/ui/src/components/notification/NotifyChannelEditForm.tsx
@@ -80,7 +80,16 @@ const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyCh
    });

    return (
-      <Form {...formProps} className={className} style={style} form={formInst} disabled={disabled} layout="vertical" onValuesChange={handleFormChange}>
+      <Form
+        {...formProps}
+        className={className}
+        style={style}
+        form={formInst}
+        disabled={disabled}
+        layout="vertical"
+        scrollToFirstError
+        onValuesChange={handleFormChange}
+      >
        {formFieldsComponent}
      </Form>
    );
--- a/ui/src/components/provider/DeployProviderPicker.tsx
+++ b/ui/src/components/provider/DeployProviderPicker.tsx
@@ -1,6 +1,5 @@
 import { memo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDebounceEffect } from "ahooks";
 import { Avatar, Card, Col, Empty, Flex, Input, Row, Typography } from "antd";

 import Show from "@/components/Show";
@@ -15,25 +14,17 @@ export type DeployProviderPickerProps = {
 const DeployProviderPicker = ({ className, style, onSelect }: DeployProviderPickerProps) => {
  const { t } = useTranslation();

-  const allProviders = Array.from(deployProvidersMap.values());
-  const [providers, setProviders] = useState(allProviders);
  const [keyword, setKeyword] = useState<string>();
-  useDebounceEffect(
-    () => {
-      if (keyword) {
-        setProviders(
-          allProviders.filter((provider) => {
-            const value = keyword.toLowerCase();
-            return provider.type.toLowerCase().includes(value) || provider.name.toLowerCase().includes(value);
-          })
-        );
-      } else {
-        setProviders(allProviders);
-      }
-    },
-    [keyword],
-    { wait: 300 }
-  );
+
+  const providers = Array.from(deployProvidersMap.values());
+  const filteredProviders = providers.filter((provider) => {
+    if (keyword) {
+      const value = keyword.toLowerCase();
+      return provider.type.toLowerCase().includes(value) || provider.name.toLowerCase().includes(value);
+    }
+
+    return true;
+  });

  const handleProviderTypeSelect = (value: string) => {
    onSelect?.(value);
@@ -44,9 +35,9 @@ const DeployProviderPicker = ({ className, style, onSelect }: DeployProviderPick
      <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} />}>
+        <Show when={filteredProviders.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
          <Row gutter={[16, 16]}>
-            {providers.map((provider, index) => {
+            {filteredProviders.map((provider, index) => {
              return (
                <Col key={index} span={12}>
                  <Card
--- a/ui/src/components/workflow/WorkflowRunDetailDrawer.tsx
+++ b/ui/src/components/workflow/WorkflowRunDetailDrawer.tsx
@@ -24,13 +24,13 @@ const WorkflowRunDetailDrawer = ({ data, loading, trigger, ...props }: WorkflowR
    trigger: "onOpenChange",
  });

-  const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });

  return (
    <>
-      {triggerDom}
+      {triggerEl}

-      <Drawer destroyOnClose open={open} loading={loading} placement="right" title={`runlog-${data?.id}`} width={640} onClose={() => setOpen(false)}>
+      <Drawer destroyOnClose open={open} loading={loading} placement="right" title={`WorkflowRun #${data?.id}`} width={640} onClose={() => setOpen(false)}>
        <Show when={!!data}>
          <Show when={data!.status === WORKFLOW_RUN_STATUSES.SUCCEEDED}>
            <Alert showIcon type="success" message={<Typography.Text type="success">{t("workflow_run.props.status.succeeded")}</Typography.Text>} />