@dovetail-v2/refine 0.1.31 → 0.2.0-alpha.0

package/dist/refine.umd.cjs

@@ -1242,7 +1242,7 @@ var __publicField = (obj, key, value) => {
   const taint_effect_NoExecute_tooltip_3$1 = "Pods with tolerance and a duration set will run for the specified time and then be evicted.";
   const taint_effect_PreferNoSchedule_tooltip$1 = "The control plane will try to avoid scheduling pods without taint tolerance to the node, but full avoidance isn't guaranteed.";
   const cant_delete_resource$1 = "Unable to delete {{resource}}";
-  const cant_delete_resource_with_name$1 = "The {{resource}} <0>{name}</0> cannot be deleted.";
+  const cant_delete_resource_with_name$1 = "The {{resource}} <0>{{name}}</0> cannot be deleted.";
   const close$1 = "Close";
   const dovetail$1 = {
     copy: copy$2,
@@ -11438,11 +11438,21 @@ var __publicField = (obj, key, value) => {
     RESOURCE_GROUP2["PROJECT"] = "PROJECT";
     return RESOURCE_GROUP2;
   })(RESOURCE_GROUP || {});
+  var FormContainerType = /* @__PURE__ */ ((FormContainerType2) => {
+    FormContainerType2["PAGE"] = "PAGE";
+    FormContainerType2["MODAL"] = "MODAL";
+    return FormContainerType2;
+  })(FormContainerType || {});
   var FormType = /* @__PURE__ */ ((FormType2) => {
-    FormType2["PAGE"] = "PAGE";
-    FormType2["MODAL"] = "MODAL";
+    FormType2["YAML"] = "YAML";
+    FormType2["FORM"] = "FORM";
     return FormType2;
   })(FormType || {});
+  var FormMode = /* @__PURE__ */ ((FormMode2) => {
+    FormMode2["FORM"] = "FORM";
+    FormMode2["YAML"] = "YAML";
+    return FormMode2;
+  })(FormMode || {});
   function getInitialValues(config) {
     return config.initValue || {
       apiVersion: config.apiVersion,
@@ -11459,11 +11469,11 @@ var __publicField = (obj, key, value) => {
     const pushModal = eagle.usePushModal();
     const go = core.useGo();
     return function openForm() {
-      var _a, _b, _c;
+      var _a, _b;
       if (resource == null ? void 0 : resource.name) {
         const config = configs[resource.name];
-        const formType = (_a = config.formConfig) == null ? void 0 : _a.formType;
-        if (formType === void 0 || formType === FormType.MODAL) {
+        const formType = (_a = config.formConfig) == null ? void 0 : _a.formContainerType;
+        if (formType === void 0 || formType === FormContainerType.MODAL) {
           pushModal({
             component: ((_b = config.formConfig) == null ? void 0 : _b.CustomFormModal) || FormModal,
             props: {
@@ -11471,8 +11481,7 @@ var __publicField = (obj, key, value) => {
               id: options == null ? void 0 : options.id,
               formProps: {
                 initialValues: getInitialValues(config)
-              },
-              renderForm: (options == null ? void 0 : options.renderForm) || ((_c = config.formConfig) == null ? void 0 : _c.renderForm)
+              }
             }
           });
         } else if (options == null ? void 0 : options.id) {
@@ -11520,12 +11529,13 @@ var __publicField = (obj, key, value) => {
       resource: resource == null ? void 0 : resource.name,
       action: AccessControlAuth.Delete
     });
+    const formType = ((_a = config.formConfig) == null ? void 0 : _a.formType) || FormType.FORM;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         eagle.Dropdown,
         {
           overlay: /* @__PURE__ */ jsxRuntimeExports.jsxs(eagle.Menu, { children: [
-            isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false || config.hideEdit ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Menu.Item, { onClick: openForm, children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.EditPen16PrimaryIcon, children: ((_a = config.formConfig) == null ? void 0 : _a.fields) ? t2("dovetail.edit") : t2("dovetail.edit_yaml") }) }),
+            isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false || config.hideEdit ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Menu.Item, { onClick: openForm, children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.EditPen16PrimaryIcon, children: formType === FormType.FORM ? t2("dovetail.edit") : t2("dovetail.edit_yaml") }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               eagle.Menu.Item,
               {
@@ -12383,7 +12393,7 @@ var __publicField = (obj, key, value) => {
                 marginRight: 8
               },
               onClick: openForm,
-              children: ((_e = config.formConfig) == null ? void 0 : _e.fields) ? t2("dovetail.edit") : t2("dovetail.edit_yaml")
+              children: ((_e = config.formConfig) == null ? void 0 : _e.formType) === FormType.FORM ? t2("dovetail.edit") : t2("dovetail.edit_yaml")
             })
           }) : null, /* @__PURE__ */ jsxRuntimeExports.jsx(Dropdown, {
             record,
@@ -19528,7 +19538,7 @@ var __publicField = (obj, key, value) => {
       }
     ]
   });
-  const style_j3z7so = "";
+  const style_10p48dp = "";
   const ToolBarStyle = "t1joof7s";
   const ToolBarHeaderStyle = "tti58uh";
   const ErrorIconStyle = "e15yt16p";
@@ -36323,6 +36333,33 @@ WARNING: This link could potentially be dangerous`)) {
       }
     );
   }
+  function FormModeSegmentControl({
+    formConfig,
+    mode,
+    onChangeMode
+  }) {
+    const { isDisabledChangeMode } = formConfig;
+    return !isDisabledChangeMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      eagle.SegmentControl,
+      {
+        style: { fontWeight: "normal" },
+        value: mode,
+        options: [
+          {
+            value: FormMode.FORM,
+            label: i18n.t("dovetail.form")
+          },
+          {
+            value: FormMode.YAML,
+            label: i18n.t("dovetail.yaml")
+          }
+        ],
+        onChange: (val) => {
+          onChangeMode(val);
+        }
+      }
+    ) : null;
+  }
   var isCheckBoxInput = (element) => element.type === "checkbox";
   var isDateObject = (value2) => value2 instanceof Date;
   var isNullOrUndefined = (value2) => value2 == null;
@@ -37900,8 +37937,8 @@ WARNING: This link could potentially be dangerous`)) {
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
   }
-  function useFieldsConfig(config, resourceId) {
-    var _a, _b, _c, _d;
+  function useFieldsConfig(config, formConfig, resourceId) {
+    var _a, _b, _c;
     const action = resourceId ? "edit" : "create";
     const listQuery = core.useList({
       resource: config == null ? void 0 : config.name,
@@ -37915,40 +37952,91 @@ WARNING: This link could potentially be dangerous`)) {
       meta: { resourceBasePath: config == null ? void 0 : config.basePath, kind: config == null ? void 0 : config.kind },
       id: resourceId
     });
-    return (_d = (_a = config == null ? void 0 : config.formConfig) == null ? void 0 : _a.fields) == null ? void 0 : _d.call(_a, {
-      record: (_b = showQuery.queryResult.data) == null ? void 0 : _b.data,
-      records: ((_c = listQuery.data) == null ? void 0 : _c.data) || [],
+    return (_c = formConfig == null ? void 0 : formConfig.fields) == null ? void 0 : _c.call(formConfig, {
+      record: (_a = showQuery.queryResult.data) == null ? void 0 : _a.data,
+      records: ((_b = listQuery.data) == null ? void 0 : _b.data) || [],
+      action
+    });
+  }
+  const RefineFormContent_ahna8x = "";
+  function renderCommonFormFiled(props) {
+    const {
+      field,
+      fieldConfig,
       action
+    } = props;
+    const {
+      value: value2,
+      onChange,
+      onBlur,
+      name: name2
+    } = field;
+    let ele = /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Fields.String, {
+      placeholder: fieldConfig.placeholder,
+      input: {
+        value: value2,
+        onChange,
+        onBlur,
+        name: name2,
+        onFocus: () => null
+      },
+      meta: {}
     });
+    switch (fieldConfig.type) {
+      case "number":
+        ele = /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Fields.Integer, {
+          className: "c154n7ie",
+          placeholder: fieldConfig.placeholder,
+          input: {
+            value: value2,
+            onChange,
+            onBlur,
+            name: name2,
+            onFocus: () => null
+          },
+          meta: {}
+        });
+    }
+    if (action === "edit" && fieldConfig.disabledWhenEdit) {
+      ele = /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+        children: value2
+      });
+    }
+    return ele;
   }
-  const RefineFormContent_7gh3uw = "";
   const RefineFormContent = (props) => {
     const {
       config,
       formResult,
       resourceId,
-      errorMsgs
+      errorMsgs,
+      formConfig
     } = props;
     const {
       control,
-      getValues
+      getValues,
+      watch,
+      trigger
     } = formResult;
     const action = resourceId ? "edit" : "create";
-    const formFieldsConfig = useFieldsConfig(config, resourceId);
-    const fields = formFieldsConfig == null ? void 0 : formFieldsConfig.map((c2) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Controller, {
+    const formValues = watch();
+    const formFieldsConfig = useFieldsConfig(config, formConfig, resourceId);
+    const fields = formFieldsConfig == null ? void 0 : formFieldsConfig.map((fieldConfig) => {
+      var _a;
+      const isDisplay = ((_a = fieldConfig.condition) == null ? void 0 : _a.call(fieldConfig, formValues, lodashEs.get(formValues, fieldConfig.path.join(".")))) !== false;
+      return isDisplay ? /* @__PURE__ */ jsxRuntimeExports.jsx(Controller, {
         control,
-        name: c2.path.join("."),
+        name: fieldConfig.path.join("."),
         rules: {
           validate(value2) {
             const formValue = getValues();
-            if (!c2.validators || c2.validators.length === 0)
+            if (!fieldConfig.validators || fieldConfig.validators.length === 0)
               return true;
-            for (const func of c2.validators) {
+            for (const func of fieldConfig.validators) {
               const {
                 isValid,
                 errorMsg
-              } = func(value2, formValue);
+              } = func(value2, formValue, FormType.FORM);
               if (!isValid)
                 return errorMsg;
             }
@@ -37956,79 +38044,42 @@ WARNING: This link could potentially be dangerous`)) {
           }
         },
         render: ({
-          field: {
-            onChange,
-            onBlur,
-            value: value2,
-            name: name2
-          },
+          field,
           fieldState
         }) => {
-          var _a, _b;
-          const formValue = getValues();
-          let ele = /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Fields.String, {
-            placeholder: c2.placeholder,
-            input: {
-              value: value2,
-              onChange,
-              onBlur,
-              name: name2,
-              onFocus: () => null
-            },
-            meta: {}
-          });
-          switch (c2.type) {
-            case "number":
-              ele = /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Fields.Integer, {
-                className: "c154n7ie",
-                placeholder: c2.placeholder,
-                input: {
-                  value: value2,
-                  onChange,
-                  onBlur,
-                  name: name2,
-                  onFocus: () => null
-                },
-                meta: {}
-              });
-          }
-          if (action === "edit" && c2.disabledWhenEdit) {
-            ele = /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-              children: value2
-            });
-          }
-          if (c2 == null ? void 0 : c2.render) {
-            ele = c2.render(value2, onChange, formValue, onBlur, action, control);
-          }
-          if (c2.helperText) {
-            ele = /* @__PURE__ */ jsxRuntimeExports.jsxs(eagle.Space, {
-              size: 4,
-              direction: "vertical",
-              className: "c1c9j4da",
-              children: [ele, /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-                className: cx_default(eagle.Typo.Footnote.f2_regular, "cjxv8cf"),
-                children: c2.helperText
-              })]
-            });
+          var _a2;
+          const renderProps = {
+            field,
+            fieldConfig,
+            action,
+            control,
+            trigger
+          };
+          let ele = null;
+          if (fieldConfig == null ? void 0 : fieldConfig.render) {
+            ele = fieldConfig.render(renderProps);
+          } else {
+            ele = renderCommonFormFiled(renderProps);
           }
           return /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Form.Item, {
-            label: c2.label,
+            label: fieldConfig.label,
             colon: false,
             labelCol: {
-              flex: `0 0 ${((_a = config == null ? void 0 : config.formConfig) == null ? void 0 : _a.labelWidth) || "216px"}`
+              flex: `0 0 ${(formConfig == null ? void 0 : formConfig.labelWidth) || "216px"}`
             },
-            help: (_b = fieldState.error) == null ? void 0 : _b.message,
+            help: (_a2 = fieldState.error) == null ? void 0 : _a2.message,
+            extra: fieldConfig.helperText,
             validateStatus: fieldState.invalid ? "error" : void 0,
-            "data-test-id": c2.key,
+            "data-test-id": fieldConfig.key,
             children: ele
-          }, c2.key);
+          }, fieldConfig.key);
         }
-      }, c2.key);
+      }, fieldConfig.key) : null;
     });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(eagle.Space, {
       direction: "vertical",
       size: 16,
-      className: "c1xsnuvk",
+      className: "c1c9j4da",
       children: [fields, /* @__PURE__ */ jsxRuntimeExports.jsx(FormErrorAlert, {
         errorMsgs: errorMsgs || [],
         style: {
@@ -38038,6 +38089,59 @@ WARNING: This link could potentially be dangerous`)) {
       })]
     });
   };
+  function immutableSet(obj, path2, value2) {
+    return lodashEs.setWith(lodashEs.clone(obj), path2, value2, lodashEs.clone);
+  }
+  function usePathMap(options) {
+    const { pathMap, transformInitValues, transformApplyValues } = options;
+    return {
+      /**
+       * Transforms initial values by mapping paths from source to target structure
+       * @param values Initial values to transform
+       * @returns Transformed values with updated paths
+       */
+      transformInitValues(values) {
+        const initValues = values._rawYaml || values;
+        let result = initValues;
+        for (const { from, to } of pathMap || []) {
+          result = immutableSet(initValues, to, lodashEs.get(initValues, from));
+          const fromPath = [...from];
+          const lastKey = fromPath.pop();
+          if (lastKey) {
+            const obj = lodashEs.get(result, fromPath.join("."));
+            if (obj && typeof obj === "object") {
+              delete obj[lastKey];
+            }
+          }
+        }
+        return (transformInitValues == null ? void 0 : transformInitValues(result)) || result;
+      },
+      /**
+       * Transforms values back to original structure before applying/saving
+       * @param values Values to transform back
+       * @returns Transformed values in original structure
+       */
+      transformApplyValues(values) {
+        let result = values;
+        for (const { from, to } of pathMap || []) {
+          result = immutableSet(
+            values,
+            from,
+            lodashEs.get(result, to)
+          );
+          const toPath = [...to];
+          const lastKey = toPath.pop();
+          if (lastKey) {
+            const obj = lodashEs.get(result, toPath.join("."));
+            if (obj && typeof obj === "object") {
+              delete obj[lastKey];
+            }
+          }
+        }
+        return (transformApplyValues == null ? void 0 : transformApplyValues(result)) || result;
+      }
+    };
+  }
   var isArray$4 = Array.isArray;
   var isArray_1 = isArray$4;
   var freeGlobal$1 = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
@@ -38675,8 +38779,12 @@ WARNING: This link could potentially be dangerous`)) {
     };
   };
   const useRefineForm = (props) => {
-    var _a, _b, _c;
-    const { config, id, refineProps } = props;
+    const { formConfig, config, id, refineProps } = props;
+    const { transformInitValues, transformApplyValues } = usePathMap({
+      pathMap: formConfig == null ? void 0 : formConfig.pathMap,
+      transformInitValues: formConfig == null ? void 0 : formConfig.transformInitValues,
+      transformApplyValues: formConfig == null ? void 0 : formConfig.transformApplyValues
+    });
     const [responseErrorMsgs, setResponseErrorMsgs] = React.useState([]);
     const { i18n: i18n2 } = useTranslation();
     const result = useForm({
@@ -38685,14 +38793,14 @@ WARNING: This link could potentially be dangerous`)) {
       refineCoreProps: {
         errorNotification: false,
         successNotification: () => {
-          var _a2;
+          var _a;
           const formValue = result.getValues();
           return {
             message: i18n2.t(
               id ? "dovetail.edit_resource_success" : "dovetail.create_success_toast",
               {
                 kind: transformResourceKindInSentence(config.displayName || config.kind, i18n2.language),
-                name: (_a2 = formValue.metadata) == null ? void 0 : _a2.name,
+                name: (_a = formValue.metadata) == null ? void 0 : _a.name,
                 interpolation: { escapeValue: false }
               }
             ).trim(),
@@ -38707,20 +38815,20 @@ WARNING: This link could potentially be dangerous`)) {
         ...refineProps
       },
       defaultValues: config == null ? void 0 : config.initValue,
-      transformApplyValues: (_a = config.formConfig) == null ? void 0 : _a.transformApplyValues,
-      transformInitValues: (_b = config.formConfig) == null ? void 0 : _b.transformInitValues,
-      ...(_c = config.formConfig) == null ? void 0 : _c.useFormProps
+      transformApplyValues,
+      transformInitValues,
+      ...formConfig == null ? void 0 : formConfig.useFormProps
     });
     React.useEffect(() => {
-      var _a2, _b2;
-      const response = (_a2 = result.refineCore.mutationResult.error) == null ? void 0 : _a2.response;
+      var _a, _b;
+      const response = (_a = result.refineCore.mutationResult.error) == null ? void 0 : _a.response;
       if (response && !(response == null ? void 0 : response.bodyUsed)) {
-        (_b2 = response.json) == null ? void 0 : _b2.call(response).then((body) => {
-          var _a3, _b3;
-          setResponseErrorMsgs([].concat(((_b3 = (_a3 = config.formConfig) == null ? void 0 : _a3.formatError) == null ? void 0 : _b3.call(_a3, body)) || getCommonErrors(body, i18n2)));
+        (_b = response.json) == null ? void 0 : _b.call(response).then((body) => {
+          var _a2;
+          setResponseErrorMsgs([].concat(((_a2 = formConfig == null ? void 0 : formConfig.formatError) == null ? void 0 : _a2.call(formConfig, body)) || getCommonErrors(body, i18n2)));
         });
       }
-    }, [config.formConfig, result, i18n2]);
+    }, [formConfig, result, i18n2]);
     return { formResult: result, responseErrorMsgs };
   };
   const index_2ivb33 = "";
@@ -39198,7 +39306,7 @@ WARNING: This link could potentially be dangerous`)) {
           const { path: path2, validators } = rule2;
           const value2 = lodashEs.get(formValue, path2);
           for (const validator of validators || []) {
-            const { isValid, errorMsg } = validator(value2, formValue);
+            const { isValid, errorMsg } = validator(value2, formValue, FormType.YAML);
             if (!isValid) {
               errorMap[path2.join(".")] = `${errorMsg}(${path2.join(".")})`;
               break;
@@ -39335,6 +39443,7 @@ WARNING: This link could potentially be dangerous`)) {
       schemaStrategy = "Optional",
       isShowLayout = true,
       useFormProps,
+      config,
       transformInitValues,
       transformApplyValues,
       onSaveButtonPropsChange,
@@ -39346,8 +39455,6 @@ WARNING: This link could potentially be dangerous`)) {
       resource
     } = core.useResource();
     const action = actionFromProps || actionFromResource;
-    const configs = React.useContext(ConfigsContext);
-    const config = configs[(resource == null ? void 0 : resource.name) || ""];
     const {
       t: t2,
       i18n: i18n2
@@ -39463,6 +39570,159 @@ WARNING: This link could potentially be dangerous`)) {
       })
     });
   }
+  function RefineFormContainer({
+    id,
+    config,
+    customYamlFormProps,
+    formConfig,
+    isYamlMode,
+    onSuccess,
+    onError,
+    onSaveButtonPropsChange
+  }) {
+    const action = id ? "edit" : "create";
+    const fieldsConfig = useFieldsConfig(config, formConfig, id);
+    const refineFormResult = useRefineForm({
+      config,
+      id,
+      refineProps: {
+        onMutationSuccess: () => {
+          onSuccess == null ? void 0 : onSuccess();
+        },
+        onMutationError() {
+          onError == null ? void 0 : onError();
+        },
+        redirect: false,
+        ...formConfig == null ? void 0 : formConfig.refineCoreProps
+      }
+    });
+    const yamlFormProps = React.useMemo(() => {
+      const transformApplyValues = (formConfig == null ? void 0 : formConfig.transformApplyValues) || ((v) => v);
+      return {
+        ...customYamlFormProps,
+        config,
+        transformInitValues: void 0,
+        transformApplyValues: void 0,
+        initialValuesForCreate: transformApplyValues(
+          refineFormResult.formResult.getValues()
+        ),
+        initialValuesForEdit: transformApplyValues(refineFormResult.formResult.getValues()),
+        id,
+        action,
+        isShowLayout: false,
+        useFormProps: {
+          redirect: false
+        },
+        rules: fieldsConfig == null ? void 0 : fieldsConfig.map((config2) => ({
+          path: config2.path,
+          validators: config2.validators
+        })),
+        onSaveButtonPropsChange,
+        onErrorsChange(errors) {
+          if (errors.length) {
+            onError == null ? void 0 : onError();
+          }
+        },
+        onFinish: onSuccess
+      };
+    }, [
+      action,
+      customYamlFormProps,
+      fieldsConfig,
+      config,
+      id,
+      refineFormResult,
+      formConfig,
+      onSaveButtonPropsChange,
+      onSuccess,
+      onError
+    ]);
+    React.useEffect(() => {
+      if (!isYamlMode) {
+        onSaveButtonPropsChange == null ? void 0 : onSaveButtonPropsChange(refineFormResult.formResult.saveButtonProps);
+      }
+    }, [isYamlMode, onSaveButtonPropsChange]);
+    if (isYamlMode) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(YamlForm, { ...yamlFormProps });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      !(formConfig == null ? void 0 : formConfig.isDisabledChangeMode) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        eagle.Alert,
+        {
+          type: "warning",
+          message: i18n.t("dovetail.change_form_mode_alert"),
+          style: { marginBottom: "16px" }
+        }
+      ) : void 0,
+      (formConfig == null ? void 0 : formConfig.renderForm) ? formConfig == null ? void 0 : formConfig.renderForm() : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        RefineFormContent,
+        {
+          formResult: refineFormResult.formResult,
+          config,
+          formConfig,
+          errorMsgs: refineFormResult.responseErrorMsgs,
+          resourceId: id
+        }
+      )
+    ] });
+  }
+  function YamlFormContainer({
+    id,
+    customYamlFormProps,
+    config,
+    formConfig,
+    onSuccess,
+    onError,
+    onSaveButtonPropsChange
+  }) {
+    const action = id ? "edit" : "create";
+    const {
+      transformInitValues,
+      transformApplyValues
+    } = usePathMap({
+      pathMap: formConfig == null ? void 0 : formConfig.pathMap,
+      transformInitValues: formConfig == null ? void 0 : formConfig.transformInitValues,
+      transformApplyValues: (formConfig == null ? void 0 : formConfig.transformApplyValues) || ((v) => v)
+    });
+    const yamlFormProps = React.useMemo(
+      () => {
+        return {
+          ...customYamlFormProps,
+          config,
+          transformInitValues,
+          transformApplyValues,
+          initialValuesForCreate: (customYamlFormProps == null ? void 0 : customYamlFormProps.initialValuesForCreate) || config.initValue,
+          initialValuesForEdit: void 0,
+          id,
+          action,
+          isShowLayout: false,
+          useFormProps: {
+            redirect: false
+          },
+          rules: void 0,
+          onSaveButtonPropsChange,
+          onErrorsChange(errors) {
+            if (errors.length) {
+              onError == null ? void 0 : onError();
+            }
+          },
+          onFinish: onSuccess
+        };
+      },
+      [
+        id,
+        action,
+        customYamlFormProps,
+        config,
+        transformInitValues,
+        transformApplyValues,
+        onSuccess,
+        onError,
+        onSaveButtonPropsChange
+      ]
+    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(YamlForm, { ...yamlFormProps });
+  }
   const FormModal_64brhp = "";
   const FormDescStyle = "f1nltbcu";
   const ErrorStyle = "e1qgcca6";
@@ -39496,11 +39756,11 @@ WARNING: This link could potentially be dangerous`)) {
     });
   }
   function FormModal(props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c;
     const {
       resource: resourceFromProps,
       id,
-      renderForm
+      yamlFormProps: customYamlFormProps
     } = props;
     const {
       i18n: i18n2
@@ -39509,74 +39769,17 @@ WARNING: This link could potentially be dangerous`)) {
       resource
     } = core.useResource();
     const configs = React.useContext(ConfigsContext);
-    const [yamlSaveButtonProps, setYamlSaveButtonProps] = React.useState({});
+    const [saveButtonProps, setSaveButtonProps] = React.useState({});
     const [isError, setIsError] = React.useState(false);
-    const [mode, setMode] = React.useState(
-      "form"
-      /* Form */
-    );
-    const isYamlMode = mode === "yaml";
+    const [mode, setMode] = React.useState(FormMode.FORM);
+    const isYamlMode = mode === FormMode.YAML;
     const popModal = eagle.usePopModal();
     const pushModal = eagle.usePushModal();
     const config = configs[resourceFromProps || (resource == null ? void 0 : resource.name) || ""];
-    const isDisabledChangeMode = (_a = config.formConfig) == null ? void 0 : _a.isDisabledChangeMode;
+    const isDisabledChangeMode = config.formConfig && "isDisabledChangeMode" in config.formConfig && config.formConfig.isDisabledChangeMode;
     const okText = i18n2.t(id ? "dovetail.save" : "dovetail.create");
     const action = id ? "edit" : "create";
-    const fieldsConfig = useFieldsConfig(config, id);
-    const refineFormResult = useRefineForm({
-      config,
-      id,
-      refineProps: {
-        onMutationSuccess: () => {
-          popModal();
-        },
-        redirect: false,
-        ...(_b = config.formConfig) == null ? void 0 : _b.refineCoreProps
-      }
-    });
-    const yamlFormProps = React.useMemo(() => {
-      var _a2, _b2, _c2;
-      const transformApplyValues = ((_a2 = config.formConfig) == null ? void 0 : _a2.transformApplyValues) || ((v) => v);
-      return {
-        ...props.formProps,
-        transformInitValues: isYamlMode ? void 0 : (_b2 = config.formConfig) == null ? void 0 : _b2.transformInitValues,
-        transformApplyValues: isYamlMode ? void 0 : transformApplyValues,
-        initialValuesForCreate: isYamlMode ? transformApplyValues(refineFormResult.formResult.getValues()) : ((_c2 = props.formProps) == null ? void 0 : _c2.initialValuesForCreate) || (config == null ? void 0 : config.initValue),
-        initialValuesForEdit: isYamlMode ? transformApplyValues(refineFormResult.formResult.getValues()) : void 0,
-        id,
-        action,
-        isShowLayout: false,
-        useFormProps: {
-          redirect: false
-        },
-        rules: isYamlMode ? fieldsConfig == null ? void 0 : fieldsConfig.map((config2) => ({
-          path: config2.path,
-          validators: config2.validators
-        })) : void 0,
-        onSaveButtonPropsChange: setYamlSaveButtonProps,
-        onErrorsChange(errors) {
-          setIsError(!!errors.length);
-        },
-        onFinish: popModal
-      };
-    }, [props.formProps, (_c = config.formConfig) == null ? void 0 : _c.transformInitValues, (_d = config.formConfig) == null ? void 0 : _d.transformApplyValues, config == null ? void 0 : config.initValue, id, action, refineFormResult.formResult, isYamlMode, fieldsConfig, popModal]);
-    const isYamlForm = !((_e = config.formConfig) == null ? void 0 : _e.fields);
-    const formEle = (() => {
-      if (renderForm) {
-        return renderForm(yamlFormProps);
-      }
-      if (isYamlForm || isYamlMode)
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(YamlForm, {
-          ...yamlFormProps
-        });
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(RefineFormContent, {
-        formResult: refineFormResult.formResult,
-        config,
-        errorMsgs: refineFormResult.responseErrorMsgs,
-        resourceId: id
-      });
-    })();
-    const saveButtonProps = isYamlForm || isYamlMode ? yamlSaveButtonProps : refineFormResult.formResult.saveButtonProps;
+    const isYamlForm = ((_a = config.formConfig) == null ? void 0 : _a.formType) === FormType.YAML;
     const onCancel = React.useCallback(() => {
       popModal();
     }, [popModal]);
@@ -39586,15 +39789,12 @@ WARNING: This link could potentially be dangerous`)) {
       (_a2 = saveButtonProps.onClick) == null ? void 0 : _a2.call(saveButtonProps, e2);
     }, [saveButtonProps]);
     const onChangeMode = React.useCallback((value2) => {
-      if (value2 === "form") {
+      if (value2 === FormMode.FORM) {
         pushModal({
           component: ConfirmModal,
           props: {
             onOk: () => {
-              setMode(
-                "form"
-                /* Form */
-              );
+              setMode(FormMode.FORM);
             }
           }
         });
@@ -39602,17 +39802,18 @@ WARNING: This link could potentially be dangerous`)) {
         setMode(value2);
       }
     }, [pushModal]);
-    const errorText = (() => {
-      if (!!refineFormResult.responseErrorMsgs.length || isError) {
+    const errorText = React.useMemo(() => {
+      if (isError) {
         return i18n2.t(id ? "dovetail.save_failed" : "dovetail.create_failed");
       }
-    })();
+      return "";
+    }, [isError, id, i18n2]);
     const title = React.useMemo(() => {
-      var _a2, _b2, _c2, _d2;
+      var _a2, _b2, _c2, _d;
       if (typeof ((_a2 = config.formConfig) == null ? void 0 : _a2.formTitle) === "string")
         return (_b2 = config.formConfig) == null ? void 0 : _b2.formTitle;
       if (typeof ((_c2 = config.formConfig) == null ? void 0 : _c2.formTitle) === "function") {
-        return (_d2 = config.formConfig) == null ? void 0 : _d2.formTitle(action);
+        return (_d = config.formConfig) == null ? void 0 : _d.formTitle(action);
       }
       const label2 = config.displayName || (config == null ? void 0 : config.kind);
       return i18n2.t(id ? "dovetail.edit_resource" : "dovetail.create_resource", {
@@ -39620,14 +39821,41 @@ WARNING: This link could potentially be dangerous`)) {
       });
     }, [action, config.formConfig, config.displayName, config == null ? void 0 : config.kind, i18n2, id]);
     const desc = React.useMemo(() => {
-      var _a2, _b2, _c2, _d2;
+      var _a2, _b2, _c2, _d;
       if (typeof ((_a2 = config.formConfig) == null ? void 0 : _a2.formDesc) === "string")
         return (_b2 = config.formConfig) == null ? void 0 : _b2.formDesc;
       if (typeof ((_c2 = config.formConfig) == null ? void 0 : _c2.formDesc) === "function") {
-        return (_d2 = config.formConfig) == null ? void 0 : _d2.formDesc(action);
+        return (_d = config.formConfig) == null ? void 0 : _d.formDesc(action);
       }
       return "";
     }, [action, config.formConfig]);
+    const formEle = React.useMemo(() => {
+      var _a2;
+      const commonFormProps = {
+        id,
+        config,
+        customYamlFormProps,
+        onSaveButtonPropsChange: setSaveButtonProps,
+        onError: () => {
+          setIsError(true);
+        },
+        onSuccess: () => {
+          setIsError(false);
+          popModal();
+        }
+      };
+      if (config.formConfig && (((_a2 = config.formConfig) == null ? void 0 : _a2.formType) === FormType.FORM || "fields" in config.formConfig)) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(RefineFormContainer, {
+          ...commonFormProps,
+          isYamlMode,
+          formConfig: config.formConfig
+        });
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(YamlFormContainer, {
+        ...commonFormProps,
+        formConfig: config.formConfig
+      });
+    }, [id, customYamlFormProps, config, isYamlMode, popModal, setSaveButtonProps]);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(eagle.Modal, {
       className: cx_default(FullscreenModalStyle),
       style: {
@@ -39638,21 +39866,10 @@ WARNING: This link could potentially be dangerous`)) {
         className: TitleWrapperStyle,
         children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
           children: title
-        }), !(isYamlForm || isDisabledChangeMode) ? /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.SegmentControl, {
-          style: {
-            fontWeight: "normal"
-          },
-          value: mode,
-          options: [{
-            value: "form",
-            label: i18n2.t("dovetail.form")
-          }, {
-            value: "yaml",
-            label: i18n2.t("dovetail.yaml")
-          }],
-          onChange: (val) => {
-            onChangeMode(val);
-          }
+        }), ((_b = config.formConfig) == null ? void 0 : _b.formType) === FormType.FORM ? /* @__PURE__ */ jsxRuntimeExports.jsx(FormModeSegmentControl, {
+          formConfig: config.formConfig,
+          mode,
+          onChangeMode
         }) : null]
       }),
       error: errorText ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
@@ -39661,7 +39878,7 @@ WARNING: This link could potentially be dangerous`)) {
       }) : "",
       okButtonProps: {
         ...saveButtonProps,
-        children: (_f = config.formConfig) == null ? void 0 : _f.saveButtonText,
+        children: (_c = config.formConfig) == null ? void 0 : _c.saveButtonText,
         onClick: onOk
       },
       closeIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseCircleFilled$1, {}),
@@ -39672,12 +39889,6 @@ WARNING: This link could potentially be dangerous`)) {
       children: [desc ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
         className: FormDescStyle,
         children: desc
-      }) : void 0, !isYamlForm && mode === "form" && !isDisabledChangeMode ? /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Alert, {
-        type: "warning",
-        message: i18n2.t("dovetail.change_form_mode_alert"),
-        style: {
-          marginBottom: "16px"
-        }
       }) : void 0, formEle]
     });
   }
@@ -39732,10 +39943,11 @@ WARNING: This link could potentially be dangerous`)) {
       return {
         initialValues: getInitialValues(config),
         transformInitValues: (_a2 = config.formConfig) == null ? void 0 : _a2.transformInitValues,
-        transformApplyValues: (_b = config.formConfig) == null ? void 0 : _b.transformApplyValues
+        transformApplyValues: (_b = config.formConfig) == null ? void 0 : _b.transformApplyValues,
+        config
       };
     }, [config]);
-    if ((_a = config.formConfig) == null ? void 0 : _a.fields) {
+    if (((_a = config.formConfig) == null ? void 0 : _a.formType) === FormType.FORM) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(RefineFormPage, { config });
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(YamlForm, { ...formProps });
@@ -39748,7 +39960,7 @@ WARNING: This link could potentially be dangerous`)) {
         /* @__PURE__ */ jsxRuntimeExports.jsx(reactRouterDom.Route, { path: `${urlPrefix}/${config.name}`, exact: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResourceList, { config }) }),
         !config.noShow ? /* @__PURE__ */ jsxRuntimeExports.jsx(reactRouterDom.Route, { path: `${urlPrefix}/${config.name}/show`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResourceShow, { config }) }) : null,
         // the modals would render in ModalStack
-        ((_a = config.formConfig) == null ? void 0 : _a.formType) === FormType.PAGE ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        ((_a = config.formConfig) == null ? void 0 : _a.formContainerType) === FormContainerType.PAGE ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(reactRouterDom.Route, { path: `${urlPrefix}/${config.name}/create`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResourceForm, { config }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(reactRouterDom.Route, { path: `${urlPrefix}/${config.name}/edit`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResourceForm, { config }) })
         ] }) : null
@@ -41317,8 +41529,10 @@ WARNING: This link could potentially be dangerous`)) {
   exports2.EventModel = EventModel;
   exports2.EventsTab = EventsTab;
   exports2.EventsTableTabField = EventsTableTabField;
+  exports2.FormContainerType = FormContainerType;
   exports2.FormErrorAlert = FormErrorAlert;
   exports2.FormModal = FormModal;
+  exports2.FormMode = FormMode;
   exports2.FormType = FormType;
   exports2.GlobalStoreContext = GlobalStoreContext;
   exports2.INGRESS_INIT_VALUE = INGRESS_INIT_VALUE;
@@ -41511,6 +41725,7 @@ WARNING: This link could potentially be dangerous`)) {
   exports2.namespaceRules = namespaceRules;
   exports2.pruneBeforeEdit = pruneBeforeEdit;
   exports2.relationPlugin = relationPlugin;
+  exports2.renderCommonFormFiled = renderCommonFormFiled;
   exports2.resolveRef = resolveRef;
   exports2.rfc1035LabelRules = rfc1035LabelRules;
   exports2.rfc1123LabelRules = rfc1123LabelRules;