@dovetail-v2/refine 0.3.30-alpha.1 → 0.3.31

package/dist/components/Form/useReactHookForm.d.ts

@@ -32,5 +32,7 @@ export type UseFormProps<TQueryFnData extends BaseRecord = BaseRecord, TError ex
     transformInitValues?: (values: Record<string, unknown>) => DefaultValues<TVariables>;
     beforeSubmit?: (values: TVariables, setErrors: (errors: string[]) => void) => Promise<TVariables>;
     onBeforeSubmitError?: (errors: string[]) => void;
+    onSubmitStart?: () => void;
+    onSubmitAbort?: () => void;
 } & UseHookFormProps<TVariables, TContext>;
-export declare const useForm: <TQueryFnData extends BaseRecord = BaseRecord, TError extends HttpError = HttpError, TVariables extends FieldValues = FieldValues, TContext extends object = object, TData extends BaseRecord = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError>({ refineCoreProps, warnWhenUnsavedChanges: warnWhenUnsavedChangesProp, disableServerSideValidation: disableServerSideValidationProp, transformApplyValues, transformInitValues, beforeSubmit, onBeforeSubmitError, ...rest }?: UseFormProps<TQueryFnData, TError, TVariables, TContext, TData, TResponse, TResponseError>) => UseFormReturnType<TQueryFnData, TError, TVariables, TContext, TData, TResponse, TResponseError>;
+export declare const useForm: <TQueryFnData extends BaseRecord = BaseRecord, TError extends HttpError = HttpError, TVariables extends FieldValues = FieldValues, TContext extends object = object, TData extends BaseRecord = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError>({ refineCoreProps, warnWhenUnsavedChanges: warnWhenUnsavedChangesProp, disableServerSideValidation: disableServerSideValidationProp, transformApplyValues, transformInitValues, beforeSubmit, onBeforeSubmitError, onSubmitStart, onSubmitAbort, ...rest }?: UseFormProps<TQueryFnData, TError, TVariables, TContext, TData, TResponse, TResponseError>) => UseFormReturnType<TQueryFnData, TError, TVariables, TContext, TData, TResponse, TResponseError>;

package/dist/components/Form/useRefineForm.d.ts

@@ -3,6 +3,8 @@ import { UseFormProps } from './useReactHookForm';
 interface UseRefineFormOptions {
     initialValues?: Record<string, unknown>;
     onBeforeSubmitError?: (errors: string[]) => void;
+    onSubmitStart?: () => void;
+    onSubmitAbort?: () => void;
 }
 export declare const useRefineForm: (props: {
     formConfig?: RefineFormConfig & CommonFormConfig;

package/dist/components/Form/useYamlForm.d.ts

@@ -29,6 +29,8 @@ export type UseFormProps<TQueryFnData extends BaseRecord = BaseRecord, TError ex
     transformApplyValues?: (values: Unstructured) => Unstructured;
     beforeSubmit?: (values: Unstructured, setErrors: (errors: string[]) => void) => Promise<Unstructured>;
     onBeforeSubmitError?: (errors: string[]) => void;
+    onSubmitStart?: () => void;
+    onSubmitAbort?: () => void;
     rules?: YamlFormRule[];
 };
 export type UseFormReturnType<TQueryFnData extends BaseRecord = BaseRecord, TError extends HttpError = HttpError, TVariables extends object = object, TData extends BaseRecord = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError> = UseFormReturnTypeCore<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError> & {
@@ -53,5 +55,5 @@ declare const useYamlForm: <TQueryFnData extends Unstructured = Unstructured & {
     [prop: string]: unknown;
 } = {
     [prop: string]: unknown;
-}, TData extends Unstructured = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError>({ action: actionFromProps, resource, onMutationSuccess: onMutationSuccessProp, onMutationError, submitOnEnter, warnWhenUnsavedChanges: warnWhenUnsavedChangesProp, redirect, successNotification, errorNotification, meta, metaData, queryMeta, mutationMeta, liveMode, liveParams, mutationMode, dataProviderName, onLiveEvent, invalidates, undoableTimeout, queryOptions, createMutationOptions, updateMutationOptions, id: idFromProps, overtimeOptions, editorOptions, initialValuesForCreate, initialValuesForEdit, transformInitValues, transformApplyValues, beforeSubmit, onBeforeSubmitError, rules, }?: UseFormProps<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>) => UseFormReturnType<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>;
+}, TData extends Unstructured = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError>({ action: actionFromProps, resource, onMutationSuccess: onMutationSuccessProp, onMutationError, submitOnEnter, warnWhenUnsavedChanges: warnWhenUnsavedChangesProp, redirect, successNotification, errorNotification, meta, metaData, queryMeta, mutationMeta, liveMode, liveParams, mutationMode, dataProviderName, onLiveEvent, invalidates, undoableTimeout, queryOptions, createMutationOptions, updateMutationOptions, id: idFromProps, overtimeOptions, editorOptions, initialValuesForCreate, initialValuesForEdit, transformInitValues, transformApplyValues, beforeSubmit, onBeforeSubmitError, onSubmitStart, onSubmitAbort, rules, }?: UseFormProps<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>) => UseFormReturnType<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>;
 export default useYamlForm;

package/dist/refine.cjs

@@ -11248,6 +11248,8 @@ const useYamlForm = ({
   transformApplyValues,
   beforeSubmit,
   onBeforeSubmitError,
+  onSubmitStart,
+  onSubmitAbort,
   rules
 } = {}) => {
   var _a;
@@ -11281,6 +11283,7 @@ const useYamlForm = ({
     onMutationSuccess: onMutationSuccessProp ? onMutationSuccessProp : void 0,
     onMutationError: (error, ...restParams) => {
       var _a2;
+      onSubmitAbort == null ? void 0 : onSubmitAbort();
       const response = error.response;
       if (response && !(response == null ? void 0 : response.bodyUsed)) {
         (_a2 = response.json) == null ? void 0 : _a2.call(response).then((body) => {
@@ -11417,17 +11420,20 @@ const useYamlForm = ({
       onFinish: async (values) => {
         var _a2, _b;
         setBeforeSubmitErrors([]);
+        onSubmitStart == null ? void 0 : onSubmitStart();
         const errors = [
           !isYamlValid ? t2("dovetail.yaml_format_wrong") : "",
           !isSchemaValid ? t2("dovetail.yaml_value_wrong") : ""
         ].filter((error) => !!error);
         if (errors.length) {
+          onSubmitAbort == null ? void 0 : onSubmitAbort();
           setEditorErrors(errors);
           setRulesErrors([]);
           return;
         }
         const rulesErrors2 = await validateRules(((_a2 = editor.current) == null ? void 0 : _a2.getEditorValue()) || "");
         if (Object.keys(rulesErrors2).length) {
+          onSubmitAbort == null ? void 0 : onSubmitAbort();
           setRulesErrors(Object.values(rulesErrors2));
           return;
         }
@@ -11446,6 +11452,7 @@ const useYamlForm = ({
                 }
               });
               if (hasErrors) {
+                onSubmitAbort == null ? void 0 : onSubmitAbort();
                 return;
               }
               if (result !== void 0) {
@@ -11457,6 +11464,7 @@ const useYamlForm = ({
           }
           return onFinish(finalValues);
         } catch (error) {
+          onSubmitAbort == null ? void 0 : onSubmitAbort();
           if (error instanceof Error) {
             if (error.message === "expected a single document in the stream, but found more") {
               setEditorErrors([t2("dovetail.only_support_one_yaml")]);
@@ -11657,6 +11665,7 @@ function YamlFormContainer({
   const pushModal = eagle.usePushModal();
   const popModal = eagle.usePopModal();
   const hasShownExpiredRef = React.useRef(false);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
   const queryResult = core.useOne({
     resource: resourceConfig.name,
     id,
@@ -11665,18 +11674,19 @@ function YamlFormContainer({
   });
   const isExpired = useResourceVersionCheck({ queryResult });
   React.useEffect(() => {
-    if (isExpired && !hasShownExpiredRef.current) {
-      hasShownExpiredRef.current = true;
-      pushModal({
-        component: DataExpiredModal,
-        props: {
-          onAbandon: () => {
-            popModal();
-          }
-        }
-      });
+    if (!isExpired || isSubmitting || hasShownExpiredRef.current) {
+      return;
     }
-  }, [isExpired, pushModal, popModal]);
+    hasShownExpiredRef.current = true;
+    pushModal({
+      component: DataExpiredModal,
+      props: {
+        onAbandon: () => {
+          popModal();
+        }
+      }
+    });
+  }, [isExpired, isSubmitting, pushModal, popModal]);
   const { transformInitValues, transformApplyValues } = usePathMap({
     pathMap: formConfig == null ? void 0 : formConfig.pathMap,
     transformInitValues: formConfig == null ? void 0 : formConfig.transformInitValues,
@@ -11696,7 +11706,13 @@ function YamlFormContainer({
       action,
       isShowLayout: false,
       useFormProps: {
-        redirect: false
+        redirect: false,
+        onSubmitStart: () => {
+          setIsSubmitting(true);
+        },
+        onSubmitAbort: () => {
+          setIsSubmitting(false);
+        }
       },
       rules: void 0,
       onSaveButtonPropsChange,
@@ -13206,8 +13222,11 @@ function _KeyValueTableForm(props, ref) {
         validator: ({
           value: value22
         }) => {
-          if (!value22)
-            return t2("dovetail.key_empty_text");
+          if (!value22) {
+            return t2("dovetail.required_field", {
+              label: keyTitle || t2("dovetail.key")
+            });
+          }
           const validate2 = validateKey || validateLabelKey;
           const {
             isValid,
@@ -16879,6 +16898,8 @@ const useForm = ({
   transformInitValues,
   beforeSubmit,
   onBeforeSubmitError,
+  onSubmitStart,
+  onSubmitAbort,
   ...rest
 } = {}) => {
   const { options } = core.useRefineContext();
@@ -16999,6 +17020,7 @@ const useForm = ({
       loading: formLoading || isBeforeSubmitLoading,
       onClick: async (e2) => {
         setBeforeSubmitErrors([]);
+        onSubmitStart == null ? void 0 : onSubmitStart();
         handleSubmit(
           async (v) => {
             let finalValues = transformApplyValues ? transformApplyValues(v) : v;
@@ -17014,18 +17036,25 @@ const useForm = ({
                   }
                 });
                 if (hasErrors) {
+                  onSubmitAbort == null ? void 0 : onSubmitAbort();
                   return;
                 }
                 if (result !== void 0) {
                   finalValues = result;
                 }
+              } catch (error) {
+                onSubmitAbort == null ? void 0 : onSubmitAbort();
+                throw error;
               } finally {
                 setIsBeforeSubmitLoading(false);
               }
             }
             return onFinish(finalValues);
           },
-          () => false
+          () => {
+            onSubmitAbort == null ? void 0 : onSubmitAbort();
+            return false;
+          }
         )(e2);
       }
     };
@@ -17036,7 +17065,9 @@ const useForm = ({
     onFinish,
     transformApplyValues,
     beforeSubmit,
-    onBeforeSubmitError
+    onBeforeSubmitError,
+    onSubmitStart,
+    onSubmitAbort
   ]);
   return {
     ...useHookFormResult,
@@ -17088,6 +17119,8 @@ const useRefineForm = (props) => {
     transformInitValues,
     beforeSubmit: formConfig == null ? void 0 : formConfig.beforeSubmit,
     onBeforeSubmitError: options == null ? void 0 : options.onBeforeSubmitError,
+    onSubmitStart: options == null ? void 0 : options.onSubmitStart,
+    onSubmitAbort: options == null ? void 0 : options.onSubmitAbort,
     ...formConfig == null ? void 0 : formConfig.useFormProps
   });
   React.useEffect(() => {
@@ -17127,6 +17160,7 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
   const pushModal = eagle.usePushModal();
   const popModal = eagle.usePopModal();
   const hasShownExpiredRef = React.useRef(false);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
   const refineFormResult = useRefineForm({
     resourceConfig,
     id,
@@ -17135,6 +17169,7 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
         onSuccess == null ? void 0 : onSuccess(data2);
       },
       onMutationError() {
+        setIsSubmitting(false);
         onError == null ? void 0 : onError();
       },
       redirect: false,
@@ -17148,8 +17183,15 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
       ...options,
       onBeforeSubmitError: (errors) => {
         if (errors.length) {
+          setIsSubmitting(false);
           onError == null ? void 0 : onError();
         }
+      },
+      onSubmitStart: () => {
+        setIsSubmitting(true);
+      },
+      onSubmitAbort: () => {
+        setIsSubmitting(false);
       }
     }
   });
@@ -17157,18 +17199,19 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
     queryResult: refineFormResult.formResult.refineCore.queryResult
   });
   React.useEffect(() => {
-    if (isExpired && !hasShownExpiredRef.current) {
-      hasShownExpiredRef.current = true;
-      pushModal({
-        component: DataExpiredModal,
-        props: {
-          onAbandon: () => {
-            popModal();
-          }
-        }
-      });
+    if (!isExpired || isSubmitting || hasShownExpiredRef.current) {
+      return;
     }
-  }, [isExpired, pushModal, popModal]);
+    hasShownExpiredRef.current = true;
+    pushModal({
+      component: DataExpiredModal,
+      props: {
+        onAbandon: () => {
+          popModal();
+        }
+      }
+    });
+  }, [isExpired, isSubmitting, pushModal, popModal]);
   const fieldsConfig = useFieldsConfig(
     resourceConfig,
     { fields: formConfig == null ? void 0 : formConfig.fields },
@@ -17200,7 +17243,13 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
         action,
         isShowLayout: false,
         useFormProps: {
-          redirect: false
+          redirect: false,
+          onSubmitStart: () => {
+            setIsSubmitting(true);
+          },
+          onSubmitAbort: () => {
+            setIsSubmitting(false);
+          }
         },
         rules: fieldsConfig == null ? void 0 : fieldsConfig.filter(
           (config) => "isSkipValidationInYaml" in config && !config.isSkipValidationInYaml

package/dist/refine.js

@@ -11229,6 +11229,8 @@ const useYamlForm = ({
   transformApplyValues,
   beforeSubmit,
   onBeforeSubmitError,
+  onSubmitStart,
+  onSubmitAbort,
   rules
 } = {}) => {
   var _a;
@@ -11262,6 +11264,7 @@ const useYamlForm = ({
     onMutationSuccess: onMutationSuccessProp ? onMutationSuccessProp : void 0,
     onMutationError: (error, ...restParams) => {
       var _a2;
+      onSubmitAbort == null ? void 0 : onSubmitAbort();
       const response = error.response;
       if (response && !(response == null ? void 0 : response.bodyUsed)) {
         (_a2 = response.json) == null ? void 0 : _a2.call(response).then((body) => {
@@ -11398,17 +11401,20 @@ const useYamlForm = ({
       onFinish: async (values) => {
         var _a2, _b;
         setBeforeSubmitErrors([]);
+        onSubmitStart == null ? void 0 : onSubmitStart();
         const errors = [
           !isYamlValid ? t2("dovetail.yaml_format_wrong") : "",
           !isSchemaValid ? t2("dovetail.yaml_value_wrong") : ""
         ].filter((error) => !!error);
         if (errors.length) {
+          onSubmitAbort == null ? void 0 : onSubmitAbort();
           setEditorErrors(errors);
           setRulesErrors([]);
           return;
         }
         const rulesErrors2 = await validateRules(((_a2 = editor.current) == null ? void 0 : _a2.getEditorValue()) || "");
         if (Object.keys(rulesErrors2).length) {
+          onSubmitAbort == null ? void 0 : onSubmitAbort();
           setRulesErrors(Object.values(rulesErrors2));
           return;
         }
@@ -11427,6 +11433,7 @@ const useYamlForm = ({
                 }
               });
               if (hasErrors) {
+                onSubmitAbort == null ? void 0 : onSubmitAbort();
                 return;
               }
               if (result !== void 0) {
@@ -11438,6 +11445,7 @@ const useYamlForm = ({
           }
           return onFinish(finalValues);
         } catch (error) {
+          onSubmitAbort == null ? void 0 : onSubmitAbort();
           if (error instanceof Error) {
             if (error.message === "expected a single document in the stream, but found more") {
               setEditorErrors([t2("dovetail.only_support_one_yaml")]);
@@ -11638,6 +11646,7 @@ function YamlFormContainer({
   const pushModal = usePushModal();
   const popModal = usePopModal();
   const hasShownExpiredRef = useRef(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const queryResult = useOne({
     resource: resourceConfig.name,
     id,
@@ -11646,18 +11655,19 @@ function YamlFormContainer({
   });
   const isExpired = useResourceVersionCheck({ queryResult });
   useEffect(() => {
-    if (isExpired && !hasShownExpiredRef.current) {
-      hasShownExpiredRef.current = true;
-      pushModal({
-        component: DataExpiredModal,
-        props: {
-          onAbandon: () => {
-            popModal();
-          }
-        }
-      });
+    if (!isExpired || isSubmitting || hasShownExpiredRef.current) {
+      return;
     }
-  }, [isExpired, pushModal, popModal]);
+    hasShownExpiredRef.current = true;
+    pushModal({
+      component: DataExpiredModal,
+      props: {
+        onAbandon: () => {
+          popModal();
+        }
+      }
+    });
+  }, [isExpired, isSubmitting, pushModal, popModal]);
   const { transformInitValues, transformApplyValues } = usePathMap({
     pathMap: formConfig == null ? void 0 : formConfig.pathMap,
     transformInitValues: formConfig == null ? void 0 : formConfig.transformInitValues,
@@ -11677,7 +11687,13 @@ function YamlFormContainer({
       action,
       isShowLayout: false,
       useFormProps: {
-        redirect: false
+        redirect: false,
+        onSubmitStart: () => {
+          setIsSubmitting(true);
+        },
+        onSubmitAbort: () => {
+          setIsSubmitting(false);
+        }
       },
       rules: void 0,
       onSaveButtonPropsChange,
@@ -13187,8 +13203,11 @@ function _KeyValueTableForm(props, ref) {
         validator: ({
           value: value22
         }) => {
-          if (!value22)
-            return t2("dovetail.key_empty_text");
+          if (!value22) {
+            return t2("dovetail.required_field", {
+              label: keyTitle || t2("dovetail.key")
+            });
+          }
           const validate2 = validateKey || validateLabelKey;
           const {
             isValid,
@@ -16860,6 +16879,8 @@ const useForm = ({
   transformInitValues,
   beforeSubmit,
   onBeforeSubmitError,
+  onSubmitStart,
+  onSubmitAbort,
   ...rest
 } = {}) => {
   const { options } = useRefineContext();
@@ -16980,6 +17001,7 @@ const useForm = ({
       loading: formLoading || isBeforeSubmitLoading,
       onClick: async (e2) => {
         setBeforeSubmitErrors([]);
+        onSubmitStart == null ? void 0 : onSubmitStart();
         handleSubmit(
           async (v) => {
             let finalValues = transformApplyValues ? transformApplyValues(v) : v;
@@ -16995,18 +17017,25 @@ const useForm = ({
                   }
                 });
                 if (hasErrors) {
+                  onSubmitAbort == null ? void 0 : onSubmitAbort();
                   return;
                 }
                 if (result !== void 0) {
                   finalValues = result;
                 }
+              } catch (error) {
+                onSubmitAbort == null ? void 0 : onSubmitAbort();
+                throw error;
               } finally {
                 setIsBeforeSubmitLoading(false);
               }
             }
             return onFinish(finalValues);
           },
-          () => false
+          () => {
+            onSubmitAbort == null ? void 0 : onSubmitAbort();
+            return false;
+          }
         )(e2);
       }
     };
@@ -17017,7 +17046,9 @@ const useForm = ({
     onFinish,
     transformApplyValues,
     beforeSubmit,
-    onBeforeSubmitError
+    onBeforeSubmitError,
+    onSubmitStart,
+    onSubmitAbort
   ]);
   return {
     ...useHookFormResult,
@@ -17069,6 +17100,8 @@ const useRefineForm = (props) => {
     transformInitValues,
     beforeSubmit: formConfig == null ? void 0 : formConfig.beforeSubmit,
     onBeforeSubmitError: options == null ? void 0 : options.onBeforeSubmitError,
+    onSubmitStart: options == null ? void 0 : options.onSubmitStart,
+    onSubmitAbort: options == null ? void 0 : options.onSubmitAbort,
     ...formConfig == null ? void 0 : formConfig.useFormProps
   });
   useEffect(() => {
@@ -17108,6 +17141,7 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
   const pushModal = usePushModal();
   const popModal = usePopModal();
   const hasShownExpiredRef = useRef(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const refineFormResult = useRefineForm({
     resourceConfig,
     id,
@@ -17116,6 +17150,7 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
         onSuccess == null ? void 0 : onSuccess(data2);
       },
       onMutationError() {
+        setIsSubmitting(false);
         onError == null ? void 0 : onError();
       },
       redirect: false,
@@ -17129,8 +17164,15 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
       ...options,
       onBeforeSubmitError: (errors) => {
         if (errors.length) {
+          setIsSubmitting(false);
           onError == null ? void 0 : onError();
         }
+      },
+      onSubmitStart: () => {
+        setIsSubmitting(true);
+      },
+      onSubmitAbort: () => {
+        setIsSubmitting(false);
       }
     }
   });
@@ -17138,18 +17180,19 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
     queryResult: refineFormResult.formResult.refineCore.queryResult
   });
   useEffect(() => {
-    if (isExpired && !hasShownExpiredRef.current) {
-      hasShownExpiredRef.current = true;
-      pushModal({
-        component: DataExpiredModal,
-        props: {
-          onAbandon: () => {
-            popModal();
-          }
-        }
-      });
+    if (!isExpired || isSubmitting || hasShownExpiredRef.current) {
+      return;
     }
-  }, [isExpired, pushModal, popModal]);
+    hasShownExpiredRef.current = true;
+    pushModal({
+      component: DataExpiredModal,
+      props: {
+        onAbandon: () => {
+          popModal();
+        }
+      }
+    });
+  }, [isExpired, isSubmitting, pushModal, popModal]);
   const fieldsConfig = useFieldsConfig(
     resourceConfig,
     { fields: formConfig == null ? void 0 : formConfig.fields },
@@ -17181,7 +17224,13 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
         action,
         isShowLayout: false,
         useFormProps: {
-          redirect: false
+          redirect: false,
+          onSubmitStart: () => {
+            setIsSubmitting(true);
+          },
+          onSubmitAbort: () => {
+            setIsSubmitting(false);
+          }
         },
         rules: fieldsConfig == null ? void 0 : fieldsConfig.filter(
           (config) => "isSkipValidationInYaml" in config && !config.isSkipValidationInYaml

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dovetail-v2/refine",
-  "version": "0.3.30-alpha.1",
+  "version": "0.3.31",
   "type": "module",
   "files": [
     "dist",