@dovetail-v2/refine 0.1.11-alpha.2 → 0.1.11

package/dist/refine.umd.cjs

@@ -1455,6 +1455,7 @@ var __publicField = (obj, key, value) => {
   const protocol = "协议";
   const key = "键";
   const value = "值";
+  const value_optional = "值（选填）";
   const effect = "效果";
   const show_data_value = "显示数值";
   const hide_data_value = "隐藏数值";
@@ -1555,6 +1556,25 @@ var __publicField = (obj, key, value) => {
   const pvc_storage_required = "请填写分配量。";
   const pvc_storage_min = "请输入正整数。";
   const pvc_storage_reduce_limit = "输入值不得小于当前数值。";
+  const key_empty_text = "请填写键。";
+  const format_error = "格式错误。";
+  const taint_effect_empty_text = "请选择效果。";
+  const add_label = "添加标签";
+  const add_annotation = "添加注解";
+  const add_taint = "添加污点";
+  const look_format_requirement = "查看格式要求";
+  const yes = "是";
+  const no = "否";
+  const contains = "包含";
+  const optional = "是否必填";
+  const format_requirements = "格式要求";
+  const suffix = "前缀";
+  const suffix_format_rule_1 = "DNS 子域：由点 (.) 分隔的一系列 DNS 标签";
+  const suffix_format_rule_2 = "不超过 253 个字符";
+  const suffix_format_rule_3 = "后跟斜杠 (/)，即第一个 (/) 前的内容是前缀。如有 (/) ，前缀不可为空";
+  const name_format_rule_1 = "由字母、数字、连字符 (-)、下划线(_) 或点 (.) 组成";
+  const name_format_rule_2 = "以字母或数字开头和结尾";
+  const name_format_rule_3 = "不超过 63 个字符";
   const dovetail = {
     copy: copy$1,
     reset_arguments,
@@ -1661,6 +1681,7 @@ var __publicField = (obj, key, value) => {
     protocol,
     key,
     value,
+    value_optional,
     effect,
     show_data_value,
     hide_data_value,
@@ -1762,7 +1783,26 @@ var __publicField = (obj, key, value) => {
     change_form_mode_alert,
     pvc_storage_required,
     pvc_storage_min,
-    pvc_storage_reduce_limit
+    pvc_storage_reduce_limit,
+    key_empty_text,
+    format_error,
+    taint_effect_empty_text,
+    add_label,
+    add_annotation,
+    add_taint,
+    look_format_requirement,
+    yes,
+    no,
+    contains,
+    optional,
+    format_requirements,
+    suffix,
+    suffix_format_rule_1,
+    suffix_format_rule_2,
+    suffix_format_rule_3,
+    name_format_rule_1,
+    name_format_rule_2,
+    name_format_rule_3
   };
   const ZH = {
     dovetail
@@ -9362,7 +9402,7 @@ var __publicField = (obj, key, value) => {
   function formatSi(inValue, options) {
     const {
       increment = 1e3,
-      suffix = null,
+      suffix: suffix2 = null,
       firstSuffix = null,
       startingExponent = 0,
       minExponent = 0,
@@ -9390,7 +9430,7 @@ var __publicField = (obj, key, value) => {
     if (exp === 0 && firstSuffix !== null) {
       outStr += `${firstSuffix}`;
     } else {
-      outStr += `${UNITS[exp]}${suffix}` || "";
+      outStr += `${UNITS[exp]}${suffix2}` || "";
     }
     return outStr;
   }
@@ -35484,7 +35524,6 @@ WARNING: This link could potentially be dangerous`)) {
       tableProps,
       contentClassName
     } = props;
-    useTranslation();
     const {
       resource
     } = core.useResource();
@@ -39023,83 +39062,271 @@ WARNING: This link could potentially be dangerous`)) {
       }
     ) : null });
   }
+  function validateLabelKey(key2) {
+    const labelPrefixRegex = /(^[a-zA-Z0-9]$)|(^[a-zA-Z0-9][a-zA-Z0-9\.]*[a-zA-Z0-9]$)/;
+    const labelNameRegex = /(^[a-zA-Z0-9]$)|(^[a-zA-Z0-9][a-zA-Z0-9\.\-]*[a-zA-Z0-9]$)/;
+    let prefix, name2;
+    const splitResult = key2.split("/");
+    if (splitResult.length === 1) {
+      name2 = splitResult[0];
+    } else {
+      prefix = splitResult[0];
+      name2 = splitResult[1];
+    }
+    if (prefix === "") {
+      return { isValid: false, errorMessage: "EMPTY_PREFIX" };
+    }
+    if (prefix && !labelPrefixRegex.test(prefix)) {
+      return { isValid: false, errorMessage: "INVALID_PREFIX" };
+    }
+    if (!labelNameRegex.test(name2)) {
+      return { isValid: false, errorMessage: "INVALID_NAME" };
+    }
+    if (prefix && prefix.length > 253) {
+      return { isValid: false, errorMessage: "MAX_253" };
+    }
+    if (name2 && name2.length > 63) {
+      return { isValid: false, errorMessage: "MAX_63" };
+    }
+    return { isValid: true };
+  }
+  function validateLabelValue(value2) {
+    const labelValueRegex = /(^[a-zA-Z0-9]$)|(^[a-zA-Z0-9][a-zA-Z0-9\.\-]*[a-zA-Z0-9]$)/;
+    if (value2 === "") {
+      return { isValid: true };
+    }
+    if (value2.length > 63) {
+      return { isValid: false, errorMessage: "MAX_63" };
+    }
+    if (!labelValueRegex.test(value2)) {
+      return { isValid: false, errorMessage: "INVALID_VALUE" };
+    }
+    return { isValid: true };
+  }
+  const LabelFormatPopover_105yfzn = "";
+  const PodLabelFormatRulePopoverStyle = "p5jt6nm";
+  const LabelFormatPopover = () => {
+    const {
+      t: t2
+    } = useTranslation();
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Popover, {
+      overlayClassName: PodLabelFormatRulePopoverStyle,
+      placement: "bottomRight",
+      content: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.AntdTable, {
+        bordered: true,
+        dataSource: [{
+          object: t2("dovetail.key"),
+          contains: t2("dovetail.suffix"),
+          optional: t2("dovetail.no"),
+          rule: [t2("dovetail.suffix_format_rule_1"), t2("dovetail.suffix_format_rule_2"), t2("dovetail.suffix_format_rule_3")]
+        }, {
+          object: t2("dovetail.key"),
+          contains: t2("dovetail.name"),
+          optional: t2("dovetail.yes"),
+          rule: [t2("dovetail.name_format_rule_1"), t2("dovetail.name_format_rule_2"), t2("dovetail.name_format_rule_3")]
+        }, {
+          object: t2("dovetail.value"),
+          contains: t2("dovetail.name"),
+          optional: t2("dovetail.no"),
+          rule: [t2("dovetail.name_format_rule_1"), t2("dovetail.name_format_rule_2"), t2("dovetail.name_format_rule_3")]
+        }],
+        columns: [{
+          key: "object",
+          title: t2("dovetail.object"),
+          dataIndex: "object",
+          render: (cell, record, index2) => {
+            return {
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+                className: eagle.Typo.Label.l4_bold,
+                children: cell
+              }),
+              props: {
+                rowSpan: index2 === 0 ? 2 : index2 === 1 ? 0 : 1
+              }
+            };
+          }
+        }, {
+          key: "contains",
+          title: t2("dovetail.contains"),
+          dataIndex: "contains"
+        }, {
+          key: "optional",
+          title: t2("dovetail.optional"),
+          dataIndex: "optional"
+        }, {
+          key: "rule",
+          title: t2("dovetail.format_requirements"),
+          dataIndex: "rule",
+          render: (cell) => {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", {
+              className: "rule-list",
+              children: cell.map((rule2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", {
+                children: rule2
+              }, index2))
+            });
+          }
+        }],
+        pagination: false
+      }),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Button, {
+        size: "small",
+        type: "link",
+        children: t2("dovetail.look_format_requirement")
+      })
+    });
+  };
+  const KeyValueTableForm_1eydq7y = "";
+  function _KeyValueTableFormForm(props, ref) {
+    const {
+      defaultValue,
+      onSubmit,
+      extraColumns,
+      addButtonText
+    } = props;
+    const {
+      t: t2
+    } = useTranslation();
+    const [value2, setValue] = React.useState([]);
+    const tableFormRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({
+      submit: () => {
+        return new Promise((res, rej) => {
+          var _a;
+          (_a = tableFormRef.current) == null ? void 0 : _a.validateWholeFields();
+          setTimeout(() => {
+            var _a2;
+            const isValid = (_a2 = tableFormRef.current) == null ? void 0 : _a2.isValid();
+            if (isValid) {
+              res(onSubmit(value2));
+            } else {
+              rej();
+            }
+          }, 0);
+        });
+      }
+    }), [onSubmit, value2]);
+    const renderTextAreaFunc = ({
+      value: value22,
+      onChange
+    }) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.TextArea, {
+        autoSize: true,
+        className: "clsjtk2",
+        size: "small",
+        value: value22,
+        onChange: (e2) => {
+          onChange(e2.target.value);
+        }
+      });
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(eagle.Space, {
+      size: 8,
+      direction: "vertical",
+      className: "cq3mbby",
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsx(eagle.TableForm, {
+        ref: tableFormRef,
+        onBodyChange: (value22) => {
+          setValue(value22);
+        },
+        columns: [{
+          key: "key",
+          title: t2("dovetail.key"),
+          type: "input",
+          validator: ({
+            value: value22
+          }) => {
+            if (!value22)
+              return t2("dovetail.key_empty_text");
+            const {
+              isValid,
+              errorMessage
+            } = validateLabelKey(value22 || "");
+            if (!isValid)
+              return t2("dovetail.format_error");
+          },
+          render: renderTextAreaFunc
+        }, {
+          key: "value",
+          title: t2("dovetail.value_optional"),
+          type: "input",
+          validator: ({
+            value: value22
+          }) => {
+            const {
+              isValid
+            } = validateLabelValue(value22 || "");
+            if (!isValid)
+              return t2("dovetail.format_error");
+          },
+          render: renderTextAreaFunc
+        }, ...extraColumns || []],
+        disableBatchFilling: true,
+        hideEmptyTable: true,
+        rowAddConfig: {
+          addible: true,
+          text: () => addButtonText
+        },
+        defaultData: defaultValue,
+        row: {
+          deletable: true
+        }
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx(LabelFormatPopover, {})]
+    });
+  }
+  const KeyValueTableFormForm = React.forwardRef(_KeyValueTableFormForm);
   const EditLabelForm = React.forwardRef(
     function EditLabelForm2(props, ref) {
       var _a;
       const { resourceModel } = props;
       const { mutateAsync } = core.useUpdate();
       const { t: t2 } = useTranslation();
-      const [value2, setValue] = React.useState([]);
       const defaultValue = React.useMemo(() => {
         var _a2;
         return Object.keys(((_a2 = resourceModel.metadata) == null ? void 0 : _a2.labels) || {}).map((key2) => {
           var _a3, _b;
-          return { key: key2, value: (_b = (_a3 = resourceModel.metadata) == null ? void 0 : _a3.labels) == null ? void 0 : _b[key2] };
+          return { key: key2, value: ((_b = (_a3 = resourceModel.metadata) == null ? void 0 : _a3.labels) == null ? void 0 : _b[key2]) || "" };
         });
       }, [(_a = resourceModel.metadata) == null ? void 0 : _a.labels]);
-      const submit = React.useCallback(() => {
-        const newLabels = {};
-        value2.forEach(({ key: key2, value: value22 }) => {
-          newLabels[key2] = value22;
-        });
-        const newYaml = resourceModel.updateLabel(newLabels);
-        pruneBeforeEdit(newYaml);
-        return mutateAsync({
-          id: resourceModel.id,
-          resource: resourceModel.name || "",
-          values: newYaml,
-          meta: {
-            resourceBasePath: resourceModel.apiVersion,
-            kind: resourceModel.kind
-          },
-          successNotification() {
-            return {
-              message: t2("dovetail.edit_label_success_toast", {
-                kind: resourceModel.kind,
-                name: resourceModel.metadata.name,
-                interpolation: {
-                  escapeValue: false
-                }
-              }),
-              type: "success"
-            };
-          },
-          errorNotification: false
-        });
-      }, [value2, resourceModel, mutateAsync, t2]);
-      React.useImperativeHandle(
-        ref,
-        () => ({
-          submit
-        }),
-        [submit]
+      const onSubmit = React.useCallback(
+        (value2) => {
+          const newLabels = {};
+          value2.forEach(({ key: key2, value: value22 }) => {
+            newLabels[key2] = value22 || "";
+          });
+          const newYaml = resourceModel.updateLabel(newLabels);
+          pruneBeforeEdit(newYaml);
+          return mutateAsync({
+            id: resourceModel.id,
+            resource: resourceModel.name || "",
+            values: newYaml,
+            meta: {
+              resourceBasePath: resourceModel.apiVersion,
+              kind: resourceModel.kind
+            },
+            successNotification() {
+              return {
+                message: t2("dovetail.edit_label_success_toast", {
+                  kind: resourceModel.kind,
+                  name: resourceModel.metadata.name,
+                  interpolation: {
+                    escapeValue: false
+                  }
+                }),
+                type: "success"
+              };
+            },
+            errorNotification: false
+          });
+        },
+        [resourceModel, mutateAsync, t2]
       );
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        eagle.TableForm,
+        KeyValueTableFormForm,
         {
-          onBodyChange: (value22) => {
-            setValue(value22);
-          },
-          columns: [
-            {
-              key: "key",
-              title: t2("dovetail.key"),
-              type: "input"
-            },
-            {
-              key: "value",
-              title: t2("dovetail.value"),
-              type: "input"
-            }
-          ],
-          disableBatchFilling: true,
-          rowAddConfig: {
-            addible: true
-          },
-          defaultData: defaultValue,
-          row: {
-            deletable: true
-          }
+          ref,
+          defaultValue,
+          onSubmit,
+          addButtonText: t2("dovetail.add_label")
         }
       );
     }
@@ -39136,24 +39363,23 @@ WARNING: This link could potentially be dangerous`)) {
       }
     );
   }
-  const EditAnnotationForm = React.forwardRef(
-    function EditAnnotationForm2(props, ref) {
-      var _a;
-      const { resourceModel } = props;
-      const { mutateAsync } = core.useUpdate();
-      const { t: t2 } = useTranslation();
-      const [value2, setValue] = React.useState([]);
-      const defaultValue = React.useMemo(() => {
-        var _a2;
-        return Object.keys(((_a2 = resourceModel.metadata) == null ? void 0 : _a2.annotations) || {}).map((key2) => {
-          var _a3, _b;
-          return { key: key2, value: (_b = (_a3 = resourceModel.metadata) == null ? void 0 : _a3.annotations) == null ? void 0 : _b[key2] };
-        });
-      }, [(_a = resourceModel.metadata) == null ? void 0 : _a.annotations]);
-      const submit = React.useCallback(() => {
+  const EditAnnotationForm = React.forwardRef(function EditAnnotationForm2(props, ref) {
+    var _a;
+    const { resourceModel } = props;
+    const { mutateAsync } = core.useUpdate();
+    const { t: t2 } = useTranslation();
+    const defaultValue = React.useMemo(() => {
+      var _a2;
+      return Object.keys(((_a2 = resourceModel.metadata) == null ? void 0 : _a2.annotations) || {}).map((key2) => {
+        var _a3, _b;
+        return { key: key2, value: ((_b = (_a3 = resourceModel.metadata) == null ? void 0 : _a3.annotations) == null ? void 0 : _b[key2]) || "" };
+      });
+    }, [(_a = resourceModel.metadata) == null ? void 0 : _a.annotations]);
+    const onSubmit = React.useCallback(
+      (value2) => {
         const newAnnotations = {};
         value2.forEach(({ key: key2, value: value22 }) => {
-          newAnnotations[key2] = value22;
+          newAnnotations[key2] = value22 || "";
         });
         const newYaml = resourceModel.updateAnnotation(newAnnotations);
         pruneBeforeEdit(newYaml);
@@ -39179,44 +39405,19 @@ WARNING: This link could potentially be dangerous`)) {
           },
           errorNotification: false
         });
-      }, [value2, resourceModel, mutateAsync, t2]);
-      React.useImperativeHandle(
+      },
+      [resourceModel, mutateAsync, t2]
+    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      KeyValueTableFormForm,
+      {
         ref,
-        () => ({
-          submit
-        }),
-        [submit]
-      );
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        eagle.TableForm,
-        {
-          onBodyChange: (value22) => {
-            setValue(value22);
-          },
-          columns: [
-            {
-              key: "key",
-              title: t2("dovetail.key"),
-              type: "input"
-            },
-            {
-              key: "value",
-              title: t2("dovetail.value"),
-              type: "input"
-            }
-          ],
-          disableBatchFilling: true,
-          rowAddConfig: {
-            addible: true
-          },
-          defaultData: defaultValue,
-          row: {
-            deletable: true
-          }
-        }
-      );
-    }
-  );
+        defaultValue,
+        onSubmit,
+        addButtonText: t2("dovetail.add_annotation")
+      }
+    );
+  });
   function EditAnnotationDropdownMenuItem(props) {
     const { formRef, resourceModel } = props;
     const { t: t2 } = useTranslation();
@@ -40733,8 +40934,10 @@ WARNING: This link could potentially be dangerous`)) {
   exports2.dovetailRefineI18n = dovetailRefineI18n;
   exports2.generateSchemaTypeValue = generateSchemaTypeValue;
   exports2.generateValueFromSchema = generateValueFromSchema;
+  exports2.getApiVersion = getApiVersion;
   exports2.modelPlugin = modelPlugin;
   exports2.namespaceRules = namespaceRules;
+  exports2.pruneBeforeEdit = pruneBeforeEdit;
   exports2.relationPlugin = relationPlugin;
   exports2.resolveRef = resolveRef;
   exports2.rfc1035LabelRules = rfc1035LabelRules;

package/dist/style.css

@@ -4200,6 +4200,141 @@
 /*  box shadow   */
 /*  fisheye   */
 /* z-index */
+.p5jt6nm .ant-popover-inner {
+  border-radius: 8px;
+}
+.p5jt6nm .ant-popover-innerntent {
+  padding: 12px;
+}
+.p5jt6nm .ant-popover-content > .ant-popover-arrow {
+  display: none;
+}
+.p5jt6nm td.ant-table-cell {
+  vertical-align: middle;
+}
+.p5jt6nm .rule-list {
+  list-style: disc;
+  list-style-position: inside;
+}
+.p5jt6nm .ant-table {
+  font-size: 12px;
+  line-height: 18px;
+}
+.p5jt6nm .ant-table .ant-table-container {
+  border: none !important;
+}
+.p5jt6nm .ant-table .ant-table-thead {
+  font-weight: 700;
+}
+.p5jt6nm .ant-table .ant-table-thead > tr > th {
+  background: #fff;
+}
+.p5jt6nm .ant-table thead > tr > th:last-child,
+.p5jt6nm .ant-table tbody > tr > td:last-child {
+  border-right: none !important;
+}
+.p5jt6nm .ant-table tbody > tr:last-child > td {
+  border-bottom: none;
+}/* // basic */
+/* FishEye Color Variables and Functions */
+/*
+ --------------------------- Primary Color ---------------------------
+*/
+/*
+ ---------------------------When necessary to add at any time---------------------------
+*/
+/* computed */
+/* blue */
+/* green */
+/* yellow */
+/* red */
+/* purple */
+/*  palette    global token*/
+/* color opaque */
+/* color transparent */
+/* blue transparent  */
+/* green transparent  */
+/* yellow transparent  */
+/* red transparent  */
+/* gray transparent */
+/* white transparent */
+/* gradient opaque */
+/* blue radial gradient */
+/* blue linear gradient */
+/* green radial gradient */
+/* yellow radial gradient */
+/* red radial gradient */
+/* gray radial gradient */
+/* white to gray radial gradient */
+/*  white to gray  linear gradient */
+/* gradient transparent */
+/* secondary palette */
+/* purple radial gradient */
+/*  refine alias color   */
+/*  text   */
+/*  link   */
+/*  fill   */
+/*  fill  element  */
+/*  fill  interaction  */
+/*  stroke   */
+/*  background   */
+/*  dim   */
+/*  box shadow   */
+/*  fisheye   */
+/* z-index */
+.clsjtk2 {
+  min-height: 24px !important;
+}
+
+.cq3mbby {
+  width: 100%;
+}/* // basic */
+/* FishEye Color Variables and Functions */
+/*
+ --------------------------- Primary Color ---------------------------
+*/
+/*
+ ---------------------------When necessary to add at any time---------------------------
+*/
+/* computed */
+/* blue */
+/* green */
+/* yellow */
+/* red */
+/* purple */
+/*  palette    global token*/
+/* color opaque */
+/* color transparent */
+/* blue transparent  */
+/* green transparent  */
+/* yellow transparent  */
+/* red transparent  */
+/* gray transparent */
+/* white transparent */
+/* gradient opaque */
+/* blue radial gradient */
+/* blue linear gradient */
+/* green radial gradient */
+/* yellow radial gradient */
+/* red radial gradient */
+/* gray radial gradient */
+/* white to gray radial gradient */
+/*  white to gray  linear gradient */
+/* gradient transparent */
+/* secondary palette */
+/* purple radial gradient */
+/*  refine alias color   */
+/*  text   */
+/*  link   */
+/*  fill   */
+/*  fill  element  */
+/*  fill  interaction  */
+/*  stroke   */
+/*  background   */
+/*  dim   */
+/*  box shadow   */
+/*  fisheye   */
+/* z-index */
 .wfg6u6g {
   display: flex;
   align-items: center;

package/lib/components/EditField/index.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
+export interface EditFieldFormHandler {
+    submit: () => Promise<unknown> | undefined;
+}
 export interface EditFieldModalProps {
     title?: string;
     submitting?: boolean;