@dovetail-v2/refine 0.3.33 → 0.3.35

package/dist/refine.cjs

@@ -641,6 +641,7 @@ const edit_form$1 = "Edit form";
 const data_expired$1 = "Data expired";
 const data_expired_body$1 = "The data in this form is no longer the latest version. To avoid saving errors, please discard this edit and reopen the form to edit again.";
 const data_expired_note$1 = "Your current entries will not be saved.";
+const resource_version_conflict$1 = "The data in this form is no longer the latest version. Please discard this edit and reopen the form to edit again.";
 const abandon_edit$1 = "Discard edit";
 const exit_yaml_tip$1 = "If you go back to the form, any changes made to the YAML file will be lost.";
 const value_optional$1 = "Value (optional)";
@@ -922,6 +923,7 @@ const dovetail$1 = {
   data_expired: data_expired$1,
   data_expired_body: data_expired_body$1,
   data_expired_note: data_expired_note$1,
+  resource_version_conflict: resource_version_conflict$1,
   abandon_edit: abandon_edit$1,
   exit_yaml_tip: exit_yaml_tip$1,
   value_optional: value_optional$1,
@@ -1205,6 +1207,7 @@ const edit_form = "编辑表单";
 const data_expired = "数据已过期";
 const data_expired_body = "当前表单中的数据已不是最新版。为避免保存失败，请放弃本次编辑，并重新打开表单进行编辑。";
 const data_expired_note = "当前已填写内容将不会保留。";
+const resource_version_conflict = "当前表单中的数据已不是最新版，请放弃本次编辑，并重新打开表单进行编辑。";
 const abandon_edit = "放弃编辑";
 const exit_yaml_tip = "返回编辑表单，不会保留对 YAML 文件做出的所有更改。";
 const form = "表单";
@@ -1485,6 +1488,7 @@ const dovetail = {
   data_expired,
   data_expired_body,
   data_expired_note,
+  resource_version_conflict,
   abandon_edit,
   exit_yaml_tip,
   form,
@@ -10708,26 +10712,6 @@ function usePathMap(options) {
     transformApplyValues
   };
 }
-const useResourceVersionCheck = ({
-  queryResult
-}) => {
-  var _a, _b, _c;
-  const initialResourceVersionRef = React.useRef();
-  const [isExpired, setIsExpired] = React.useState(false);
-  const currentResourceVersion = (_c = (_b = (_a = queryResult == null ? void 0 : queryResult.data) == null ? void 0 : _a.data) == null ? void 0 : _b.metadata) == null ? void 0 : _c.resourceVersion;
-  React.useEffect(() => {
-    if (!currentResourceVersion)
-      return;
-    if (!initialResourceVersionRef.current) {
-      initialResourceVersionRef.current = currentResourceVersion;
-      return;
-    }
-    if (currentResourceVersion !== initialResourceVersionRef.current) {
-      setIsExpired(true);
-    }
-  }, [currentResourceVersion]);
-  return isExpired;
-};
 function getInitialValues(resourceConfig) {
   return resourceConfig.initValue || {
     apiVersion: resourceConfig.apiVersion,
@@ -10736,42 +10720,6 @@ function getInitialValues(resourceConfig) {
     spec: {}
   };
 }
-const button_1v659kh = "";
-const WarningButtonStyle = "wwyz7ti";
-const DataExpiredModal_eazxh6 = "";
-const NoteStyle = "n609wlp";
-function DataExpiredModal({
-  onAbandon
-}) {
-  const {
-    t: t2
-  } = common.useTranslation();
-  return /* @__PURE__ */ common.jsxRuntimeExports.jsxs(eagle.SmallDialog, {
-    title: t2("dovetail.data_expired"),
-    closable: false,
-    maskClosable: false,
-    cancelButtonProps: {
-      style: {
-        display: "none"
-      }
-    },
-    okText: t2("dovetail.abandon_edit"),
-    okButtonProps: {
-      className: WarningButtonStyle
-    },
-    onOk: (popModal) => {
-      popModal();
-      onAbandon();
-    },
-    children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
-      className: eagle.Typo.Label.l2_regular,
-      children: t2("dovetail.data_expired_body")
-    }), /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
-      className: `${eagle.Typo.Label.l2_regular} ${NoteStyle}`,
-      children: t2("dovetail.data_expired_note")
-    })]
-  });
-}
 const index_az4wrx = "";
 const WrapperStyle$5 = "w1akirqw";
 const TitleStyle$2 = "t30srnq";
@@ -11101,6 +11049,67 @@ function copyToClipboard(text) {
   document.execCommand("copy");
   document.body.removeChild(input);
 }
+const useGlobalStore = (name2 = "default") => {
+  const globalStores = React.useContext(GlobalStoreContext);
+  return globalStores[name2];
+};
+const ResourceVersionConflictRetryContext = React.createContext(null);
+function Retry409Provider({
+  children
+}) {
+  const initialResourceRef = React.useRef();
+  return React.createElement(
+    ResourceVersionConflictRetryContext.Provider,
+    {
+      value: initialResourceRef
+    },
+    children
+  );
+}
+function use409Retry({
+  action,
+  dataProviderName,
+  id,
+  mutationMeta
+}) {
+  const { t: t2 } = common.useTranslation();
+  const globalStore = useGlobalStore(dataProviderName);
+  const sharedInitialResourceRef = React.useContext(ResourceVersionConflictRetryContext);
+  const localInitialResourceRef = React.useRef();
+  const initialResourceRef = sharedInitialResourceRef || localInitialResourceRef;
+  const isEditAction = action === "edit" || !!id;
+  const captureInitialResource = React.useCallback((resource) => {
+    var _a;
+    if (!isEditAction || initialResourceRef.current || !resource) {
+      return;
+    }
+    const rawResource = (_a = globalStore == null ? void 0 : globalStore.restoreItem) == null ? void 0 : _a.call(globalStore, resource);
+    if (!rawResource) {
+      return;
+    }
+    initialResourceRef.current = lodashEs.cloneDeep(rawResource);
+  }, [globalStore, initialResourceRef, isEditAction]);
+  const retryMutationMeta = React.useMemo(() => {
+    const restMutationMeta = lodashEs.omit(mutationMeta, "resourceVersionConflictRetry");
+    if (!isEditAction) {
+      return restMutationMeta;
+    }
+    return {
+      ...restMutationMeta,
+      resourceVersionConflictRetry: {
+        // refine 的 mutationMeta 在 hook 创建时就会固定；用 getter 让 provider 在保存瞬间读取最新的初始版本。
+        get initialResource() {
+          return initialResourceRef.current;
+        },
+        conflictMessage: t2("dovetail.resource_version_conflict")
+      }
+    };
+  }, [initialResourceRef, isEditAction, mutationMeta, t2]);
+  return {
+    captureInitialResource,
+    mutationMeta: retryMutationMeta
+  };
+}
 function useK8sYamlEditor() {
   const foldSymbol = React.useCallback(function(editor, symbol) {
     const model = editor.getModel();
@@ -11211,10 +11220,6 @@ function generateYamlBySchema(defaultValue, schema) {
   const content = yaml$2.dump(merged);
   return content.replace(/(')(#.+?)(')/g, "$2").replace(/( +)(#)/g, "$2$1");
 }
-const useGlobalStore = (name2 = "default") => {
-  const globalStores = React.useContext(GlobalStoreContext);
-  return globalStores[name2];
-};
 const useYamlForm = ({
   action: actionFromProps,
   resource,
@@ -11252,7 +11257,7 @@ const useYamlForm = ({
   onSubmitAbort,
   rules
 } = {}) => {
-  var _a;
+  var _a, _b;
   const editor = React.useRef(null);
   const { t: t2 } = common.useTranslation();
   const [isYamlValid, setIsYamlValid] = React.useState(true);
@@ -11263,7 +11268,17 @@ const useYamlForm = ({
   const [beforeSubmitErrors, setBeforeSubmitErrors] = React.useState([]);
   const [errorResponseBody, setErrorResponseBody] = React.useState(null);
   const useResourceResult = core.useResource();
-  const globalStore = useGlobalStore();
+  const globalStore = useGlobalStore(dataProviderName);
+  const action = React.useMemo(
+    () => actionFromProps || useResourceResult.action,
+    [actionFromProps, useResourceResult.action]
+  );
+  const { captureInitialResource, mutationMeta: finalMutationMeta } = use409Retry({
+    action,
+    dataProviderName,
+    id: idFromProps,
+    mutationMeta
+  });
   const {
     schema,
     loading: isLoadingSchema,
@@ -11300,7 +11315,7 @@ const useYamlForm = ({
     meta: core.pickNotDeprecated(meta, metaData),
     metaData: core.pickNotDeprecated(meta, metaData),
     queryMeta,
-    mutationMeta,
+    mutationMeta: finalMutationMeta,
     liveMode,
     liveParams,
     mutationMode,
@@ -11315,12 +11330,12 @@ const useYamlForm = ({
     overtimeOptions
   });
   const { formLoading, onFinish, queryResult } = useFormCoreResult;
+  React.useEffect(() => {
+    var _a2;
+    captureInitialResource((_a2 = queryResult == null ? void 0 : queryResult.data) == null ? void 0 : _a2.data);
+  }, [captureInitialResource, (_a = queryResult == null ? void 0 : queryResult.data) == null ? void 0 : _a.data]);
   const { warnWhenUnsavedChanges: warnWhenUnsavedChangesRefine, setWarnWhen } = core.useWarnAboutChange();
   const warnWhenUnsavedChanges = warnWhenUnsavedChangesProp ?? warnWhenUnsavedChangesRefine;
-  const action = React.useMemo(
-    () => actionFromProps || useResourceResult.action,
-    [actionFromProps, useResourceResult.action]
-  );
   const initialValues = React.useMemo(() => {
     var _a2;
     const initialValues2 = (action === "edit" && ((_a2 = queryResult == null ? void 0 : queryResult.data) == null ? void 0 : _a2.data) ? initialValuesForEdit || (globalStore == null ? void 0 : globalStore.restoreItem(queryResult.data.data)) : initialValuesForCreate) || {};
@@ -11363,10 +11378,10 @@ const useYamlForm = ({
         }
       },
       onEditorCreate(editorInstance) {
-        var _a3, _b;
+        var _a3, _b2;
         const editorValue = yaml$2.dump(initialValues);
         (_a3 = editor.current) == null ? void 0 : _a3.setEditorValue(editorValue);
-        (_b = editor.current) == null ? void 0 : _b.setValue(editorValue);
+        (_b2 = editor.current) == null ? void 0 : _b2.setValue(editorValue);
         if (action === "edit") {
           fold2(editorInstance);
         }
@@ -11379,7 +11394,7 @@ const useYamlForm = ({
     initialValues,
     schemas,
     resource,
-    (_a = useResourceResult.resource) == null ? void 0 : _a.name,
+    (_b = useResourceResult.resource) == null ? void 0 : _b.name,
     action,
     finalErrors,
     fold2
@@ -11419,7 +11434,7 @@ const useYamlForm = ({
     formProps: {
       ...formSF.formProps,
       onFinish: async (values) => {
-        var _a2, _b;
+        var _a2, _b2;
         setBeforeSubmitErrors([]);
         onSubmitStart == null ? void 0 : onSubmitStart();
         const errors = [
@@ -11439,7 +11454,7 @@ const useYamlForm = ({
           return;
         }
         try {
-          const objectValues = editor.current ? yaml$2.load(((_b = editor.current) == null ? void 0 : _b.getEditorValue()) || "") : values;
+          const objectValues = editor.current ? yaml$2.load(((_b2 = editor.current) == null ? void 0 : _b2.getEditorValue()) || "") : values;
           let finalValues = (transformApplyValues == null ? void 0 : transformApplyValues(objectValues)) || objectValues;
           if (beforeSubmit) {
             try {
@@ -11541,6 +11556,7 @@ function YamlForm(props) {
     id,
     action: actionFromProps,
     resource: resource == null ? void 0 : resource.name,
+    dataProviderName: resourceConfig.dataProviderName,
     editorOptions: {
       isSkipSchema: schemaStrategy === "None"
       /* None */
@@ -11663,31 +11679,6 @@ function YamlFormContainer({
   onSaveButtonPropsChange
 }) {
   const action = id ? "edit" : "create";
-  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,
-    liveMode: id ? "auto" : "off",
-    queryOptions: { enabled: !!id }
-  });
-  const isExpired = useResourceVersionCheck({ queryResult });
-  React.useEffect(() => {
-    if (!isExpired || isSubmitting || hasShownExpiredRef.current) {
-      return;
-    }
-    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,
@@ -11707,13 +11698,7 @@ function YamlFormContainer({
       action,
       isShowLayout: false,
       useFormProps: {
-        redirect: false,
-        onSubmitStart: () => {
-          setIsSubmitting(true);
-        },
-        onSubmitAbort: () => {
-          setIsSubmitting(false);
-        }
+        redirect: false
       },
       rules: void 0,
       onSaveButtonPropsChange,
@@ -16068,6 +16053,8 @@ function ResourceShow(props) {
     }
   );
 }
+const button_1v659kh = "";
+const WarningButtonStyle = "wwyz7ti";
 const modal_1eijuvm = "";
 const SmallModalStyle = "s1nc293e";
 function FormModeSegmentControl({
@@ -16903,9 +16890,16 @@ const useForm = ({
   onSubmitAbort,
   ...rest
 } = {}) => {
+  var _a;
   const { options } = core.useRefineContext();
   const disableServerSideValidation = (options == null ? void 0 : options.disableServerSideValidation) || disableServerSideValidationProp;
   const translate = core.useTranslate();
+  const { captureInitialResource, mutationMeta } = use409Retry({
+    action: refineCoreProps == null ? void 0 : refineCoreProps.action,
+    dataProviderName: refineCoreProps == null ? void 0 : refineCoreProps.dataProviderName,
+    id: refineCoreProps == null ? void 0 : refineCoreProps.id,
+    mutationMeta: refineCoreProps == null ? void 0 : refineCoreProps.mutationMeta
+  });
   const { warnWhenUnsavedChanges: warnWhenUnsavedChangesRefine, setWarnWhen } = core.useWarnAboutChange();
   const warnWhenUnsavedChanges = warnWhenUnsavedChangesProp ?? warnWhenUnsavedChangesRefine;
   const useHookFormResult = reactHookForm.useForm({
@@ -16925,10 +16919,11 @@ const useForm = ({
   } = useHookFormResult;
   const useFormCoreResult = core.useForm({
     ...refineCoreProps,
+    mutationMeta,
     onMutationError: (error, _variables, _context) => {
-      var _a, _b;
+      var _a2, _b;
       if (disableServerSideValidation) {
-        (_a = refineCoreProps == null ? void 0 : refineCoreProps.onMutationError) == null ? void 0 : _a.call(refineCoreProps, error, _variables, _context);
+        (_a2 = refineCoreProps == null ? void 0 : refineCoreProps.onMutationError) == null ? void 0 : _a2.call(refineCoreProps, error, _variables, _context);
         return;
       }
       const errors = error == null ? void 0 : error.errors;
@@ -16961,10 +16956,14 @@ const useForm = ({
   });
   const { queryResult, onFinish, formLoading, onFinishAutoSave } = useFormCoreResult;
   React.useEffect(() => {
-    var _a;
+    var _a2;
+    captureInitialResource((_a2 = queryResult == null ? void 0 : queryResult.data) == null ? void 0 : _a2.data);
+  }, [captureInitialResource, (_a = queryResult == null ? void 0 : queryResult.data) == null ? void 0 : _a.data]);
+  React.useEffect(() => {
+    var _a2;
     if (formState.isDirty)
       return;
-    const data2 = (_a = queryResult == null ? void 0 : queryResult.data) == null ? void 0 : _a.data;
+    const data2 = (_a2 = queryResult == null ? void 0 : queryResult.data) == null ? void 0 : _a2.data;
     if (!data2)
       return;
     const transformedData = transformInitValues ? transformInitValues(data2) : data2;
@@ -16992,13 +16991,13 @@ const useForm = ({
   }, [watch]);
   const onValuesChange = React.useCallback(
     (changeValues) => {
-      var _a;
+      var _a2;
       if (warnWhenUnsavedChanges) {
         setWarnWhen(true);
       }
       if (refineCoreProps == null ? void 0 : refineCoreProps.autoSave) {
         setWarnWhen(false);
-        const onFinishProps = (_a = refineCoreProps.autoSave) == null ? void 0 : _a.onFinish;
+        const onFinishProps = (_a2 = refineCoreProps.autoSave) == null ? void 0 : _a2.onFinish;
         if (onFinishProps) {
           return onFinishAutoSave(onFinishProps(changeValues));
         }
@@ -17112,6 +17111,7 @@ const useRefineForm = (props) => {
       resource: resourceConfig.name,
       action: id ? "edit" : "create",
       id,
+      dataProviderName: resourceConfig.dataProviderName,
       liveMode: id ? "auto" : "off",
       ...refineProps
     },
@@ -17125,10 +17125,11 @@ const useRefineForm = (props) => {
     ...formConfig == null ? void 0 : formConfig.useFormProps
   });
   React.useEffect(() => {
-    var _a, _b;
+    var _a, _b, _c;
     const response = (_a = result.refineCore.mutationResult.error) == null ? void 0 : _a.response;
+    const message2 = (_b = result.refineCore.mutationResult.error) == null ? void 0 : _b.message;
     if (response && !(response == null ? void 0 : response.bodyUsed)) {
-      (_b = response.json) == null ? void 0 : _b.call(response).then((body) => {
+      (_c = response.json) == null ? void 0 : _c.call(response).then((body) => {
         var _a2;
         setResponseErrorMsgs(
           [].concat(
@@ -17136,8 +17137,10 @@ const useRefineForm = (props) => {
           )
         );
       });
+    } else if (message2 && responseErrorMsgs[0] !== message2) {
+      setResponseErrorMsgs([message2]);
     }
-  }, [formConfig, result, i18n2]);
+  }, [formConfig, result, i18n2, responseErrorMsgs]);
   return {
     formResult: result,
     responseErrorMsgs,
@@ -17158,10 +17161,6 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
 }, ref) {
   var _a, _b;
   const action = id ? "edit" : "create";
-  const pushModal = eagle.usePushModal();
-  const popModal = eagle.usePopModal();
-  const hasShownExpiredRef = React.useRef(false);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
   const refineFormResult = useRefineForm({
     resourceConfig,
     id,
@@ -17170,7 +17169,6 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
         onSuccess == null ? void 0 : onSuccess(data2);
       },
       onMutationError() {
-        setIsSubmitting(false);
         onError == null ? void 0 : onError();
       },
       redirect: false,
@@ -17184,35 +17182,11 @@ 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);
       }
     }
   });
-  const isExpired = useResourceVersionCheck({
-    queryResult: refineFormResult.formResult.refineCore.queryResult
-  });
-  React.useEffect(() => {
-    if (!isExpired || isSubmitting || hasShownExpiredRef.current) {
-      return;
-    }
-    hasShownExpiredRef.current = true;
-    pushModal({
-      component: DataExpiredModal,
-      props: {
-        onAbandon: () => {
-          popModal();
-        }
-      }
-    });
-  }, [isExpired, isSubmitting, pushModal, popModal]);
   const fieldsConfig = useFieldsConfig(
     resourceConfig,
     { fields: formConfig == null ? void 0 : formConfig.fields },
@@ -17244,13 +17218,7 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
         action,
         isShowLayout: false,
         useFormProps: {
-          redirect: false,
-          onSubmitStart: () => {
-            setIsSubmitting(true);
-          },
-          onSubmitAbort: () => {
-            setIsSubmitting(false);
-          }
+          redirect: false
         },
         rules: fieldsConfig == null ? void 0 : fieldsConfig.filter(
           (config) => "isSkipValidationInYaml" in config && !config.isSkipValidationInYaml
@@ -17498,37 +17466,39 @@ function FormModal(props) {
       setStep(nextStep);
     }
   }, [step]);
-  return /* @__PURE__ */ common.jsxRuntimeExports.jsxs(eagle.WizardDialog, {
-    style: {
-      "--max-modal-width": isYamlForm || !isDisabledChangeMode ? "1024px" : "648px"
-    },
-    title: /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
-      className: TitleWrapperStyle,
-      children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
-        children: title
-      }), ((_b = resourceConfig.formConfig) == null ? void 0 : _b.formType) === FormType.FORM ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(FormModeSegmentControl, {
-        formConfig: resourceConfig.formConfig,
-        mode,
-        onChangeMode
-      }) : null]
-    }),
-    error: errorText,
-    steps,
-    step,
-    onStepChange: handleStepChange,
-    onOk,
-    okButtonProps: {
-      ...lodashEs.omit(saveButtonProps, "onClick"),
-      children: (_c = resourceConfig.formConfig) == null ? void 0 : _c.saveButtonText
-    },
-    okText: ((_d = resourceConfig.formConfig) == null ? void 0 : _d.saveButtonText) || okText,
-    destroyOnClose: true,
-    destroyOtherStep: true,
-    ...modalProps,
-    children: [desc ? /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
-      className: FormDescStyle,
-      children: desc
-    }) : void 0, formEle]
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsx(Retry409Provider, {
+    children: /* @__PURE__ */ common.jsxRuntimeExports.jsxs(eagle.WizardDialog, {
+      style: {
+        "--max-modal-width": isYamlForm || !isDisabledChangeMode ? "1024px" : "648px"
+      },
+      title: /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+        className: TitleWrapperStyle,
+        children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
+          children: title
+        }), ((_b = resourceConfig.formConfig) == null ? void 0 : _b.formType) === FormType.FORM ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(FormModeSegmentControl, {
+          formConfig: resourceConfig.formConfig,
+          mode,
+          onChangeMode
+        }) : null]
+      }),
+      error: errorText,
+      steps,
+      step,
+      onStepChange: handleStepChange,
+      onOk,
+      okButtonProps: {
+        ...lodashEs.omit(saveButtonProps, "onClick"),
+        children: (_c = resourceConfig.formConfig) == null ? void 0 : _c.saveButtonText
+      },
+      okText: ((_d = resourceConfig.formConfig) == null ? void 0 : _d.saveButtonText) || okText,
+      destroyOnClose: true,
+      destroyOtherStep: true,
+      ...modalProps,
+      children: [desc ? /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+        className: FormDescStyle,
+        children: desc
+      }) : void 0, formEle]
+    })
   });
 }
 const RefineFormPage_1v0fhor = "";