fix: anti double submit in form

src/pages/model-routes/components/add-route-modal.tsx

@@ -1,4 +1,5 @@
 import { PageActionType } from '@/config/types';
+import useSubmitLock from '@/hooks/use-submit-lock';
 import { AlertBlockInfo, FormDrawer, ModalFooter } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import React, { useRef } from 'react';
@@ -26,15 +27,18 @@ const AddProvider: React.FC<AddModalProps> = ({
   const intl = useIntl();
   const [isChanged, setIsChanged] = React.useState(false);
   const form = useRef<any>(null);
+  const { loading, guard, run, release } = useSubmitLock();
 
   const handleSubmit = () => {
-    form.current?.submit();
+    guard(() => form.current?.submit());
   };
 
   const onFinish = async (data: FormData) => {
-    onOk({
-      ...data
-    });
+    await run(() =>
+      onOk({
+        ...data
+      })
+    );
   };
 
   const handleCancel = () => {
@@ -63,6 +67,7 @@ const AddProvider: React.FC<AddModalProps> = ({
           <ModalFooter
             onOk={handleSubmit}
             onCancel={onCancel}
+            loading={loading}
             styles={{
               wrapper: {
                 paddingTop: 16
@@ -78,6 +83,7 @@ const AddProvider: React.FC<AddModalProps> = ({
         realAction={realAction}
         currentData={currentData}
         onFinish={onFinish}
+        onFinishFailed={release}
         open={open}
         onFallbackChange={(changed: boolean) => {
           setIsChanged(changed);

src/pages/model-routes/forms/index.tsx

@@ -65,6 +65,7 @@ interface ProviderFormProps {
     routeTargets?: RouteTargetFormItem[];
   }; // Used when action is EDIT
   onFinish: (values: FormData) => Promise<void>;
+  onFinishFailed?: (errorInfo: any) => void;
   onFallbackChange?: (changed: boolean) => void;
 }
 
@@ -86,8 +87,15 @@ const requiredFields = {
 
 const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
   const intl = useIntl();
-  const { action, realAction, currentData, open, onFinish, onFallbackChange } =
-    props;
+  const {
+    action,
+    realAction,
+    currentData,
+    open,
+    onFinish,
+    onFinishFailed,
+    onFallbackChange
+  } = props;
   const { getScrollElementScrollableHeight } = useWrapperContext();
   const [form] = Form.useForm();
   const scrollTabsRef = useRef<any>(null);
@@ -238,6 +246,11 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
     updateActiveKey
   });
 
+  const handleFinishFailed = (errorInfo: any) => {
+    handleOnFinishFailed(errorInfo);
+    onFinishFailed?.(errorInfo);
+  };
+
   useImperativeHandle(ref, () => ({
     submit: () => {
       form.submit();
@@ -266,7 +279,7 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
         <Form
           form={form}
           onFinish={handleOnFinish}
-          onFinishFailed={handleOnFinishFailed}
+          onFinishFailed={handleFinishFailed}
           initialValues={{
             categories: [modelCategoriesMap.llm],
             meta: {}