@dovetail-v2/refine 0.0.44 → 0.0.45-bowen.1

package/dist/{MonacoYamlDiffEditor-71c3ccc4.js → MonacoYamlDiffEditor-481880fe.js}

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports } from "./index-72d47bc9.js";
+import { j as jsxRuntimeExports } from "./index-ad1e8a1c.js";
 import * as monaco from "monaco-editor";
 import { useRef, useEffect } from "react";
 import "i18next";

package/dist/{index-72d47bc9.js → index-ad1e8a1c.js}

@@ -10,7 +10,7 @@ import React__default, { createElement, isValidElement, cloneElement, Children,
 import { ResourceContext, matchResourceFromRoute, useResource, useDelete, useNavigation, useBreadcrumb, useList, useParsed, useGo, useDeleteMany, CanAccess, useCan, useShow, useUpdate, useDataProvider, useRefineContext, useTranslate, useWarnAboutChange, useForm as useForm$2, flattenObjectKeys, pickNotDeprecated, useMenu, useTable, Refine } from "@refinedev/core";
 import { parse, stringify } from "qs";
 import { useLocation, useHistory, useParams, matchPath, Link, Route, NavLink, Router } from "react-router-dom";
-import { Typo, Tag, useUIKit, kitContext, Link as Link$1, OverflowTooltip, Tooltip, StatusCapsule, pushModal, Button, Icon as Icon$1, popModal, Loading, Divider, Fields, Form, Space, Modal, useMessage, ModalStack, KitStoreProvider } from "@cloudtower/eagle";
+import { Typo, Tag, useUIKit, kitContext, Link as Link$1, OverflowTooltip, Tooltip, StatusCapsule, pushModal, Button, Icon as Icon$1, popModal, Loading, Divider, Fields, Space, Form, Modal, useMessage, ModalStack, KitStoreProvider } from "@cloudtower/eagle";
 import { PlusAddCreateNew16BoldOntintIcon, EditPen16PrimaryIcon, Download16GradientBlueIcon, TrashBinDelete16Icon, MoreEllipsis324BoldSecondaryIcon, MoreEllipsis324BoldBlueIcon, MoreEllipsis316BoldBlueIcon, ArrowChevronLeft16BoldTertiaryIcon, ArrowChevronLeftSmall16BoldBlueIcon, EditPen16GradientBlueIcon, ViewEye16GradientGrayIcon, EntityFilterIgnoreGradient16GrayIcon, RecoverContinue16GradientBlueIcon, SuspendedPause16GradientBlueIcon, Retry16GradientBlueIcon, HierarchyTriangleRight16GrayIcon, HierarchyTriangleRight16BlueIcon, ClipboardCopy16GradientGrayIcon, ClipboardCopy16GradientBlueIcon, Retry16GradientGrayIcon, EditPen16GradientGrayIcon, Showdiff16GradientGrayIcon, Showdiff16GradientBlueIcon, XmarkFailedSeriousWarningFill16RedIcon, ExclamationErrorCircleFill16RedIcon, Pause16GradientBlueIcon } from "@cloudtower/icons-react";
 import { get as get$3, first, debounce, last, isObject as isObject$4, merge, keyBy } from "lodash-es";
 import yaml from "js-yaml";
@@ -9953,7 +9953,7 @@ const ServiceOutClusterAccessComponent = ({
     children: content || "-"
   });
 };
-const index_1wlqq0y = "";
+const index_10ylmu3 = "";
 const TagWrapper = "t13a6vox";
 const TagStyle = "t12ikbmp";
 const Tags = (props) => {
@@ -9992,23 +9992,24 @@ const StateTag = ({
   const {
     t: t2
   } = useTranslation();
-  const colorMap = {
-    updating: "blue",
+  const statusMap = {
+    updating: "loading",
     ready: "green",
     completed: "gray",
     failed: "red",
     suspended: "warning",
-    running: "blue",
-    succeeded: "green",
-    unknown: "warning",
-    terminating: "red",
-    pending: "gray",
+    running: "green",
+    succeeded: "blue",
+    unknown: "gray",
+    terminating: "loading",
+    pending: "warning",
     waiting: "warning",
     terminated: "red"
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(kit.statusCapsule, {
     className: cx_default(className, StateTagStyle, hideBackground && "no-background"),
-    color: colorMap[state2],
+    color: statusMap[state2] !== "loading" ? statusMap[state2] : void 0,
+    loading: statusMap[state2] === "loading",
     children: t2(`dovetail.${state2 || "updating"}`)
   });
 };
@@ -10683,7 +10684,7 @@ const IngressRulesTable = ({ ingress }) => {
     }
   );
 };
-const KeyValue_1v1utgj = "";
+const KeyValue_q4vd5r = "";
 const ContentBlockStyle = "c8jy7dc";
 const KeyStyle = "k2sddxl";
 const ValueStyle$2 = "v16vicsr";
@@ -18314,7 +18315,7 @@ function parseJSON(value2) {
   }
 }
 const GlobalStoreContext = createContext({});
-const index_1uuzt53 = "";
+const index_1xad2h9 = "";
 const SelectStyle = "sj0ggy";
 const DropdownStyle = "d1eo8uqs";
 const SearchInputStyle = "s64gojc";
@@ -18350,6 +18351,7 @@ const NamespacesFilter = ({
     t: t2
   } = useTranslation();
   const [search, setSearch] = useState("");
+  const [tagMaxWidth, setTagMaxWidth] = useState("");
   const {
     data: data2,
     isLoading
@@ -18364,91 +18366,144 @@ const NamespacesFilter = ({
     }
   });
   const [value2, setValue] = useLocalStorage(NS_STORE_KEY, [ALL_NS]);
+  const [open, setOpen] = useState(false);
   const debouncedSetSearch = debounce(setSearch, 100);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.select, {
-    loading: isLoading,
-    style: {
-      width: 278
-    },
-    className: cx_default(SelectStyle, className),
-    dropdownClassName: DropdownStyle,
-    searchValue: search,
-    virtual: false,
-    input: {
-      value: value2,
-      onChange(value22) {
-        if (last(value22) === ALL_NS || value22.length === 0) {
-          setValue([ALL_NS]);
-        } else {
-          setValue(value22.filter((namespace2) => namespace2 !== ALL_NS));
+  const MAX_TAG_COUNT = 8;
+  const COUNT_TAG_WIDTH = 22;
+  const TAG_GAP = 4;
+  const PADDING = 36;
+  const hasCountTag = value2.length > MAX_TAG_COUNT;
+  const WRAPPER_CLASS = "d2-namespace-select-wrapper";
+  const SELECT_CLASS = "d2-namespace-select";
+  const calcTagMaxWidth = useCallback(() => {
+    const wrapper = document.querySelector(`.${WRAPPER_CLASS}`);
+    const n2 = Math.min(value2.length, MAX_TAG_COUNT);
+    const tagWidth = ((wrapper == null ? void 0 : wrapper.offsetWidth) || 0) / n2;
+    const gapsWidth = (Math.min(value2.length, MAX_TAG_COUNT + 1) - 1) * TAG_GAP;
+    const paddingAndCountTagWidth = PADDING + (hasCountTag ? COUNT_TAG_WIDTH : 0);
+    const perTagMaxWidth = tagWidth - (paddingAndCountTagWidth + gapsWidth) / n2;
+    setTagMaxWidth(`${perTagMaxWidth}px`);
+  }, [value2, hasCountTag]);
+  useEffect(() => {
+    calcTagMaxWidth();
+  }, [calcTagMaxWidth]);
+  useEffect(() => {
+    window.addEventListener("resize", calcTagMaxWidth);
+    return () => {
+      window.removeEventListener("resize", calcTagMaxWidth);
+    };
+  }, [calcTagMaxWidth]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+    className: WRAPPER_CLASS,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.select, {
+      loading: isLoading,
+      className: cx_default(SelectStyle, SELECT_CLASS, className),
+      style: {
+        "--tag-max-width": tagMaxWidth
+      },
+      dropdownClassName: DropdownStyle,
+      searchValue: search,
+      virtual: false,
+      input: {
+        value: value2,
+        onChange(value22) {
+          if (last(value22) === ALL_NS || value22.length === 0) {
+            setValue([ALL_NS]);
+          } else {
+            setValue(value22.filter((namespace2) => namespace2 !== ALL_NS));
+          }
         }
-      }
-    },
-    dropdownRender: (menu) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-      className: SelectContentStyle,
-      children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.searchInput, {
-        style: {
-          width: "100%"
-        },
-        className: SearchInputStyle,
-        onChange: debouncedSetSearch,
-        placeholder: t2("dovetail.please_input")
-      }), menu, isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.loading, {}) : null]
-    }),
-    tagRender: ({
-      label: label2,
-      value: value22,
-      closable,
-      onClose
-    }) => {
-      const isCountToken = label2 !== value22 && typeof label2 === "string";
-      const isAll = value22 === ALL_NS;
-      return isAll ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-        style: {
-          marginLeft: 8
-        },
-        children: label2
-      }) : /* @__PURE__ */ jsxRuntimeExports.jsx(kit.token, {
-        className: cx_default(isCountToken ? CountTokenStyle : TokenStyle, isCountToken ? "" : "closable-token"),
+      },
+      dropdownRender: (menu) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+        className: SelectContentStyle,
+        children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.searchInput, {
+          style: {
+            width: "100%"
+          },
+          className: SearchInputStyle,
+          onChange: debouncedSetSearch,
+          placeholder: t2("dovetail.please_input")
+        }), menu, isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.loading, {}) : null]
+      }),
+      tagRender: ({
+        label: label2,
+        value: namespaceValue,
         closable,
-        size: "medium",
-        onClose,
+        onClose
+      }) => {
+        const isCountToken = label2 !== namespaceValue && typeof label2 === "string";
+        const isAll = namespaceValue === ALL_NS;
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+          onClick: () => {
+            setOpen(!open);
+          },
+          children: isAll ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+            style: {
+              marginLeft: 8
+            },
+            children: [label2, "..."]
+          }) : /* @__PURE__ */ jsxRuntimeExports.jsx(kit.token, {
+            className: cx_default(isCountToken ? CountTokenStyle : TokenStyle, isCountToken ? "" : "closable-token"),
+            closable,
+            size: "medium",
+            onClose,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
+              content: isCountToken ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.tooltip, {
+                title: isCountToken ? value2.slice(MAX_TAG_COUNT).map((namespace2, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+                  children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+                    children: namespace2
+                  }), index !== value2.length - 1 - MAX_TAG_COUNT ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.divider, {
+                    style: {
+                      margin: "6px 0",
+                      borderColor: "rgba(107, 128, 167, 0.60)"
+                    }
+                  }) : null]
+                })) : null,
+                trigger: ["hover"],
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                  children: label2.replace(/[\s\.]/g, "")
+                })
+              }) : label2
+            })
+          })
+        });
+      },
+      maxTagCount: MAX_TAG_COUNT,
+      optionLabelProp: "label",
+      showArrow: true,
+      showSearch: false,
+      open,
+      onDropdownVisibleChange: (open2) => {
+        setOpen(open2);
+      },
+      multiple: true,
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
+        value: "_all",
+        label: t2("dovetail.all_namespaces"),
+        className: AllNamespaceOptionStyle,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
-          content: isCountToken ? label2.replace(/[\s\.]/g, "") : label2
+          content: t2("dovetail.all_namespaces"),
+          className: LabelWrapperStyle
         })
-      });
-    },
-    maxTagCount: 1,
-    optionLabelProp: "label",
-    showArrow: true,
-    showSearch: false,
-    multiple: true,
-    children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
-      value: "_all",
-      label: t2("dovetail.all_namespaces"),
-      className: AllNamespaceOptionStyle,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
-        content: t2("dovetail.all_namespaces"),
-        className: LabelWrapperStyle
-      })
-    }, "_all"), /* @__PURE__ */ jsxRuntimeExports.jsx(kit.selectOptGroup, {
-      label: "",
-      className: SelectOptionGroupStyle,
-      children: data2 == null ? void 0 : data2.data.map((namespace2) => {
-        const {
-          name: name2
-        } = namespace2.metadata;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
-          value: name2,
-          label: name2,
-          className: OptionStyle,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
-            content: name2,
-            className: LabelWrapperStyle
-          })
-        }, name2);
-      })
-    })]
+      }, "_all"), /* @__PURE__ */ jsxRuntimeExports.jsx(kit.selectOptGroup, {
+        label: "",
+        className: SelectOptionGroupStyle,
+        children: data2 == null ? void 0 : data2.data.map((namespace2) => {
+          const {
+            name: name2
+          } = namespace2.metadata;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
+            value: name2,
+            label: name2,
+            className: OptionStyle,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
+              content: name2,
+              className: LabelWrapperStyle
+            })
+          }, name2);
+        })
+      })]
+    })
   });
 };
 const index_hp158y = "";
@@ -21724,20 +21779,44 @@ function useForm$1(props = {}) {
   _formControl.current.formState = getProxyFormState(formState, control);
   return _formControl.current;
 }
-const RefineFormContent_1in3vad = "";
+const RefineFormContent_1tb00bi = "";
 const RefineFormContent = (props) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const {
     config,
     formResult,
-    action,
+    resourceId,
     errorMsg
   } = props;
   const {
     control,
     getValues
   } = formResult;
-  const fields = (_b = (_a = config == null ? void 0 : config.formConfig) == null ? void 0 : _a.fields) == null ? void 0 : _b.map((c2) => {
+  const action = resourceId ? "edit" : "create";
+  const listQuery = useList({
+    resource: config == null ? void 0 : config.name,
+    meta: {
+      resourceBasePath: config == null ? void 0 : config.basePath,
+      kind: config == null ? void 0 : config.kind
+    },
+    pagination: {
+      mode: "off"
+    }
+  });
+  const showQuery = useShow({
+    resource: config == null ? void 0 : config.name,
+    meta: {
+      resourceBasePath: config == null ? void 0 : config.basePath,
+      kind: config == null ? void 0 : config.kind
+    },
+    id: resourceId
+  });
+  const formFieldsConfig = (_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) || [],
+    action
+  });
+  const fields = formFieldsConfig == null ? void 0 : formFieldsConfig.map((c2) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Controller, {
       control,
       name: c2.path.join("."),
@@ -21769,6 +21848,7 @@ const RefineFormContent = (props) => {
         var _a2;
         const formValue = getValues();
         let ele = /* @__PURE__ */ jsxRuntimeExports.jsx(Fields.String, {
+          placeholder: c2.placeholder,
           input: {
             value: value2,
             onChange,
@@ -21796,6 +21876,17 @@ const RefineFormContent = (props) => {
             children: value2
           });
         }
+        if (c2.helperText) {
+          ele = /* @__PURE__ */ jsxRuntimeExports.jsxs(Space, {
+            size: 4,
+            direction: "vertical",
+            className: "c154n7ie",
+            children: [c2, /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+              className: cx_default(Typo.Footnote.f2_regular, "c1c9j4da"),
+              children: c2.helperText
+            })]
+          });
+        }
         if (c2 == null ? void 0 : c2.render) {
           ele = c2.render(value2, onChange, formValue, onBlur, action);
         }
@@ -21813,7 +21904,7 @@ const RefineFormContent = (props) => {
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Space, {
     direction: "vertical",
-    className: "c154n7ie",
+    className: "cjxv8cf",
     children: [fields, /* @__PURE__ */ jsxRuntimeExports.jsx(FormErrorAlert, {
       errorMsgs: errorMsg ? [errorMsg] : [],
       style: {
@@ -22453,7 +22544,6 @@ const useForm = ({
   };
 };
 const useRefineForm = (props) => {
-  var _a;
   const { config, id, refineProps } = props;
   const [responseErrorMsg, setResponseErrorMsg] = useState("");
   const i18n2 = useTranslation();
@@ -22486,15 +22576,15 @@ const useRefineForm = (props) => {
     defaultValues: config == null ? void 0 : config.initValue
   });
   useEffect(() => {
-    var _a2, _b;
-    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)) {
       (_b = response.json) == null ? void 0 : _b.call(response).then((body) => {
-        var _a3, _b2;
-        setResponseErrorMsg(((_b2 = (_a3 = config.formConfig) == null ? void 0 : _a3.formatError) == null ? void 0 : _b2.call(_a3, body)) || body.message);
+        var _a2, _b2;
+        setResponseErrorMsg(((_b2 = (_a2 = config.formConfig) == null ? void 0 : _a2.formatError) == null ? void 0 : _b2.call(_a2, body)) || body.message);
       });
     }
-  }, [config.formConfig, (_a = result.refineCore.mutationResult.error) == null ? void 0 : _a.response]);
+  }, [config.formConfig, result]);
   return { formResult: result, responseErrorMsg };
 };
 const index_12sfrn = "";
@@ -22505,7 +22595,7 @@ const Separator = () => {
   });
 };
 const MonacoYamlEditor = React__default.lazy(() => Promise.resolve().then(() => MonacoYamlEditor$2));
-const MonacoYamlDiffEditor = React__default.lazy(() => import("./MonacoYamlDiffEditor-71c3ccc4.js"));
+const MonacoYamlDiffEditor = React__default.lazy(() => import("./MonacoYamlDiffEditor-481880fe.js"));
 const YamlEditorComponent = forwardRef(
   function YamlEditorComponent2(props, ref) {
     const {
@@ -23020,9 +23110,18 @@ const useYamlForm = ({
           setEditorErrors(errors);
           return;
         }
-        const objectValues = editor.current ? yaml.load(((_a2 = editor.current) == null ? void 0 : _a2.getEditorValue()) || "") : values;
-        const finalValues = (transformApplyValues == null ? void 0 : transformApplyValues(objectValues)) || objectValues;
-        return onFinish(finalValues);
+        try {
+          const objectValues = editor.current ? yaml.load(((_a2 = editor.current) == null ? void 0 : _a2.getEditorValue()) || "") : values;
+          const finalValues = (transformApplyValues == null ? void 0 : transformApplyValues(objectValues)) || objectValues;
+          return onFinish(finalValues);
+        } catch (error) {
+          if (error instanceof Error) {
+            if (error.message === "expected a single document in the stream, but found more") {
+              setEditorErrors([t2("dovetail.only_support_one_yaml")]);
+              return;
+            }
+          }
+        }
       },
       onKeyUp,
       onValuesChange,
@@ -23244,7 +23343,7 @@ function FormModal(props) {
       formResult: refineFormResult.formResult,
       config,
       errorMsg: refineFormResult.responseErrorMsg,
-      action: id ? "edit" : "create"
+      resourceId: id
     });
   })();
   const saveButtonProps = isYamlForm ? yamlSaveButtonProps : refineFormResult.formResult.saveButtonProps;
@@ -23327,7 +23426,7 @@ const RefineFormPage = (props) => {
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(RefineFormContent, {
       config,
       formResult,
-      action
+      resourceId: id
     }), ";", /* @__PURE__ */ jsxRuntimeExports.jsx(Button, {
       ...saveButtonProps,
       onClick,
@@ -23728,7 +23827,11 @@ const PlainTextNameColumnRenderer = (i18n2) => {
     title: i18n2.t("dovetail.name"),
     sortable: true,
     width: 200,
-    sorter: CommonSorter(dataIndex)
+    sorter: CommonSorter(dataIndex),
+    render: (v) => /* @__PURE__ */ jsxRuntimeExports.jsx(OverflowTooltip, {
+      content: v,
+      tooltip: v
+    })
   };
 };
 const NameSpaceColumnRenderer = (i18n2) => {
@@ -24168,7 +24271,7 @@ const PortMappingColumnRenderer = (i18n2) => {
             href: `//${v.servicePort}`,
             target: "_blank",
             children: v.servicePort
-          }) : v.servicePort, " > ", v.targetPort, "/", v.protocol]
+          }) : v.servicePort, " ", "> ", v.targetPort, "/", v.protocol]
         }),
         tooltip: `${v.servicePort} > ${v.targetPort}/${v.protocol}`
       }, v.servicePort));

package/dist/refine.js

@@ -1,4 +1,4 @@
-import { b6, bK, A, az, aB, aj, bm, aJ, G, bA, bo, at, w, C, g, bO, am, aN, Y, bQ, a0, a7, bZ, ab, bp, bn, c0, ap, aT, t, ah, aY, b$, bL, b0, D, aG, b2, b_, aH, ax, b9, bN, bP, by, ak, a1, p, o, bR, I, aQ, aw, q, bq, bT, ao, aP, ac, ad, T, ae, aA, ai, aZ, b1, U, M, bz, b5, N, H, b, ay, O, b8, aV, aU, bS, bk, e, bs, V, P, aL, s, Z, bj, aI, bX, bW, aE, aR, n, an, aK, v, aS, aF, c4, bM, b3, ba, bb, al, R, $, a5, a4, b4, a2, bY, a3, a8, f, bF, bI, bE, bD, bG, bH, bB, bt, bw, bx, bv, bu, br, bc, aq, aO, af, k, bf, i, aC, c3, m, bg, aD, l, av, aM, h, c2, as, au, aX, aW, ar, S, a$, a_, c1, bC, bl, bh, bi, X, bV, _, W, bU, a6, aa, a9, c, bJ, ag, bd, x, J, d, Q, L, K, r, a, z, y, B, E, b7, F, be, u } from "./index-72d47bc9.js";
+import { b6, bK, A, az, aB, aj, bm, aJ, G, bA, bo, at, w, C, g, bO, am, aN, Y, bQ, a0, a7, bZ, ab, bp, bn, c0, ap, aT, t, ah, aY, b$, bL, b0, D, aG, b2, b_, aH, ax, b9, bN, bP, by, ak, a1, p, o, bR, I, aQ, aw, q, bq, bT, ao, aP, ac, ad, T, ae, aA, ai, aZ, b1, U, M, bz, b5, N, H, b, ay, O, b8, aV, aU, bS, bk, e, bs, V, P, aL, s, Z, bj, aI, bX, bW, aE, aR, n, an, aK, v, aS, aF, c4, bM, b3, ba, bb, al, R, $, a5, a4, b4, a2, bY, a3, a8, f, bF, bI, bE, bD, bG, bH, bB, bt, bw, bx, bv, bu, br, bc, aq, aO, af, k, bf, i, aC, c3, m, bg, aD, l, av, aM, h, c2, as, au, aX, aW, ar, S, a$, a_, c1, bC, bl, bh, bi, X, bV, _, W, bU, a6, aa, a9, c, bJ, ag, bd, x, J, d, Q, L, K, r, a, z, y, B, E, b7, F, be, u } from "./index-ad1e8a1c.js";
 import "@cloudtower/eagle";
 import "@refinedev/core";
 import "@cloudtower/icons-react";

package/dist/refine.umd.cjs

@@ -9959,7 +9959,7 @@ var __publicField = (obj, key, value) => {
       children: content || "-"
     });
   };
-  const index_1wlqq0y = "";
+  const index_10ylmu3 = "";
   const TagWrapper = "t13a6vox";
   const TagStyle = "t12ikbmp";
   const Tags = (props) => {
@@ -9998,23 +9998,24 @@ var __publicField = (obj, key, value) => {
     const {
       t: t2
     } = useTranslation();
-    const colorMap = {
-      updating: "blue",
+    const statusMap = {
+      updating: "loading",
       ready: "green",
       completed: "gray",
       failed: "red",
       suspended: "warning",
-      running: "blue",
-      succeeded: "green",
-      unknown: "warning",
-      terminating: "red",
-      pending: "gray",
+      running: "green",
+      succeeded: "blue",
+      unknown: "gray",
+      terminating: "loading",
+      pending: "warning",
       waiting: "warning",
       terminated: "red"
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(kit.statusCapsule, {
       className: cx_default(className, StateTagStyle, hideBackground && "no-background"),
-      color: colorMap[state2],
+      color: statusMap[state2] !== "loading" ? statusMap[state2] : void 0,
+      loading: statusMap[state2] === "loading",
       children: t2(`dovetail.${state2 || "updating"}`)
     });
   };
@@ -10689,7 +10690,7 @@ var __publicField = (obj, key, value) => {
       }
     );
   };
-  const KeyValue_1v1utgj = "";
+  const KeyValue_q4vd5r = "";
   const ContentBlockStyle = "c8jy7dc";
   const KeyStyle = "k2sddxl";
   const ValueStyle$2 = "v16vicsr";
@@ -18320,7 +18321,7 @@ var __publicField = (obj, key, value) => {
     }
   }
   const GlobalStoreContext = React.createContext({});
-  const index_1uuzt53 = "";
+  const index_1xad2h9 = "";
   const SelectStyle = "sj0ggy";
   const DropdownStyle = "d1eo8uqs";
   const SearchInputStyle = "s64gojc";
@@ -18356,6 +18357,7 @@ var __publicField = (obj, key, value) => {
       t: t2
     } = useTranslation();
     const [search, setSearch] = React.useState("");
+    const [tagMaxWidth, setTagMaxWidth] = React.useState("");
     const {
       data: data2,
       isLoading
@@ -18370,91 +18372,144 @@ var __publicField = (obj, key, value) => {
       }
     });
     const [value2, setValue] = useLocalStorage(NS_STORE_KEY, [ALL_NS]);
+    const [open, setOpen] = React.useState(false);
     const debouncedSetSearch = lodashEs.debounce(setSearch, 100);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.select, {
-      loading: isLoading,
-      style: {
-        width: 278
-      },
-      className: cx_default(SelectStyle, className),
-      dropdownClassName: DropdownStyle,
-      searchValue: search,
-      virtual: false,
-      input: {
-        value: value2,
-        onChange(value22) {
-          if (lodashEs.last(value22) === ALL_NS || value22.length === 0) {
-            setValue([ALL_NS]);
-          } else {
-            setValue(value22.filter((namespace2) => namespace2 !== ALL_NS));
+    const MAX_TAG_COUNT = 8;
+    const COUNT_TAG_WIDTH = 22;
+    const TAG_GAP = 4;
+    const PADDING = 36;
+    const hasCountTag = value2.length > MAX_TAG_COUNT;
+    const WRAPPER_CLASS = "d2-namespace-select-wrapper";
+    const SELECT_CLASS = "d2-namespace-select";
+    const calcTagMaxWidth = React.useCallback(() => {
+      const wrapper = document.querySelector(`.${WRAPPER_CLASS}`);
+      const n2 = Math.min(value2.length, MAX_TAG_COUNT);
+      const tagWidth = ((wrapper == null ? void 0 : wrapper.offsetWidth) || 0) / n2;
+      const gapsWidth = (Math.min(value2.length, MAX_TAG_COUNT + 1) - 1) * TAG_GAP;
+      const paddingAndCountTagWidth = PADDING + (hasCountTag ? COUNT_TAG_WIDTH : 0);
+      const perTagMaxWidth = tagWidth - (paddingAndCountTagWidth + gapsWidth) / n2;
+      setTagMaxWidth(`${perTagMaxWidth}px`);
+    }, [value2, hasCountTag]);
+    React.useEffect(() => {
+      calcTagMaxWidth();
+    }, [calcTagMaxWidth]);
+    React.useEffect(() => {
+      window.addEventListener("resize", calcTagMaxWidth);
+      return () => {
+        window.removeEventListener("resize", calcTagMaxWidth);
+      };
+    }, [calcTagMaxWidth]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+      className: WRAPPER_CLASS,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.select, {
+        loading: isLoading,
+        className: cx_default(SelectStyle, SELECT_CLASS, className),
+        style: {
+          "--tag-max-width": tagMaxWidth
+        },
+        dropdownClassName: DropdownStyle,
+        searchValue: search,
+        virtual: false,
+        input: {
+          value: value2,
+          onChange(value22) {
+            if (lodashEs.last(value22) === ALL_NS || value22.length === 0) {
+              setValue([ALL_NS]);
+            } else {
+              setValue(value22.filter((namespace2) => namespace2 !== ALL_NS));
+            }
           }
-        }
-      },
-      dropdownRender: (menu) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-        className: SelectContentStyle,
-        children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.searchInput, {
-          style: {
-            width: "100%"
-          },
-          className: SearchInputStyle,
-          onChange: debouncedSetSearch,
-          placeholder: t2("dovetail.please_input")
-        }), menu, isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.loading, {}) : null]
-      }),
-      tagRender: ({
-        label: label2,
-        value: value22,
-        closable,
-        onClose
-      }) => {
-        const isCountToken = label2 !== value22 && typeof label2 === "string";
-        const isAll = value22 === ALL_NS;
-        return isAll ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-          style: {
-            marginLeft: 8
-          },
-          children: label2
-        }) : /* @__PURE__ */ jsxRuntimeExports.jsx(kit.token, {
-          className: cx_default(isCountToken ? CountTokenStyle : TokenStyle, isCountToken ? "" : "closable-token"),
+        },
+        dropdownRender: (menu) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+          className: SelectContentStyle,
+          children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.searchInput, {
+            style: {
+              width: "100%"
+            },
+            className: SearchInputStyle,
+            onChange: debouncedSetSearch,
+            placeholder: t2("dovetail.please_input")
+          }), menu, isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.loading, {}) : null]
+        }),
+        tagRender: ({
+          label: label2,
+          value: namespaceValue,
           closable,
-          size: "medium",
-          onClose,
+          onClose
+        }) => {
+          const isCountToken = label2 !== namespaceValue && typeof label2 === "string";
+          const isAll = namespaceValue === ALL_NS;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+            onClick: () => {
+              setOpen(!open);
+            },
+            children: isAll ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
+              style: {
+                marginLeft: 8
+              },
+              children: [label2, "..."]
+            }) : /* @__PURE__ */ jsxRuntimeExports.jsx(kit.token, {
+              className: cx_default(isCountToken ? CountTokenStyle : TokenStyle, isCountToken ? "" : "closable-token"),
+              closable,
+              size: "medium",
+              onClose,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
+                content: isCountToken ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.tooltip, {
+                  title: isCountToken ? value2.slice(MAX_TAG_COUNT).map((namespace2, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+                    children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+                      children: namespace2
+                    }), index !== value2.length - 1 - MAX_TAG_COUNT ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.divider, {
+                      style: {
+                        margin: "6px 0",
+                        borderColor: "rgba(107, 128, 167, 0.60)"
+                      }
+                    }) : null]
+                  })) : null,
+                  trigger: ["hover"],
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                    children: label2.replace(/[\s\.]/g, "")
+                  })
+                }) : label2
+              })
+            })
+          });
+        },
+        maxTagCount: MAX_TAG_COUNT,
+        optionLabelProp: "label",
+        showArrow: true,
+        showSearch: false,
+        open,
+        onDropdownVisibleChange: (open2) => {
+          setOpen(open2);
+        },
+        multiple: true,
+        children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
+          value: "_all",
+          label: t2("dovetail.all_namespaces"),
+          className: AllNamespaceOptionStyle,
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
-            content: isCountToken ? label2.replace(/[\s\.]/g, "") : label2
+            content: t2("dovetail.all_namespaces"),
+            className: LabelWrapperStyle
           })
-        });
-      },
-      maxTagCount: 1,
-      optionLabelProp: "label",
-      showArrow: true,
-      showSearch: false,
-      multiple: true,
-      children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
-        value: "_all",
-        label: t2("dovetail.all_namespaces"),
-        className: AllNamespaceOptionStyle,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
-          content: t2("dovetail.all_namespaces"),
-          className: LabelWrapperStyle
-        })
-      }, "_all"), /* @__PURE__ */ jsxRuntimeExports.jsx(kit.selectOptGroup, {
-        label: "",
-        className: SelectOptionGroupStyle,
-        children: data2 == null ? void 0 : data2.data.map((namespace2) => {
-          const {
-            name: name2
-          } = namespace2.metadata;
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
-            value: name2,
-            label: name2,
-            className: OptionStyle,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
-              content: name2,
-              className: LabelWrapperStyle
-            })
-          }, name2);
-        })
-      })]
+        }, "_all"), /* @__PURE__ */ jsxRuntimeExports.jsx(kit.selectOptGroup, {
+          label: "",
+          className: SelectOptionGroupStyle,
+          children: data2 == null ? void 0 : data2.data.map((namespace2) => {
+            const {
+              name: name2
+            } = namespace2.metadata;
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
+              value: name2,
+              label: name2,
+              className: OptionStyle,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
+                content: name2,
+                className: LabelWrapperStyle
+              })
+            }, name2);
+          })
+        })]
+      })
     });
   };
   const index_hp158y = "";
@@ -21730,20 +21785,44 @@ var __publicField = (obj, key, value) => {
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
   }
-  const RefineFormContent_1in3vad = "";
+  const RefineFormContent_1tb00bi = "";
   const RefineFormContent = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const {
       config,
       formResult,
-      action,
+      resourceId,
       errorMsg
     } = props;
     const {
       control,
       getValues
     } = formResult;
-    const fields = (_b = (_a = config == null ? void 0 : config.formConfig) == null ? void 0 : _a.fields) == null ? void 0 : _b.map((c2) => {
+    const action = resourceId ? "edit" : "create";
+    const listQuery = core.useList({
+      resource: config == null ? void 0 : config.name,
+      meta: {
+        resourceBasePath: config == null ? void 0 : config.basePath,
+        kind: config == null ? void 0 : config.kind
+      },
+      pagination: {
+        mode: "off"
+      }
+    });
+    const showQuery = core.useShow({
+      resource: config == null ? void 0 : config.name,
+      meta: {
+        resourceBasePath: config == null ? void 0 : config.basePath,
+        kind: config == null ? void 0 : config.kind
+      },
+      id: resourceId
+    });
+    const formFieldsConfig = (_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) || [],
+      action
+    });
+    const fields = formFieldsConfig == null ? void 0 : formFieldsConfig.map((c2) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Controller, {
         control,
         name: c2.path.join("."),
@@ -21775,6 +21854,7 @@ var __publicField = (obj, key, value) => {
           var _a2;
           const formValue = getValues();
           let ele = /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Fields.String, {
+            placeholder: c2.placeholder,
             input: {
               value: value2,
               onChange,
@@ -21802,6 +21882,17 @@ var __publicField = (obj, key, value) => {
               children: value2
             });
           }
+          if (c2.helperText) {
+            ele = /* @__PURE__ */ jsxRuntimeExports.jsxs(eagle.Space, {
+              size: 4,
+              direction: "vertical",
+              className: "c154n7ie",
+              children: [c2, /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+                className: cx_default(eagle.Typo.Footnote.f2_regular, "c1c9j4da"),
+                children: c2.helperText
+              })]
+            });
+          }
           if (c2 == null ? void 0 : c2.render) {
             ele = c2.render(value2, onChange, formValue, onBlur, action);
           }
@@ -21819,7 +21910,7 @@ var __publicField = (obj, key, value) => {
     });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(eagle.Space, {
       direction: "vertical",
-      className: "c154n7ie",
+      className: "cjxv8cf",
       children: [fields, /* @__PURE__ */ jsxRuntimeExports.jsx(FormErrorAlert, {
         errorMsgs: errorMsg ? [errorMsg] : [],
         style: {
@@ -22459,7 +22550,6 @@ var __publicField = (obj, key, value) => {
     };
   };
   const useRefineForm = (props) => {
-    var _a;
     const { config, id, refineProps } = props;
     const [responseErrorMsg, setResponseErrorMsg] = React.useState("");
     const i18n2 = useTranslation();
@@ -22492,15 +22582,15 @@ var __publicField = (obj, key, value) => {
       defaultValues: config == null ? void 0 : config.initValue
     });
     React.useEffect(() => {
-      var _a2, _b;
-      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)) {
         (_b = response.json) == null ? void 0 : _b.call(response).then((body) => {
-          var _a3, _b2;
-          setResponseErrorMsg(((_b2 = (_a3 = config.formConfig) == null ? void 0 : _a3.formatError) == null ? void 0 : _b2.call(_a3, body)) || body.message);
+          var _a2, _b2;
+          setResponseErrorMsg(((_b2 = (_a2 = config.formConfig) == null ? void 0 : _a2.formatError) == null ? void 0 : _b2.call(_a2, body)) || body.message);
         });
       }
-    }, [config.formConfig, (_a = result.refineCore.mutationResult.error) == null ? void 0 : _a.response]);
+    }, [config.formConfig, result]);
     return { formResult: result, responseErrorMsg };
   };
   const index_12sfrn = "";
@@ -23026,9 +23116,18 @@ var __publicField = (obj, key, value) => {
             setEditorErrors(errors);
             return;
           }
-          const objectValues = editor.current ? yaml.load(((_a2 = editor.current) == null ? void 0 : _a2.getEditorValue()) || "") : values;
-          const finalValues = (transformApplyValues == null ? void 0 : transformApplyValues(objectValues)) || objectValues;
-          return onFinish(finalValues);
+          try {
+            const objectValues = editor.current ? yaml.load(((_a2 = editor.current) == null ? void 0 : _a2.getEditorValue()) || "") : values;
+            const finalValues = (transformApplyValues == null ? void 0 : transformApplyValues(objectValues)) || objectValues;
+            return onFinish(finalValues);
+          } catch (error) {
+            if (error instanceof Error) {
+              if (error.message === "expected a single document in the stream, but found more") {
+                setEditorErrors([t2("dovetail.only_support_one_yaml")]);
+                return;
+              }
+            }
+          }
         },
         onKeyUp,
         onValuesChange,
@@ -23250,7 +23349,7 @@ var __publicField = (obj, key, value) => {
         formResult: refineFormResult.formResult,
         config,
         errorMsg: refineFormResult.responseErrorMsg,
-        action: id ? "edit" : "create"
+        resourceId: id
       });
     })();
     const saveButtonProps = isYamlForm ? yamlSaveButtonProps : refineFormResult.formResult.saveButtonProps;
@@ -23333,7 +23432,7 @@ var __publicField = (obj, key, value) => {
       children: [/* @__PURE__ */ jsxRuntimeExports.jsx(RefineFormContent, {
         config,
         formResult,
-        action
+        resourceId: id
       }), ";", /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Button, {
         ...saveButtonProps,
         onClick,
@@ -23734,7 +23833,11 @@ var __publicField = (obj, key, value) => {
       title: i18n2.t("dovetail.name"),
       sortable: true,
       width: 200,
-      sorter: CommonSorter(dataIndex)
+      sorter: CommonSorter(dataIndex),
+      render: (v) => /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.OverflowTooltip, {
+        content: v,
+        tooltip: v
+      })
     };
   };
   const NameSpaceColumnRenderer = (i18n2) => {
@@ -24174,7 +24277,7 @@ var __publicField = (obj, key, value) => {
               href: `//${v.servicePort}`,
               target: "_blank",
               children: v.servicePort
-            }) : v.servicePort, " > ", v.targetPort, "/", v.protocol]
+            }) : v.servicePort, " ", "> ", v.targetPort, "/", v.protocol]
           }),
           tooltip: `${v.servicePort} > ${v.targetPort}/${v.protocol}`
         }, v.servicePort));

package/dist/style.css

@@ -12,7 +12,7 @@
 .b1vtjd4k.ant-btn.ant-btn-link{display:block;}
 .luro4rx.ant-btn.ant-btn-link{line-height:18px;height:18px;}
 .t13a6vox{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;gap:8px 8px;}
-.t12ikbmp.ant-tag{overflow:hidden;text-overflow:ellipsis;color:#1D326C;}.t12ikbmp.ant-tag.outside-tag{background-color:rgba(211,218,235,0.60);}.t12ikbmp.ant-tag .inside-tag{background-color:rgba(192,203,224,0.60);}
+.t12ikbmp.ant-tag{overflow:hidden;text-overflow:ellipsis;color:#1D326C;}.t12ikbmp.ant-tag.outside-tag{border:1px solid #A3B4CC;background-color:#E4E9F2;}.t12ikbmp.ant-tag .inside-tag{background-color:#CCD4E3;}
 .s8qkbck.ant-tag{padding:3px 16px;height:24px;}.s8qkbck.no-background{background-color:transparent !important;padding:0;}
 .t19ustft{display:inline-block;line-height:18px;height:18px;border-bottom:1px dashed rgba(107,128,167,0.6);}
 .t1v3ienx{padding:12px 24px;}
@@ -22,7 +22,7 @@
 .w16agr8o.ant-space{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
 .i1u1f5zp{white-space:pre-line;}
 .c8jy7dc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:8px 10px;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:8px;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;border-radius:4px;background:rgba(237,241,250,0.6);}.c8jy7dc:not(:last-of-type){margin-bottom:8px;}
-.k2sddxl{color:rgba(44,56,82,0.6);width:calc(30% - 4px);margin-right:8px;word-break:break-all;}
+.k2sddxl{color:rgba(44,56,82,0.75);width:calc(30% - 4px);margin-right:8px;word-break:break-all;}
 .v16vicsr{word-break:break-all;white-space:pre-wrap;width:calc(70% - 4px);}
 .w14056kz{width:100%;}
 .hisq2gt{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.hisq2gt.expanded{margin-bottom:8px;}
@@ -1506,12 +1506,12 @@
 .e1cjl2b8{border-radius:8px;border:1px solid rgba(211,218,235,0.60);}.e1cjl2b8 .monaco-editor,.e1cjl2b8 .monaco-scrollable-element,.e1cjl2b8 .overflow-guard > .margin{border-radius:8px;}
 .w1akirqw{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 .t30srnq{line-height:32px !important;}
-.sj0ggy.ant-select .ant-select-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow:hidden;gap:4px;}.sj0ggy.ant-select .ant-select-selector > span{max-width:calc(100% - 76px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.sj0ggy.ant-select .ant-select-selection-search{display:none;}.sj0ggy.ant-select .zoom-leave{opacity:0;position:absolute;}
+.sj0ggy.ant-select{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;min-width:276px;max-width:100%;}.sj0ggy.ant-select .ant-select-selector{display:block;overflow:hidden;padding-right:32px;white-space:nowrap;}.sj0ggy.ant-select .ant-select-selector > span:nth-child(-n + 8):not(.ant-select-selection-search){display:inline-block;max-width:var(--tag-max-width);margin-right:4px;}.sj0ggy.ant-select .ant-select-selection-search{display:none;}.sj0ggy.ant-select .zoom-leave{opacity:0;position:absolute;}
 .d1eo8uqs{border-radius:6px;}
 .s64gojc.s64gojc.ant-input-affix-wrapper{border:unset;border-bottom:1px solid rgba(211,218,235,.6);border-radius:unset;box-shadow:unset;outline:unset;padding:5px 18px;}.s64gojc.s64gojc.ant-input-affix-wrapper:hover,.s64gojc.s64gojc.ant-input-affix-wrapper:focus{box-shadow:unset;outline:unset;}
 .s16fqgtu .ant-select-item-group{border-bottom:1px solid rgba(211,218,235,0.6);min-height:0;padding:0;overflow:hidden;margin:6px 0;}
 .tgaujbg{max-width:100%;margin-right:0 !important;}
-.c1vbd54v{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:0;}
+.c1vbd54v{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:0 !important;}
 
 .lqrghwd{margin-right:8px;}
 .api7z1z{border-radius:4px;margin:6px;margin-bottom:0;padding:4px 8px 4px 12px;}
@@ -1520,7 +1520,9 @@
 .l1ng0psc{padding:12px 24px;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 .tj6zpn4{-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;}.tj6zpn4.table-wrapper{height:auto;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;min-height:0;}
 .n1rqcyjn.ant-select{margin-bottom:12px;}
-.c154n7ie{-webkit-flex-basis:58%;-ms-flex-preferred-size:58%;flex-basis:58%;width:100%;}
+.c154n7ie{width:100%;}
+.c1c9j4da{color:rgba(44,56,82,0.6);}
+.cjxv8cf{-webkit-flex-basis:58%;-ms-flex-preferred-size:58%;flex-basis:58%;width:100%;}
 .s1bsn3us{width:1px;height:16px;border-radius:1px;background:rgba(172,186,211,0.6);}
 
 .e1guqlj2{-webkit-flex:1;-ms-flex:1;flex:1;height:100%;margin-bottom:16px;}

package/lib/src/components/Form/RefineFormContent.d.ts

@@ -6,7 +6,7 @@ type Props<Model extends ResourceModel> = {
     config?: ResourceConfig<Model>;
     formResult: UseFormReturnType;
     errorMsg?: string;
-    action: 'create' | 'edit';
+    resourceId?: string;
 };
 export declare const RefineFormContent: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>(props: Props<Model>) => JSX.Element;
 export {};

package/lib/src/components/Form/type.d.ts

@@ -7,6 +7,8 @@ export type RefineFormField = {
     path: string[];
     key: string;
     label: string;
+    placeholder?: string;
+    helperText?: string;
     type?: 'number';
     validators?: RefineFormValidator[];
     disabledWhenEdit?: boolean;

package/lib/src/types/resource.d.ts

@@ -41,7 +41,11 @@ export type ResourceConfig<Model extends ResourceModel = ResourceModel> = {
     }>;
     isCustom?: boolean;
     formConfig?: {
-        fields?: RefineFormField[];
+        fields?: (props: {
+            record?: Model;
+            records: Model[];
+            action: 'create' | 'edit';
+        }) => RefineFormField[];
         renderForm?: (props: YamlFormProps) => React.ReactNode;
         formType?: FormType;
         transformInitValues?: (values: Unstructured) => Unstructured;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dovetail-v2/refine",
-  "version": "0.0.44",
+  "version": "0.0.45-bowen.1",
   "type": "module",
   "files": [
     "dist",