@dovetail-v2/refine 0.0.43 → 0.0.45-bowen.0

package/dist/{MonacoYamlDiffEditor-b2da37e8.js → MonacoYamlDiffEditor-5ce46809.js}

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

package/dist/{index-64df5871.js → index-c644b7e1.js}

@@ -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 = "";
@@ -21791,13 +21846,13 @@ const RefineFormContent = (props) => {
               meta: {}
             });
         }
-        if (action === "edit" && c2.key === "name") {
+        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);
+          ele = c2.render(value2, onChange, formValue, onBlur, action);
         }
         return /* @__PURE__ */ jsxRuntimeExports.jsx(Form.Item, {
           label: c2.label,
@@ -22453,7 +22508,6 @@ const useForm = ({
   };
 };
 const useRefineForm = (props) => {
-  var _a;
   const { config, id, refineProps } = props;
   const [responseErrorMsg, setResponseErrorMsg] = useState("");
   const i18n2 = useTranslation();
@@ -22486,14 +22540,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) => {
-        setResponseErrorMsg(body.message);
+        var _a2, _b2;
+        setResponseErrorMsg(((_b2 = (_a2 = config.formConfig) == null ? void 0 : _a2.formatError) == null ? void 0 : _b2.call(_a2, body)) || body.message);
       });
     }
-  }, [(_a = result.refineCore.mutationResult.error) == null ? void 0 : _a.response]);
+  }, [config.formConfig, result]);
   return { formResult: result, responseErrorMsg };
 };
 const index_12sfrn = "";
@@ -22504,7 +22559,7 @@ const Separator = () => {
   });
 };
 const MonacoYamlEditor = React__default.lazy(() => Promise.resolve().then(() => MonacoYamlEditor$2));
-const MonacoYamlDiffEditor = React__default.lazy(() => import("./MonacoYamlDiffEditor-b2da37e8.js"));
+const MonacoYamlDiffEditor = React__default.lazy(() => import("./MonacoYamlDiffEditor-5ce46809.js"));
 const YamlEditorComponent = forwardRef(
   function YamlEditorComponent2(props, ref) {
     const {
@@ -23019,9 +23074,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,
@@ -23181,7 +23245,7 @@ const FullscreenModalStyle = "f1nltbcu";
 const FormDescStyle = "f1qgcca6";
 const ErrorStyle = "e1tl3wq2";
 function FormModal(props) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const {
     resource: resourceFromProps,
     id,
@@ -23197,10 +23261,8 @@ function FormModal(props) {
   const [yamlSaveButtonProps, setYamlSaveButtonProps] = useState({});
   const [isError, setIsError] = useState(false);
   const config = configs[resourceFromProps || (resource == null ? void 0 : resource.name) || ""];
-  const title = i18n2.t(id ? "dovetail.edit_resource" : "dovetail.create_resource", {
-    resource: config == null ? void 0 : config.kind
-  });
   const okText = i18n2.t(id ? "dovetail.save" : "dovetail.create");
+  const action = id ? "edit" : "create";
   const yamlFormProps = useMemo(() => {
     var _a2, _b2, _c2;
     return {
@@ -23209,7 +23271,7 @@ function FormModal(props) {
       transformApplyValues: (_b2 = config.formConfig) == null ? void 0 : _b2.transformApplyValues,
       initialValues: ((_c2 = props.formProps) == null ? void 0 : _c2.initialValues) || (config == null ? void 0 : config.initValue),
       id,
-      action: id ? "edit" : "create",
+      action,
       isShowLayout: false,
       useFormProps: {
         redirect: false
@@ -23220,7 +23282,7 @@ function FormModal(props) {
       },
       onFinish: popModal
     };
-  }, [props.formProps, setYamlSaveButtonProps, config, id]);
+  }, [props.formProps, (_a = config.formConfig) == null ? void 0 : _a.transformInitValues, (_b = config.formConfig) == null ? void 0 : _b.transformApplyValues, config == null ? void 0 : config.initValue, id, action]);
   const refineFormResult = useRefineForm({
     config,
     id,
@@ -23229,10 +23291,10 @@ function FormModal(props) {
         popModal();
       },
       redirect: false,
-      ...(_a = config.formConfig) == null ? void 0 : _a.refineCoreProps
+      ...(_c = config.formConfig) == null ? void 0 : _c.refineCoreProps
     }
   });
-  const isYamlForm = !((_b = config.formConfig) == null ? void 0 : _b.fields);
+  const isYamlForm = !((_d = config.formConfig) == null ? void 0 : _d.fields);
   const formEle = (() => {
     if (renderForm) {
       return renderForm(yamlFormProps);
@@ -23261,10 +23323,21 @@ function FormModal(props) {
       return i18n2.t(id ? "dovetail.save_failed" : "dovetail.create_failed");
     }
   })();
+  const title = useMemo(() => {
+    var _a2, _b2, _c2, _d2;
+    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 i18n2.t(id ? "dovetail.edit_resource" : "dovetail.create_resource", {
+      resource: config == null ? void 0 : config.kind
+    });
+  }, [action, config.formConfig, config == null ? void 0 : config.kind, i18n2, id]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Modal, {
     className: FullscreenModalStyle,
     width: "calc(100vw - 16px)",
-    title: ((_c = config.formConfig) == null ? void 0 : _c.formTitle) || title,
+    title,
     error: errorText ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
       className: ErrorStyle,
       children: [/* @__PURE__ */ jsxRuntimeExports.jsx(ExclamationErrorCircleFill16RedIcon, {}), " ", errorText]
@@ -23276,9 +23349,9 @@ function FormModal(props) {
     onCancel,
     destroyOnClose: true,
     fullscreen: true,
-    children: [((_d = config.formConfig) == null ? void 0 : _d.formDesc) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+    children: [((_e = config.formConfig) == null ? void 0 : _e.formDesc) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
       className: FormDescStyle,
-      children: (_e = config.formConfig) == null ? void 0 : _e.formDesc
+      children: (_f = config.formConfig) == null ? void 0 : _f.formDesc
     }) : void 0, formEle]
   });
 }
@@ -23316,7 +23389,8 @@ const RefineFormPage = (props) => {
     className: "c1pvtlkp",
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(RefineFormContent, {
       config,
-      formResult
+      formResult,
+      action
     }), ";", /* @__PURE__ */ jsxRuntimeExports.jsx(Button, {
       ...saveButtonProps,
       onClick,

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-64df5871.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-c644b7e1.js";
 import "@cloudtower/eagle";
 import "@refinedev/core";
 import "@cloudtower/icons-react";