fix(ui): wrong form initial values

ui/src/components/access/AccessEditForm.tsx

@@ -1,6 +1,5 @@
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useCreation } from "ahooks";
 import { Form, type FormInstance, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
@@ -8,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 { useAntdForm } from "@/hooks";
+import { useAntdForm, useAntdFormName } from "@/hooks";
 
 import AccessEditFormACMEHttpReqConfig from "./AccessEditFormACMEHttpReqConfig";
 import AccessEditFormAWSConfig from "./AccessEditFormAWSConfig";
@@ -71,7 +70,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
   }, [initialValues?.provider]);
 
   const [configFormInst] = Form.useForm();
-  const configFormName = useCreation(() => `accessEditForm_config${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, []);
+  const configFormName = useAntdFormName({ form: configFormInst, name: "accessEditConfigForm" });
   const configFormComponent = useMemo(() => {
     /*
       注意：如果追加新的子组件，请保持以 ASCII 排序。

ui/src/components/notification/NotifyChannelEditForm.tsx

@@ -1,9 +1,8 @@
 import { forwardRef, useImperativeHandle, useMemo } from "react";
-import { useCreation } from "ahooks";
 import { Form, type FormInstance } from "antd";
 
 import { NOTIFY_CHANNELS, type NotifyChannelsSettingsContent } from "@/domain/settings";
-import { useAntdForm } from "@/hooks";
+import { useAntdForm, useAntdFormName } from "@/hooks";
 
 import NotifyChannelEditFormBarkFields from "./NotifyChannelEditFormBarkFields";
 import NotifyChannelEditFormDingTalkFields from "./NotifyChannelEditFormDingTalkFields";
@@ -35,8 +34,8 @@ const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyCh
   ({ className, style, channel, disabled, initialValues, onValuesChange }, ref) => {
     const { form: formInst, formProps } = useAntdForm({
       initialValues: initialValues,
+      name: "notifyChannelEditForm",
     });
-    const formName = useCreation(() => `notifyChannelEditForm_${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, []);
     const formFieldsComponent = useMemo(() => {
       /*
         注意：如果追加新的子组件，请保持以 ASCII 排序。
@@ -81,16 +80,7 @@ const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyCh
     });
 
     return (
-      <Form
+      <Form {...formProps} className={className} style={style} form={formInst} disabled={disabled} layout="vertical" onValuesChange={handleFormChange}>
-        {...formProps}
-        className={className}
-        style={style}
-        form={formInst}
-        disabled={disabled}
-        name={formName}
-        layout="vertical"
-        onValuesChange={handleFormChange}
-      >
         {formFieldsComponent}
       </Form>
     );

ui/src/components/workflow/node/ApplyNodeForm.tsx

@@ -52,7 +52,9 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
     providerAccessId: z
       .string({ message: t("workflow_node.apply.form.provider_access.placeholder") })
       .min(1, t("workflow_node.apply.form.provider_access.placeholder")),
-    keyAlgorithm: z.string().nullish(),
+    keyAlgorithm: z
+      .string({ message: t("workflow_node.apply.form.key_algorithm.placeholder") })
+      .nonempty(t("workflow_node.apply.form.key_algorithm.placeholder")),
     nameservers: z
       .string()
       .nullish()
@@ -76,6 +78,7 @@ const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
     formPending,
     formProps,
   } = useAntdForm<z.infer<typeof formSchema>>({
+    name: "workflowApplyNodeForm",
     initialValues: (node?.config as WorkflowNodeConfigForApply) ?? initFormModel(),
     onSubmit: async (values) => {
       await formInst.validateFields();
@@ -305,7 +308,7 @@ const FormFieldEmailSelect = ({
 
   const handleSearch = (text: string) => {
     const temp = emailsToOptions();
-    if (text) {
+    if (text?.trim()) {
       if (temp.every((option) => option.label !== text)) {
         temp.unshift({ label: text, value: text });
       }

ui/src/components/workflow/node/DeployNodeForm.tsx

@@ -67,6 +67,7 @@ const DeployNodeForm = ({ node }: DeployFormProps) => {
     formPending,
     formProps,
   } = useAntdForm<z.infer<typeof formSchema>>({
+    name: "workflowDeployNodeForm",
     initialValues: (node?.config as WorkflowNodeConfigForDeploy) ?? initFormModel(),
     onSubmit: async (values) => {
       await formInst.validateFields();

ui/src/components/workflow/node/NotifyNodeForm.tsx

@@ -57,6 +57,7 @@ const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
     formPending,
     formProps,
   } = useAntdForm<z.infer<typeof formSchema>>({
+    name: "workflowNotifyNodeForm",
     initialValues: (node?.config as WorkflowNodeConfigForNotify) ?? initFormModel(),
     onSubmit: async (values) => {
       await formInst.validateFields();

ui/src/components/workflow/node/StartNodeForm.tsx

@@ -54,6 +54,7 @@ const StartNodeForm = ({ node }: StartNodeFormProps) => {
     formPending,
     formProps,
   } = useAntdForm<z.infer<typeof formSchema>>({
+    name: "workflowStartNodeForm",
     initialValues: (node?.config as WorkflowNodeConfigForStart) ?? initFormModel(),
     onSubmit: async (values) => {
       await formInst.validateFields();

ui/src/domain/workflow.ts

@@ -193,7 +193,6 @@ export const newNode = (nodeType: WorkflowNodeType, options: NewNodeOptions = {}
     case WorkflowNodeType.Apply:
     case WorkflowNodeType.Deploy:
       {
-        node.config = {} as Record<string, unknown>;
         node.inputs = workflowNodeTypeDefaultInputs.get(nodeType);
         node.outputs = workflowNodeTypeDefaultOutputs.get(nodeType);
       }

ui/src/hooks/index.ts

@@ -1,6 +1,7 @@
 import useAntdForm from "./useAntdForm";
+import useAntdFormName from "./useAntdFormName";
 import useBrowserTheme from "./useBrowserTheme";
 import useTriggerElement from "./useTriggerElement";
 import useZustandShallowSelector from "./useZustandShallowSelector";
 
-export { useAntdForm, useBrowserTheme, useTriggerElement, useZustandShallowSelector };
+export { useAntdForm, useAntdFormName, useBrowserTheme, useTriggerElement, useZustandShallowSelector };

ui/src/hooks/useAntdForm.ts

@@ -2,9 +2,12 @@
 import { useDeepCompareEffect } from "ahooks";
 import { Form, type FormInstance, type FormProps } from "antd";
 
+import useAntdFormName from "./useAntdFormName";
+
 export interface UseAntdFormOptions<T extends NonNullable<unknown> = any> {
   form?: FormInstance<T>;
   initialValues?: Partial<T> | (() => Partial<T> | Promise<Partial<T>>);
+  name?: string;
   onSubmit?: (values: T) => unknown;
 }
 
@@ -20,8 +23,9 @@ export interface UseAntdFormReturns<T extends NonNullable<unknown> = any> {
  * @param {UseAntdFormOptions} options
  * @returns {UseAntdFormReturns}
  */
-const useAntdForm = <T extends NonNullable<unknown> = any>({ initialValues, form, onSubmit }: UseAntdFormOptions<T>): UseAntdFormReturns<T> => {
+const useAntdForm = <T extends NonNullable<unknown> = any>({ form, initialValues, onSubmit, ...options }: UseAntdFormOptions<T>): UseAntdFormReturns<T> => {
   const formInst = form ?? Form["useForm"]()[0];
+  const formName = useAntdFormName({ form: formInst, name: options.name });
   const [formInitialValues, setFormInitialValues] = useState<Partial<T>>();
   const [formPending, setFormPending] = useState(false);
 
@@ -90,6 +94,7 @@ const useAntdForm = <T extends NonNullable<unknown> = any>({ initialValues, form
   const formProps: FormProps = {
     form: formInst,
     initialValues: formInitialValues,
+    name: options.name ? formName : undefined,
     onFinish,
   };
 

ui/src/hooks/useAntdFormName.ts

@@ -0,0 +1,14 @@
+import { useCreation } from "ahooks";
+import { type FormInstance } from "antd";
+
+export interface UseAntdFormNameOptions<T extends NonNullable<unknown> = any> {
+  form: FormInstance<T>;
+  name?: string;
+}
+
+const useAntdFormName = <T extends NonNullable<unknown> = any>(options: UseAntdFormNameOptions<T>) => {
+  const formName = useCreation(() => `${options.name}_${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, [options.name, options.form]);
+  return formName;
+};
+
+export default useAntdFormName;

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -43,7 +43,7 @@ const WorkflowDetail = () => {
     useZustandShallowSelector(["workflow", "initialized", "init", "destroy", "save", "setBaseInfo", "switchEnable"])
   );
   useEffect(() => {
-    // TODO: loading
+    // TODO: loading & error
     init(workflowId!);
 
     return () => {
@@ -64,7 +64,7 @@ const WorkflowDetail = () => {
     setAllowDiscard(!isRunning && hasReleased && hasChanges);
     setAllowRelease(!isRunning && hasChanges);
     setAllowRun(hasReleased);
-  }, [workflow, isRunning]);
+  }, [workflow.content, workflow.draft, workflow.hasDraft, isRunning]);
 
   const handleBaseInfoFormFinish = async (values: Pick<WorkflowModel, "name" | "description">) => {
     try {
@@ -141,11 +141,6 @@ const WorkflowDetail = () => {
   };
 
   const handleRunClick = () => {
-    if (!workflow.enabled) {
-      alert("TODO: 暂时只支持执行已启用的工作流");
-      return;
-    }
-
     const { promise, resolve, reject } = Promise.withResolvers();
     if (workflow.hasDraft) {
       modalApi.confirm({

ui/src/stores/contact/index.ts

@@ -30,7 +30,7 @@ export const useContactEmailsStore = create<ContactEmailsState>((set, get) => {
       try {
         set({ loading: true });
         settings = await fetcher;
-        set({ emails: settings.content.emails?.sort() ?? [], loadedAtOnce: true });
+        set({ emails: settings.content.emails?.filter((s) => !!s)?.sort() ?? [], loadedAtOnce: true });
       } finally {
         fetcher = null;
         set({ loading: false });