@dovetail-v2/refine 0.4.2-alpha.2 → 0.4.3

package/dist/refine.js

@@ -7,13 +7,13 @@ var __publicField = (obj, key2, value2) => {
 import dayjs from "dayjs";
 import i18n from "i18next";
 import { w as warnOnce, g as getDefaults, a as warn, b as getI18n, s as setDefaults, d as setI18n, I as I18nContext, j as jsxRuntimeExports, u as useTranslation, c as cx_default, S as SocketStatus } from "./common-241b21f8.js";
-import { ResourceContext, matchResourceFromRoute, useResource, useDelete, useNavigation, useBreadcrumb, useList, CanAccess, useUpdate, useForm as useForm$2, pickNotDeprecated, useWarnAboutChange, useOne, useParsed, useGo, useCan, useTable, useDeleteMany, useShow, useRefineContext, useTranslate, flattenObjectKeys, useMenu, Refine } from "@refinedev/core";
+import { ResourceContext, matchResourceFromRoute, useResource, useDelete, useNavigation, useBreadcrumb, useList, CanAccess, useUpdate, useForm as useForm$2, pickNotDeprecated, useWarnAboutChange, useParsed, useGo, useCan, useTable, useDeleteMany, useShow, useRefineContext, useTranslate, flattenObjectKeys, useMenu, Refine } from "@refinedev/core";
 import { parse, stringify } from "qs";
 import React, { createElement, isValidElement, cloneElement, Children, useContext, useCallback, createContext, useState, useEffect, useMemo, useRef, useImperativeHandle, forwardRef, Suspense, lazy, memo } from "react";
 import { useLocation, useHistory, useParams, matchPath, Link, Route, NavLink, Router } from "react-router-dom";
 import { usePushModal, usePopModal, DeleteDialog, Tag, RejectDialog, RejectDialogType, OverflowTooltip, Typo, Input, Select, AntdOption, Button, Form, Space, TextArea, kitContext, Loading, Table as Table$2, Pagination, Alert, ImmersiveDialog, SmallDialog, Fields, Units, Link as Link$1, Tooltip, Divider, Icon, Dropdown, Menu as Menu$1, LegacyModal, StatusCapsule, Popover, AntdTable, Upload, TableForm, ValidateTriggerType, AutoComplete, getOptions, DonutChart, SegmentControl, Checkbox, Tabs as Tabs$1, TabsTabPane, Col, Row, useMessage, SearchInput, Token, AntdSelectOptGroup, WizardDialog, MenuItemGroup, Layout as Layout$1, InputGroup, InputInteger, Time as Time$1, ModalStack, KitStoreProvider, ConfigProvider } from "@cloudtower/eagle";
-import { HierarchyTriangleRight16GrayIcon, HierarchyTriangleRight16BlueIcon, ClipboardCopy16GradientGrayIcon, ClipboardCopy16GradientBlueIcon, Retry16GradientGrayIcon, Retry16GradientBlueIcon, EditPen16GradientGrayIcon, EditPen16GradientBlueIcon, Showdiff16GradientGrayIcon, Showdiff16GradientBlueIcon, XmarkFailedSeriousWarningFill16RedIcon, EditPen16PrimaryIcon, Download16GradientBlueIcon, TrashBinDelete16Icon, MoreEllipsis324BoldSecondaryIcon, MoreEllipsis324BoldBlueIcon, MoreEllipsis316BoldBlueIcon, PlusAddCreateNew16BoldOntintIcon, ViewEye16GradientGrayIcon, EntityFilterIgnoreGradient16GrayIcon, InfoICircleFill16GrayIcon, InfoICircleFill16Gray70Icon, RecoverContinue16GradientBlueIcon, SuspendedPause16GradientBlueIcon, ArrowChevronLeft16BoldTertiaryIcon, ArrowChevronLeftSmall16BoldBlueIcon, OpenTerminal16GradientBlueIcon, ArrowChevronDown16BlueIcon, ArrowChevronUp16BlueIcon, Pause16GradientBlueIcon, EditPen16BlueIcon } from "@cloudtower/icons-react";
-import { first, get as get$2, cloneDeep, set, setWith, clone, debounce, isEqual as isEqual$1, isObject as isObject$4, uniq, omit as omit$1, merge, last, keyBy } from "lodash-es";
+import { HierarchyTriangleRight16GrayIcon, HierarchyTriangleRight16BlueIcon, ClipboardCopy16GradientGrayIcon, ClipboardCopy16GradientBlueIcon, Retry16GradientGrayIcon, Retry16GradientBlueIcon, EditPen16GradientGrayIcon, EditPen16GradientBlueIcon, Showdiff16GradientGrayIcon, Showdiff16GradientBlueIcon, XmarkFailedSeriousWarningFill16RedIcon, EditPen16PrimaryIcon, Download16GradientBlueIcon, TrashBinDelete16Icon, MoreEllipsis324BoldSecondaryIcon, MoreEllipsis324BoldBlueIcon, MoreEllipsis316BoldBlueIcon, PlusAddCreateNew16BoldOntintIcon, ViewEye16GradientGrayIcon, EntityFilterIgnoreGradient16GrayIcon, InfoICircleFill16GrayIcon, InfoICircleFill16Gray70Icon, RecoverContinue16GradientBlueIcon, SuspendedPause16GradientBlueIcon, ArrowChevronLeft16BoldTertiaryIcon, ArrowChevronLeftSmall16BoldBlueIcon, OpenTerminal16GradientBlueIcon, ArrowChevronLeft16BoldBlueIcon, ExclamationErrorCircleFill16RedIcon, ArrowChevronDown16BlueIcon, ArrowChevronUp16BlueIcon, Pause16GradientBlueIcon, EditPen16BlueIcon } from "@cloudtower/icons-react";
+import { first, get as get$2, cloneDeep, set, setWith, clone, debounce, isEqual as isEqual$1, omit as omit$1, isObject as isObject$4, uniq, merge, last, keyBy } from "lodash-es";
 import yaml$2 from "js-yaml";
 import { useForm as useForm$1 } from "sunflower-antd";
 import { useLocalStorage } from "usehooks-ts";
@@ -456,6 +456,8 @@ const state$1 = "Status";
 const name$1 = "Name";
 const pod$1 = "Pod";
 const cancel$1 = "Cancel";
+const prev_step$1 = "Previous";
+const next_step$1 = "Next";
 const create$1 = "Create";
 const confirm_delete_text$1 = "Are you sure you want to delete the {{kind}} <0>{{target}}</0>?";
 const edit$1 = "Edit";
@@ -618,6 +620,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)";
@@ -734,6 +737,8 @@ const dovetail$1 = {
   name: name$1,
   pod: pod$1,
   cancel: cancel$1,
+  prev_step: prev_step$1,
+  next_step: next_step$1,
   "delete": "Delete",
   create: create$1,
   confirm_delete_text: confirm_delete_text$1,
@@ -899,6 +904,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,
@@ -1010,6 +1016,8 @@ const edit_yaml = "编辑 YAML";
 const copied = "已复制";
 const already_reset = "已重置";
 const cancel = "取消";
+const prev_step = "上一步";
+const next_step = "下一步";
 const create = "创建";
 const delete_resource = "删除{{resource}}";
 const confirm_delete_text = "确认删除{{kind}} <0>{{target}}</0> 吗？";
@@ -1182,6 +1190,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 = "表单";
@@ -1287,6 +1296,8 @@ const dovetail = {
   copied,
   already_reset,
   cancel,
+  prev_step,
+  next_step,
   "delete": "删除",
   create,
   delete_resource,
@@ -1462,6 +1473,7 @@ const dovetail = {
   data_expired,
   data_expired_body,
   data_expired_note,
+  resource_version_conflict,
   abandon_edit,
   exit_yaml_tip,
   form,
@@ -10687,26 +10699,6 @@ function usePathMap(options) {
     transformApplyValues
   };
 }
-const useResourceVersionCheck = ({
-  queryResult
-}) => {
-  var _a, _b, _c;
-  const initialResourceVersionRef = useRef();
-  const [isExpired, setIsExpired] = 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;
-  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,
@@ -10715,42 +10707,6 @@ function getInitialValues(resourceConfig) {
     spec: {}
   };
 }
-const button_1v659kh = "";
-const WarningButtonStyle = "wwyz7ti";
-const DataExpiredModal_eazxh6 = "";
-const NoteStyle = "n609wlp";
-function DataExpiredModal({
-  onAbandon
-}) {
-  const {
-    t: t2
-  } = useTranslation();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(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__ */ jsxRuntimeExports.jsx("div", {
-      className: Typo.Label.l2_regular,
-      children: t2("dovetail.data_expired_body")
-    }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-      className: `${Typo.Label.l2_regular} ${NoteStyle}`,
-      children: t2("dovetail.data_expired_note")
-    })]
-  });
-}
 const index_az4wrx = "";
 const WrapperStyle$5 = "w1akirqw";
 const TitleStyle$2 = "t30srnq";
@@ -10790,7 +10746,7 @@ const Separator = () => {
 const style_1o641u6 = "";
 const ToolBarStyle = "t1joof7s";
 const ToolBarHeaderStyle = "tti58uh";
-const ErrorIconStyle = "e15yt16p";
+const ErrorIconStyle$1 = "e15yt16p";
 const WrapperStyle$4 = "w3ccqks";
 const TitleStyle$1 = "t7zbd78";
 const IconStyle = "i1e4ouxy";
@@ -11020,7 +10976,7 @@ const YamlEditorComponent = forwardRef(
                   ] })
                 ] }),
                 errorMsgs.length ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Space, { className: ErrorWrapperStyle, size: 8, align: "start", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(XmarkFailedSeriousWarningFill16RedIcon, { className: ErrorIconStyle }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(XmarkFailedSeriousWarningFill16RedIcon, { className: ErrorIconStyle$1 }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: errorMsgs.map((errorMsg, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("pre", { className: ErrorMsgStyle, children: [
                     errorMsgs.length > 1 ? `${index2 + 1}. ` : "",
                     errorMsg
@@ -11080,6 +11036,67 @@ function copyToClipboard(text) {
   document.execCommand("copy");
   document.body.removeChild(input);
 }
+const useGlobalStore = (name2 = "default") => {
+  const globalStores = useContext(GlobalStoreContext);
+  return globalStores[name2];
+};
+const ResourceVersionConflictRetryContext = createContext(null);
+function Retry409Provider({
+  children
+}) {
+  const initialResourceRef = useRef();
+  return createElement(
+    ResourceVersionConflictRetryContext.Provider,
+    {
+      value: initialResourceRef
+    },
+    children
+  );
+}
+function use409Retry({
+  action,
+  dataProviderName,
+  id,
+  mutationMeta
+}) {
+  const { t: t2 } = useTranslation();
+  const globalStore = useGlobalStore(dataProviderName);
+  const sharedInitialResourceRef = useContext(ResourceVersionConflictRetryContext);
+  const localInitialResourceRef = useRef();
+  const initialResourceRef = sharedInitialResourceRef || localInitialResourceRef;
+  const isEditAction = action === "edit" || !!id;
+  const captureInitialResource = 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 = cloneDeep(rawResource);
+  }, [globalStore, initialResourceRef, isEditAction]);
+  const retryMutationMeta = useMemo(() => {
+    const restMutationMeta = omit$1(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 = useCallback(function(editor, symbol) {
     const model = editor.getModel();
@@ -11190,10 +11207,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 = useContext(GlobalStoreContext);
-  return globalStores[name2];
-};
 const useYamlForm = ({
   action: actionFromProps,
   resource,
@@ -11231,7 +11244,7 @@ const useYamlForm = ({
   onSubmitAbort,
   rules
 } = {}) => {
-  var _a;
+  var _a, _b;
   const editor = useRef(null);
   const { t: t2 } = useTranslation();
   const [isYamlValid, setIsYamlValid] = useState(true);
@@ -11242,7 +11255,17 @@ const useYamlForm = ({
   const [beforeSubmitErrors, setBeforeSubmitErrors] = useState([]);
   const [errorResponseBody, setErrorResponseBody] = useState(null);
   const useResourceResult = useResource();
-  const globalStore = useGlobalStore();
+  const globalStore = useGlobalStore(dataProviderName);
+  const action = useMemo(
+    () => actionFromProps || useResourceResult.action,
+    [actionFromProps, useResourceResult.action]
+  );
+  const { captureInitialResource, mutationMeta: finalMutationMeta } = use409Retry({
+    action,
+    dataProviderName,
+    id: idFromProps,
+    mutationMeta
+  });
   const {
     schema,
     loading: isLoadingSchema,
@@ -11279,7 +11302,7 @@ const useYamlForm = ({
     meta: pickNotDeprecated(meta, metaData),
     metaData: pickNotDeprecated(meta, metaData),
     queryMeta,
-    mutationMeta,
+    mutationMeta: finalMutationMeta,
     liveMode,
     liveParams,
     mutationMode,
@@ -11294,12 +11317,12 @@ const useYamlForm = ({
     overtimeOptions
   });
   const { formLoading, onFinish, queryResult } = useFormCoreResult;
+  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 } = useWarnAboutChange();
   const warnWhenUnsavedChanges = warnWhenUnsavedChangesProp ?? warnWhenUnsavedChangesRefine;
-  const action = useMemo(
-    () => actionFromProps || useResourceResult.action,
-    [actionFromProps, useResourceResult.action]
-  );
   const initialValues = 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) || {};
@@ -11342,10 +11365,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);
         }
@@ -11358,7 +11381,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
@@ -11398,7 +11421,7 @@ const useYamlForm = ({
     formProps: {
       ...formSF.formProps,
       onFinish: async (values) => {
-        var _a2, _b;
+        var _a2, _b2;
         setBeforeSubmitErrors([]);
         onSubmitStart == null ? void 0 : onSubmitStart();
         const errors = [
@@ -11418,7 +11441,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 {
@@ -11520,6 +11543,7 @@ function YamlForm(props) {
     id,
     action: actionFromProps,
     resource: resource == null ? void 0 : resource.name,
+    dataProviderName: resourceConfig.dataProviderName,
     editorOptions: {
       isSkipSchema: schemaStrategy === "None"
       /* None */
@@ -11642,31 +11666,6 @@ function YamlFormContainer({
   onSaveButtonPropsChange
 }) {
   const action = id ? "edit" : "create";
-  const pushModal = usePushModal();
-  const popModal = usePopModal();
-  const hasShownExpiredRef = useRef(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const queryResult = useOne({
-    resource: resourceConfig.name,
-    id,
-    liveMode: id ? "auto" : "off",
-    queryOptions: { enabled: !!id }
-  });
-  const isExpired = useResourceVersionCheck({ queryResult });
-  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,
@@ -11686,13 +11685,7 @@ function YamlFormContainer({
       action,
       isShowLayout: false,
       useFormProps: {
-        redirect: false,
-        onSubmitStart: () => {
-          setIsSubmitting(true);
-        },
-        onSubmitAbort: () => {
-          setIsSubmitting(false);
-        }
+        redirect: false
       },
       rules: void 0,
       onSaveButtonPropsChange,
@@ -16074,8 +16067,121 @@ function ResourceShow(props) {
     }
   );
 }
+const button_1v659kh = "";
+const WarningButtonStyle = "wwyz7ti";
 const modal_1eijuvm = "";
 const SmallModalStyle = "s1nc293e";
+const ExtraSubmitFooter_15u4r8u = "";
+const FooterStyle = "f16wn4bu";
+const FooterLeftStyle = "fk5l2b4";
+const FooterRightStyle = "f1r3vl4u";
+const ErrorStyle = "e1y8i1r4";
+const ErrorIconStyle = "e16fn5cj";
+const PrevIconStyle = "prji3wx";
+function useExtraSubmitFooter({
+  action,
+  cancelText,
+  defaultSubmitText,
+  errorText,
+  extraSubmitButton,
+  fallbackFooter,
+  isYamlMode,
+  nextStepText,
+  prevStepText,
+  saveButtonProps,
+  step,
+  stepCount,
+  onCancel,
+  onNextStep,
+  onPrevStep,
+  onSubmit
+}) {
+  const shouldShowExtraSubmitButton = useMemo(() => {
+    if (!extraSubmitButton || isYamlMode) {
+      return false;
+    }
+    if (extraSubmitButton.action && extraSubmitButton.action !== action) {
+      return false;
+    }
+    if (extraSubmitButton.step !== step) {
+      return false;
+    }
+    return step < stepCount - 1;
+  }, [action, extraSubmitButton, isYamlMode, step, stepCount]);
+  return useMemo(() => {
+    if (!shouldShowExtraSubmitButton) {
+      return fallbackFooter;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ExtraSubmitFooter, {
+      cancelText,
+      errorText,
+      extraSubmitText: (extraSubmitButton == null ? void 0 : extraSubmitButton.text) || defaultSubmitText,
+      nextStepText,
+      prevText: prevStepText,
+      saveButtonProps,
+      showPrevButton: step > 0,
+      onCancel,
+      onNextStep,
+      onPrevStep,
+      onSubmit
+    });
+  }, [cancelText, defaultSubmitText, errorText, extraSubmitButton == null ? void 0 : extraSubmitButton.text, fallbackFooter, onCancel, onNextStep, onPrevStep, onSubmit, nextStepText, prevStepText, saveButtonProps, shouldShowExtraSubmitButton, step]);
+}
+const ExtraSubmitFooter = ({
+  cancelText,
+  errorText,
+  extraSubmitText,
+  nextStepText,
+  prevText,
+  saveButtonProps,
+  showPrevButton,
+  onCancel,
+  onNextStep,
+  onPrevStep,
+  onSubmit
+}) => {
+  const finalSaveButtonProps = omit$1(saveButtonProps, "onClick");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+    className: FooterStyle,
+    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+      className: FooterLeftStyle,
+      children: [showPrevButton ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, {
+        type: "link",
+        onClick: onPrevStep,
+        children: [/* @__PURE__ */ jsxRuntimeExports.jsx(ArrowChevronLeft16BoldBlueIcon, {
+          className: PrevIconStyle
+        }), prevText]
+      }) : null, errorText ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+        className: cx_default(ErrorStyle, Typo.Label.l2_regular),
+        children: [/* @__PURE__ */ jsxRuntimeExports.jsx(ExclamationErrorCircleFill16RedIcon, {
+          className: ErrorIconStyle
+        }), errorText]
+      }) : null]
+    }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+      className: FooterRightStyle,
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Button, {
+        type: "quiet",
+        size: "large",
+        onClick: onCancel,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+          className: Typo.Label.l1_bold_title,
+          children: cancelText
+        })
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx(Button, {
+        size: "large",
+        type: "secondary",
+        onClick: onNextStep,
+        children: nextStepText
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx(Button, {
+        ...finalSaveButtonProps,
+        size: "large",
+        type: "primary",
+        onClick: onSubmit,
+        children: extraSubmitText
+      })]
+    })]
+  });
+};
 function FormModeSegmentControl({
   formConfig,
   mode,
@@ -16909,9 +17015,16 @@ const useForm = ({
   onSubmitAbort,
   ...rest
 } = {}) => {
+  var _a;
   const { options } = useRefineContext();
   const disableServerSideValidation = (options == null ? void 0 : options.disableServerSideValidation) || disableServerSideValidationProp;
   const translate = 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 } = useWarnAboutChange();
   const warnWhenUnsavedChanges = warnWhenUnsavedChangesProp ?? warnWhenUnsavedChangesRefine;
   const useHookFormResult = useForm$3({
@@ -16931,10 +17044,11 @@ const useForm = ({
   } = useHookFormResult;
   const useFormCoreResult = useForm$2({
     ...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;
@@ -16967,10 +17081,14 @@ const useForm = ({
   });
   const { queryResult, onFinish, formLoading, onFinishAutoSave } = useFormCoreResult;
   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]);
+  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;
@@ -16998,13 +17116,13 @@ const useForm = ({
   }, [watch]);
   const onValuesChange = 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));
         }
@@ -17122,6 +17240,7 @@ const useRefineForm = (props) => {
       resource: resourceConfig.name,
       action: id ? "edit" : "create",
       id,
+      dataProviderName: resourceConfig.dataProviderName,
       liveMode: id ? "auto" : "off",
       ...refineProps
     },
@@ -17135,10 +17254,11 @@ const useRefineForm = (props) => {
     ...formConfig == null ? void 0 : formConfig.useFormProps
   });
   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(
@@ -17146,8 +17266,10 @@ const useRefineForm = (props) => {
           )
         );
       });
+    } else if (message2 && responseErrorMsgs[0] !== message2) {
+      setResponseErrorMsgs([message2]);
     }
-  }, [formConfig, result, i18n2]);
+  }, [formConfig, result, i18n2, responseErrorMsgs]);
   return {
     formResult: result,
     responseErrorMsgs,
@@ -17168,10 +17290,6 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
 }, ref) {
   var _a, _b;
   const action = id ? "edit" : "create";
-  const pushModal = usePushModal();
-  const popModal = usePopModal();
-  const hasShownExpiredRef = useRef(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
   const refineFormResult = useRefineForm({
     resourceConfig,
     id,
@@ -17180,7 +17298,6 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
         onSuccess == null ? void 0 : onSuccess(data2);
       },
       onMutationError() {
-        setIsSubmitting(false);
         onError == null ? void 0 : onError();
       },
       redirect: false,
@@ -17194,35 +17311,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
-  });
-  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 },
@@ -17256,13 +17349,7 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
         isShowLayout: false,
         useFormProps: {
           redirect: false,
-          mutationMeta: (_a2 = formConfig == null ? void 0 : formConfig.refineCoreProps) == null ? void 0 : _a2.mutationMeta,
-          onSubmitStart: () => {
-            setIsSubmitting(true);
-          },
-          onSubmitAbort: () => {
-            setIsSubmitting(false);
-          }
+          mutationMeta: (_a2 = formConfig == null ? void 0 : formConfig.refineCoreProps) == null ? void 0 : _a2.mutationMeta
         },
         rules: fieldsConfig == null ? void 0 : fieldsConfig.filter(
           (config) => "isSkipValidationInYaml" in config && !config.isSkipValidationInYaml
@@ -17379,7 +17466,7 @@ function ConfirmModal({
   });
 }
 function FormModal(props) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const {
     id,
     yamlFormProps: customYamlFormProps,
@@ -17517,37 +17604,59 @@ function FormModal(props) {
       setStep(nextStep);
     }
   }, [step]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(WizardDialog, {
-    style: {
-      "--max-modal-width": isYamlForm || !isDisabledChangeMode ? "1024px" : "648px"
-    },
-    title: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-      className: TitleWrapperStyle,
-      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-        children: title
-      }), ((_c = resourceConfig.formConfig) == null ? void 0 : _c.formType) === FormType.FORM ? /* @__PURE__ */ jsxRuntimeExports.jsx(FormModeSegmentControl, {
-        formConfig: resourceConfig.formConfig,
-        mode,
-        onChangeMode
-      }) : null]
-    }),
-    error: errorText,
-    steps,
+  const extraSubmitButton = ((_c = resourceConfig.formConfig) == null ? void 0 : _c.formType) === FormType.FORM ? resourceConfig.formConfig.extraSubmitButton : void 0;
+  const footer = useExtraSubmitFooter({
+    action,
+    cancelText: (modalProps == null ? void 0 : modalProps.cancelText) || i18n2.t("dovetail.cancel"),
+    defaultSubmitText: okText,
+    errorText,
+    extraSubmitButton,
+    fallbackFooter: modalProps == null ? void 0 : modalProps.footer,
+    isYamlMode,
+    nextStepText: (modalProps == null ? void 0 : modalProps.nextText) || i18n2.t("dovetail.next_step"),
+    prevStepText: (modalProps == null ? void 0 : modalProps.prevText) || i18n2.t("dovetail.prev_step"),
+    saveButtonProps,
     step,
-    onStepChange: handleStepChange,
-    onOk,
-    okButtonProps: {
-      ...omit$1(saveButtonProps, "onClick"),
-      children: (_d = resourceConfig.formConfig) == null ? void 0 : _d.saveButtonText
-    },
-    okText: ((_e = resourceConfig.formConfig) == null ? void 0 : _e.saveButtonText) || okText,
-    destroyOnClose: true,
-    destroyOtherStep: true,
-    ...modalProps,
-    children: [desc ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-      className: FormDescStyle,
-      children: desc
-    }) : void 0, formEle]
+    stepCount: (steps == null ? void 0 : steps.length) || 0,
+    onCancel: popModal,
+    onNextStep: () => handleStepChange(step + 1),
+    onPrevStep: () => handleStepChange(step - 1),
+    onSubmit: onOk
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Retry409Provider, {
+    children: /* @__PURE__ */ jsxRuntimeExports.jsxs(WizardDialog, {
+      style: {
+        "--max-modal-width": isYamlForm || !isDisabledChangeMode ? "1024px" : "648px"
+      },
+      title: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+        className: TitleWrapperStyle,
+        children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+          children: title
+        }), ((_d = resourceConfig.formConfig) == null ? void 0 : _d.formType) === FormType.FORM ? /* @__PURE__ */ jsxRuntimeExports.jsx(FormModeSegmentControl, {
+          formConfig: resourceConfig.formConfig,
+          mode,
+          onChangeMode
+        }) : null]
+      }),
+      error: errorText,
+      steps,
+      step,
+      onStepChange: handleStepChange,
+      onOk,
+      okButtonProps: {
+        ...omit$1(saveButtonProps, "onClick"),
+        children: (_e = resourceConfig.formConfig) == null ? void 0 : _e.saveButtonText
+      },
+      okText: ((_f = resourceConfig.formConfig) == null ? void 0 : _f.saveButtonText) || okText,
+      footer,
+      destroyOnClose: true,
+      destroyOtherStep: true,
+      ...modalProps,
+      children: [desc ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+        className: FormDescStyle,
+        children: desc
+      }) : void 0, formEle]
+    })
   });
 }
 const RefineFormPage_1v0fhor = "";