@dovetail-v2/refine 0.4.2-beta.0 → 0.4.3

package/dist/refine.cjs

@@ -475,6 +475,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";
@@ -637,6 +639,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)";
@@ -753,6 +756,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,
@@ -918,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,
@@ -1029,6 +1035,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> 吗？";
@@ -1201,6 +1209,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 = "表单";
@@ -1306,6 +1315,8 @@ const dovetail = {
   copied,
   already_reset,
   cancel,
+  prev_step,
+  next_step,
   "delete": "删除",
   create,
   delete_resource,
@@ -1481,6 +1492,7 @@ const dovetail = {
   data_expired,
   data_expired_body,
   data_expired_note,
+  resource_version_conflict,
   abandon_edit,
   exit_yaml_tip,
   form,
@@ -10706,26 +10718,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,
@@ -10734,42 +10726,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";
@@ -10809,7 +10765,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";
@@ -11039,7 +10995,7 @@ const YamlEditorComponent = React.forwardRef(
                   ] })
                 ] }),
                 errorMsgs.length ? /* @__PURE__ */ common.jsxRuntimeExports.jsxs(eagle.Space, { className: ErrorWrapperStyle, size: 8, align: "start", children: [
-                  /* @__PURE__ */ common.jsxRuntimeExports.jsx(iconsReact.XmarkFailedSeriousWarningFill16RedIcon, { className: ErrorIconStyle }),
+                  /* @__PURE__ */ common.jsxRuntimeExports.jsx(iconsReact.XmarkFailedSeriousWarningFill16RedIcon, { className: ErrorIconStyle$1 }),
                   /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", { children: errorMsgs.map((errorMsg, index2) => /* @__PURE__ */ common.jsxRuntimeExports.jsxs("pre", { className: ErrorMsgStyle, children: [
                     errorMsgs.length > 1 ? `${index2 + 1}. ` : "",
                     errorMsg
@@ -11099,6 +11055,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();
@@ -11209,10 +11226,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,
@@ -11250,7 +11263,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);
@@ -11261,7 +11274,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,
@@ -11298,7 +11321,7 @@ const useYamlForm = ({
     meta: core.pickNotDeprecated(meta, metaData),
     metaData: core.pickNotDeprecated(meta, metaData),
     queryMeta,
-    mutationMeta,
+    mutationMeta: finalMutationMeta,
     liveMode,
     liveParams,
     mutationMode,
@@ -11313,12 +11336,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) || {};
@@ -11361,10 +11384,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);
         }
@@ -11377,7 +11400,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
@@ -11417,7 +11440,7 @@ const useYamlForm = ({
     formProps: {
       ...formSF.formProps,
       onFinish: async (values) => {
-        var _a2, _b;
+        var _a2, _b2;
         setBeforeSubmitErrors([]);
         onSubmitStart == null ? void 0 : onSubmitStart();
         const errors = [
@@ -11437,7 +11460,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 {
@@ -11539,6 +11562,7 @@ function YamlForm(props) {
     id,
     action: actionFromProps,
     resource: resource == null ? void 0 : resource.name,
+    dataProviderName: resourceConfig.dataProviderName,
     editorOptions: {
       isSkipSchema: schemaStrategy === "None"
       /* None */
@@ -11661,31 +11685,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,
@@ -11705,13 +11704,7 @@ function YamlFormContainer({
       action,
       isShowLayout: false,
       useFormProps: {
-        redirect: false,
-        onSubmitStart: () => {
-          setIsSubmitting(true);
-        },
-        onSubmitAbort: () => {
-          setIsSubmitting(false);
-        }
+        redirect: false
       },
       rules: void 0,
       onSaveButtonPropsChange,
@@ -12990,31 +12983,63 @@ function readFileAsBase64(file) {
     reader.readAsArrayBuffer(file);
   });
 }
-const LabelFormatPopover_piveun = "";
-const PodLabelFormatRulePopoverStyle = "p5jt6nm";
-const LabelFormatPopover = ({
-  noValueValidation
-}) => {
-  const {
-    t: t2
-  } = common.useTranslation();
-  const data2 = [{
-    object: t2("dovetail.key"),
-    contains: t2("dovetail.prefix"),
-    optional: t2("dovetail.no"),
-    rule: [t2("dovetail.prefix_format_rule_1"), t2("dovetail.prefix_format_rule_2"), t2("dovetail.prefix_format_rule_3")]
-  }, {
-    object: t2("dovetail.key"),
-    contains: t2("dovetail.name"),
-    optional: t2("dovetail.yes"),
-    rule: [t2("dovetail.name_format_rule_1"), t2("dovetail.name_format_rule_2"), t2("dovetail.name_format_rule_3")]
-  }];
+const FormatRulePopover_1b8vyke = "";
+const FormatRulePopoverStyle = "f1eyh8ow";
+const FormatRulePopover = ({
+  buttonText,
+  columns,
+  dataSource
+}) => /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Popover, {
+  trigger: "click",
+  overlayClassName: FormatRulePopoverStyle,
+  placement: "bottomRight",
+  content: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.AntdTable, {
+    bordered: true,
+    dataSource,
+    columns,
+    pagination: false,
+    rowKey: (_, index2) => String(index2)
+  }),
+  children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Button, {
+    size: "small",
+    type: "link",
+    children: buttonText
+  })
+});
+const LabelFormatPopover = ({ noValueValidation }) => {
+  const { t: t2 } = common.useTranslation();
+  const data2 = [
+    {
+      object: t2("dovetail.key"),
+      contains: t2("dovetail.prefix"),
+      optional: t2("dovetail.no"),
+      rule: [
+        t2("dovetail.prefix_format_rule_1"),
+        t2("dovetail.prefix_format_rule_2"),
+        t2("dovetail.prefix_format_rule_3")
+      ]
+    },
+    {
+      object: t2("dovetail.key"),
+      contains: t2("dovetail.name"),
+      optional: t2("dovetail.yes"),
+      rule: [
+        t2("dovetail.name_format_rule_1"),
+        t2("dovetail.name_format_rule_2"),
+        t2("dovetail.name_format_rule_3")
+      ]
+    }
+  ];
   if (!noValueValidation) {
     data2.push({
       object: t2("dovetail.value"),
       contains: t2("dovetail.name"),
       optional: t2("dovetail.no"),
-      rule: [t2("dovetail.name_format_rule_1"), t2("dovetail.name_format_rule_2"), t2("dovetail.name_format_rule_3")]
+      rule: [
+        t2("dovetail.name_format_rule_1"),
+        t2("dovetail.name_format_rule_2"),
+        t2("dovetail.name_format_rule_3")
+      ]
     });
   } else {
     data2.push({
@@ -13024,57 +13049,42 @@ const LabelFormatPopover = ({
       rule: [t2("dovetail.no_limitation_rule")]
     });
   }
-  return /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Popover, {
-    trigger: "click",
-    overlayClassName: PodLabelFormatRulePopoverStyle,
-    placement: "bottomRight",
-    content: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.AntdTable, {
-      bordered: true,
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
+    FormatRulePopover,
+    {
+      buttonText: t2("dovetail.look_format_requirement"),
       dataSource: data2,
-      columns: [{
-        key: "object",
-        title: t2("dovetail.object"),
-        dataIndex: "object",
-        render: (cell, record, index2) => {
-          return {
-            children: /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
-              className: eagle.Typo.Label.l4_bold,
-              children: cell
-            }),
+      columns: [
+        {
+          key: "object",
+          title: t2("dovetail.object"),
+          dataIndex: "object",
+          render: (cell, _record, index2) => ({
+            children: /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", { className: eagle.Typo.Label.l4_bold, children: cell }),
             props: {
               rowSpan: index2 === 0 ? 2 : index2 === 1 ? 0 : 1
             }
-          };
-        }
-      }, {
-        key: "contains",
-        title: t2("dovetail.contains"),
-        dataIndex: "contains"
-      }, {
-        key: "optional",
-        title: t2("dovetail.optional"),
-        dataIndex: "optional"
-      }, {
-        key: "rule",
-        title: t2("dovetail.format_requirements"),
-        dataIndex: "rule",
-        render: (cell) => {
-          return /* @__PURE__ */ common.jsxRuntimeExports.jsx("ul", {
-            className: "rule-list",
-            children: cell.map((rule2, index2) => /* @__PURE__ */ common.jsxRuntimeExports.jsx("li", {
-              children: rule2
-            }, index2))
-          });
+          })
+        },
+        {
+          key: "contains",
+          title: t2("dovetail.contains"),
+          dataIndex: "contains"
+        },
+        {
+          key: "optional",
+          title: t2("dovetail.optional"),
+          dataIndex: "optional"
+        },
+        {
+          key: "rule",
+          title: t2("dovetail.format_requirements"),
+          dataIndex: "rule",
+          render: (cell) => /* @__PURE__ */ common.jsxRuntimeExports.jsx("ul", { style: { listStyle: "disc", listStylePosition: "inside" }, children: cell.map((rule2, i2) => /* @__PURE__ */ common.jsxRuntimeExports.jsx("li", { style: { textIndent: 8 }, children: rule2 }, i2)) })
         }
-      }],
-      pagination: false
-    }),
-    children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Button, {
-      size: "small",
-      type: "link",
-      children: t2("dovetail.look_format_requirement")
-    })
-  });
+      ]
+    }
+  );
 };
 const index_t3zi07 = "";
 function _KeyValueTableForm(props, ref) {
@@ -13095,7 +13105,8 @@ function _KeyValueTableForm(props, ref) {
     validateKey,
     validateValue,
     onSubmit,
-    keyTitle
+    keyTitle,
+    formatPopover
   } = props;
   const {
     t: t2,
@@ -13279,7 +13290,7 @@ function _KeyValueTableForm(props, ref) {
       validateTriggerType: eagle.ValidateTriggerType.Aggressive,
       disableBatchFilling: true,
       hideEmptyTable: true
-    }), isHideLabelFormatPopover || _value.length === 0 ? null : /* @__PURE__ */ common.jsxRuntimeExports.jsx(LabelFormatPopover, {
+    }), isHideLabelFormatPopover || _value.length === 0 ? null : formatPopover ?? /* @__PURE__ */ common.jsxRuntimeExports.jsx(LabelFormatPopover, {
       noValueValidation
     })]
   });
@@ -16075,8 +16086,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 = React.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 React.useMemo(() => {
+    if (!shouldShowExtraSubmitButton) {
+      return fallbackFooter;
+    }
+    return /* @__PURE__ */ common.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 = lodashEs.omit(saveButtonProps, "onClick");
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+    className: FooterStyle,
+    children: [/* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+      className: FooterLeftStyle,
+      children: [showPrevButton ? /* @__PURE__ */ common.jsxRuntimeExports.jsxs(eagle.Button, {
+        type: "link",
+        onClick: onPrevStep,
+        children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx(iconsReact.ArrowChevronLeft16BoldBlueIcon, {
+          className: PrevIconStyle
+        }), prevText]
+      }) : null, errorText ? /* @__PURE__ */ common.jsxRuntimeExports.jsxs("span", {
+        className: common.cx_default(ErrorStyle, eagle.Typo.Label.l2_regular),
+        children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx(iconsReact.ExclamationErrorCircleFill16RedIcon, {
+          className: ErrorIconStyle
+        }), errorText]
+      }) : null]
+    }), /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+      className: FooterRightStyle,
+      children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Button, {
+        type: "quiet",
+        size: "large",
+        onClick: onCancel,
+        children: /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
+          className: eagle.Typo.Label.l1_bold_title,
+          children: cancelText
+        })
+      }), /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Button, {
+        size: "large",
+        type: "secondary",
+        onClick: onNextStep,
+        children: nextStepText
+      }), /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Button, {
+        ...finalSaveButtonProps,
+        size: "large",
+        type: "primary",
+        onClick: onSubmit,
+        children: extraSubmitText
+      })]
+    })]
+  });
+};
 function FormModeSegmentControl({
   formConfig,
   mode,
@@ -16910,9 +17034,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({
@@ -16932,10 +17063,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;
@@ -16968,10 +17100,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;
@@ -16999,13 +17135,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));
         }
@@ -17102,6 +17238,10 @@ const useRefineForm = (props) => {
       errorNotification: false,
       successNotification: () => {
         var _a;
+        if (formConfig == null ? void 0 : formConfig.successMessage) {
+          const msg = typeof formConfig.successMessage === "function" ? formConfig.successMessage(id ? "edit" : "create") : formConfig.successMessage;
+          return { message: msg, description: "Success", type: "success" };
+        }
         const formValue = result.getValues();
         return {
           message: i18n2.t(id ? "dovetail.edit_resource_success" : "dovetail.create_success_toast", {
@@ -17119,6 +17259,7 @@ const useRefineForm = (props) => {
       resource: resourceConfig.name,
       action: id ? "edit" : "create",
       id,
+      dataProviderName: resourceConfig.dataProviderName,
       liveMode: id ? "auto" : "off",
       ...refineProps
     },
@@ -17132,10 +17273,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(
@@ -17143,8 +17285,10 @@ const useRefineForm = (props) => {
           )
         );
       });
+    } else if (message2 && responseErrorMsgs[0] !== message2) {
+      setResponseErrorMsgs([message2]);
     }
-  }, [formConfig, result, i18n2]);
+  }, [formConfig, result, i18n2, responseErrorMsgs]);
   return {
     formResult: result,
     responseErrorMsgs,
@@ -17165,10 +17309,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,
@@ -17177,7 +17317,6 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
         onSuccess == null ? void 0 : onSuccess(data2);
       },
       onMutationError() {
-        setIsSubmitting(false);
         onError == null ? void 0 : onError();
       },
       redirect: false,
@@ -17191,35 +17330,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 },
@@ -17234,6 +17349,7 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
     transformApplyValues: (formConfig == null ? void 0 : formConfig.transformApplyValues) || ((v) => v)
   });
   const yamlFormProps = React.useMemo(() => {
+    var _a2;
     if (isYamlMode) {
       return {
         ...customYamlFormProps,
@@ -17252,12 +17368,7 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
         isShowLayout: false,
         useFormProps: {
           redirect: false,
-          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
@@ -17287,6 +17398,7 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
     id,
     refineFormResult,
     formConfig == null ? void 0 : formConfig.beforeSubmit,
+    (_a = formConfig == null ? void 0 : formConfig.refineCoreProps) == null ? void 0 : _a.mutationMeta,
     transformApplyValues,
     onSaveButtonPropsChange,
     onSuccess,
@@ -17306,18 +17418,20 @@ const RefineFormContainer = React.forwardRef(function RefineFormContainer2({
     }),
     [refineFormResult.formResult]
   );
-  if (action === "edit" && !((_b = (_a = refineFormResult.formResult.getValues()) == null ? void 0 : _a.metadata) == null ? void 0 : _b.name)) {
+  const currentFormValues = refineFormResult.formResult.getValues();
+  const isReady = (formConfig == null ? void 0 : formConfig.isDataReady) ? formConfig.isDataReady(currentFormValues) : !!((_b = currentFormValues == null ? void 0 : currentFormValues.metadata) == null ? void 0 : _b.name);
+  if (action === "edit" && !isReady) {
     return /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Loading, {});
   }
   if (isYamlMode) {
     return /* @__PURE__ */ common.jsxRuntimeExports.jsx(YamlForm, { ...yamlFormProps });
   }
   return /* @__PURE__ */ common.jsxRuntimeExports.jsxs(common.jsxRuntimeExports.Fragment, { children: [
-    !(formConfig == null ? void 0 : formConfig.isDisabledChangeMode) ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(
+    !(formConfig == null ? void 0 : formConfig.isDisabledChangeMode) && (formConfig == null ? void 0 : formConfig.changeModeAlert) !== false ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(
       eagle.Alert,
       {
         type: "warning",
-        message: i18n.t("dovetail.change_form_mode_alert"),
+        message: (formConfig == null ? void 0 : formConfig.changeModeAlert) ?? i18n.t("dovetail.change_form_mode_alert"),
         style: { marginBottom: "16px" }
       }
     ) : void 0,
@@ -17371,7 +17485,7 @@ function ConfirmModal({
   });
 }
 function FormModal(props) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const {
     id,
     yamlFormProps: customYamlFormProps,
@@ -17509,37 +17623,59 @@ 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
-      }), ((_c = resourceConfig.formConfig) == null ? void 0 : _c.formType) === FormType.FORM ? /* @__PURE__ */ common.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: {
-      ...lodashEs.omit(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__ */ common.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__ */ 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
+        }), ((_d = resourceConfig.formConfig) == null ? void 0 : _d.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: (_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__ */ common.jsxRuntimeExports.jsx("div", {
+        className: FormDescStyle,
+        children: desc
+      }) : void 0, formEle]
+    })
   });
 }
 const RefineFormPage_1v0fhor = "";
@@ -20696,6 +20832,7 @@ exports.FormItemLayout = FormItemLayout;
 exports.FormModal = FormModal;
 exports.FormMode = FormMode;
 exports.FormType = FormType;
+exports.FormatRulePopover = FormatRulePopover;
 exports.GlobalStoreContext = GlobalStoreContext;
 exports.INGRESS_INIT_VALUE = INGRESS_INIT_VALUE;
 exports.ImageField = ImageField;