@dovetail-v2/refine 0.2.1 → 0.2.2-alpha.0

package/dist/{MonacoYamlDiffEditor-ddff69c1.js → MonacoYamlDiffEditor-fe64524b.js}

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

package/dist/{index-c44daab0.js → index-d00a6dbe.js}

@@ -12322,7 +12322,7 @@ const ShowContent = (props) => {
         },
         children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
           className: cx_default(Typo.Display.d2_regular_title, NameStyle),
-          children: (_c = record == null ? void 0 : record.metadata) == null ? void 0 : _c.name
+          children: showConfig.displayName || ((_c = record == null ? void 0 : record.metadata) == null ? void 0 : _c.name)
         }), stateDisplay ? /* @__PURE__ */ jsxRuntimeExports.jsx(StateTag, {
           state: stateDisplay,
           customResourceStateMap: showConfig.resourceStateMap
@@ -19512,15 +19512,19 @@ const MonacoYamlEditor$1 = (props) => {
   } = props;
   const uri = id ? monaco.Uri.parse(`${id}.yaml`) : void 0;
   useEffect(() => {
-    const finalSchemas = [
-      {
-        uri: String(uri),
-        fileMatch: [String(uri)],
-        schema: {
-          oneOf: schemas || []
-        }
+    if (!window._MonacoSchemaMap) {
+      window._MonacoSchemaMap = /* @__PURE__ */ new Map();
+    }
+    window._MonacoSchemaMap.set(id || "", {
+      // Id of the first schema
+      uri: String(uri),
+      // Associate with our model
+      fileMatch: [String(uri)],
+      schema: {
+        oneOf: schemas || [{ type: "object" }]
       }
-    ];
+    });
+    const finalSchemas = [...window._MonacoSchemaMap.values()];
     setDiagnosticsOptions({
       enableSchemaRequest: false,
       validate: true,
@@ -19541,13 +19545,15 @@ const MonacoYamlEditor$1 = (props) => {
       tabSize: 2,
       lineNumbersMinChars: 7,
       readOnly,
-      autoIndent: {}.VITE_IS_TEST ? "none" : "advanced"
+      autoIndent: {}.VITE_IS_TEST ? "none" : "advanced",
+      theme: "vs"
     });
     instanceRef.current.editor = editor;
     getInstance == null ? void 0 : getInstance(editor);
     onEditorCreate == null ? void 0 : onEditorCreate(editor);
     return () => {
       instanceRef.current.editor = null;
+      window._MonacoSchemaMap.delete(id || "");
       model.dispose();
       editor.dispose();
     };
@@ -19564,7 +19570,7 @@ const MonacoYamlEditor$1 = (props) => {
         stop.dispose();
       };
     }
-  }, [onChange, instanceRef.current.editor]);
+  }, [onChange]);
   useEffect(() => {
     const editor = instanceRef.current.editor;
     if (editor) {
@@ -19598,7 +19604,7 @@ const MonacoYamlEditor$1 = (props) => {
         stop.dispose();
       };
     }
-  }, [onValidate, instanceRef.current.editor]);
+  }, [onValidate]);
   useEffect(() => {
     const editor = instanceRef.current.editor;
     if (editor) {
@@ -19611,7 +19617,7 @@ const MonacoYamlEditor$1 = (props) => {
         stop.dispose();
       };
     }
-  }, [onBlur, instanceRef.current.editor]);
+  }, [onBlur]);
   useEffect(() => {
     const editor = instanceRef.current.editor;
     const stops = [];
@@ -19638,7 +19644,7 @@ const MonacoYamlEditor$1 = (props) => {
     return () => {
       stops.forEach((stop) => stop.dispose());
     };
-  }, [instanceRef.current.editor, isScrollOnFocus]);
+  }, [isScrollOnFocus]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
@@ -38786,33 +38792,36 @@ const Separator = () => {
   });
 };
 const MonacoYamlEditor = React__default.lazy(() => Promise.resolve().then(() => MonacoYamlEditor$2));
-const MonacoYamlDiffEditor = React__default.lazy(() => import("./MonacoYamlDiffEditor-ddff69c1.js"));
+const MonacoYamlDiffEditor = React__default.lazy(() => import("./MonacoYamlDiffEditor-fe64524b.js"));
 const YamlEditorComponent = forwardRef(
   function YamlEditorComponent2(props, ref) {
     const {
       title,
       collapsable = true,
       isDefaultCollapsed,
+      value: value2,
       defaultValue = "",
       height,
       readOnly,
       errorMsgs = [],
       schemas,
       eleRef,
-      className
+      className,
+      debounceTime,
+      isScrollOnFocus = true
     } = props;
     const { t: t2 } = useTranslation();
     const [isCollapsed, setIsCollapsed] = useState(
       collapsable ? isDefaultCollapsed : false
     );
     const [isDiff, setIsDiff] = useState(false);
-    const [value2, setValue] = useState(defaultValue);
+    const [_value, _setValue] = useState(value2 || defaultValue);
     const editorInstance = useRef();
     const [copyTooltip, setCopyTooltip] = useState(t2("dovetail.copy"));
     const [resetTooltip, setResetTooltip] = useState(t2("dovetail.reset_arguments"));
     useImperativeHandle(ref, () => {
       return {
-        setValue,
+        setValue: _setValue,
         setEditorValue: (value22) => {
           var _a, _b;
           (_b = (_a = editorInstance.current) == null ? void 0 : _a.getModel()) == null ? void 0 : _b.setValue(value22);
@@ -38827,11 +38836,14 @@ const YamlEditorComponent = forwardRef(
     const onChange = useCallback(
       (newVal) => {
         var _a;
-        setValue(newVal);
+        _setValue(newVal);
         (_a = props.onChange) == null ? void 0 : _a.call(props, newVal);
       },
       [props.onChange]
     );
+    const finalOnChange = useMemo(() => {
+      return debounceTime ? debounce(onChange, debounceTime) : onChange;
+    }, [onChange, debounceTime]);
     const onValidate = useCallback(
       (valid, schemaValid) => {
         var _a;
@@ -38842,16 +38854,23 @@ const YamlEditorComponent = forwardRef(
     const onEditorCreate = useCallback(
       (editor) => {
         var _a, _b, _c;
-        if (editor.getValue() !== value2) {
-          (_b = (_a = editorInstance.current) == null ? void 0 : _a.getModel()) == null ? void 0 : _b.setValue(value2);
+        if (editor.getValue() !== _value) {
+          (_b = (_a = editorInstance.current) == null ? void 0 : _a.getModel()) == null ? void 0 : _b.setValue(_value);
         }
         (_c = props.onEditorCreate) == null ? void 0 : _c.call(props, editor);
       },
-      [value2, props.onEditorCreate]
+      [_value, props.onEditorCreate]
     );
     const getInstance = useCallback((ins) => {
       editorInstance.current = ins;
     }, []);
+    useEffect(() => {
+      var _a, _b;
+      if (value2 !== void 0 && value2 !== _value) {
+        _setValue(value2);
+        (_b = (_a = editorInstance.current) == null ? void 0 : _a.getModel()) == null ? void 0 : _b.setValue(value2);
+      }
+    }, [value2]);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -38905,7 +38924,7 @@ const YamlEditorComponent = forwardRef(
                               iconHeight: 16,
                               onClick: () => {
                                 if (!isCollapsed) {
-                                  copyToClipboard(value2);
+                                  copyToClipboard(_value);
                                   setCopyTooltip(t2("dovetail.copied"));
                                 }
                               }
@@ -38998,27 +39017,28 @@ const YamlEditorComponent = forwardRef(
                 zIndex: 1
               },
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: PlainCodeStyle, children: value2 }), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: isDiff ? "none" : "block" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: PlainCodeStyle, children: _value }), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: isDiff ? "none" : "block" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   MonacoYamlEditor,
                   {
                     id: props.id,
                     getInstance,
-                    defaultValue: value2,
+                    defaultValue: _value,
                     height,
-                    onChange,
+                    onChange: finalOnChange,
                     onValidate,
                     onEditorCreate,
                     onBlur: props.onBlur,
                     schemas,
-                    readOnly
+                    readOnly,
+                    isScrollOnFocus
                   }
                 ) }) }),
-                isDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: PlainCodeStyle, children: value2 }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                isDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: PlainCodeStyle, children: _value }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   MonacoYamlDiffEditor,
                   {
                     id: props.id,
                     origin: defaultValue,
-                    modified: value2,
+                    modified: _value,
                     height
                   }
                 ) }) : null

package/dist/refine.js

@@ -1,4 +1,4 @@
-import { bP, cF, A, aY, a_, aH, cd, bm, a3, cr, cf, aS, V, C, l, cL, aK, br, ae, cN, ak, ar, cW, az, cg, ce, cZ, aO, by, y, aF, bF, cY, cG, bI, D, b3, au, bL, at, av, a2, cc, cb, cX, bk, aW, cI, af, bS, cK, cJ, cM, cp, aI, al, v, t, cO, I, bv, aV, w, Q, bg, bi, ch, cQ, aN, bu, as, aA, aB, aa, aC, aZ, aG, bG, bJ, ab, d7, cq, cA, bO, N, a4, g, aX, a8, bR, bA, bz, cP, c2, d2, i, d1, aL, bs, cj, O, bc, bd, bq, K, be, L, bf, F, b7, cD, E, b6, J, ba, G, b8, H, b9, M, c3, bb, cC, ac, d5, d4, P, bo, x, ag, aj, c1, bl, cU, cT, b1, bw, c9, c8, s, aM, bn, z, bx, b2, d6, B, ct, cH, bM, bU, bV, d9, aJ, R, ai, ap, ao, bN, am, cV, c5, an, cE, ca, bj, bC, aw, k, U, T, bh, cw, cz, cv, cu, cx, cy, cs, ck, cn, co, cm, cl, ci, cB, bW, aP, bt, aD, o, bZ, n, a$, d0, q, b_, b0, p, aU, bp, m, c$, aR, aT, c7, bE, bD, c6, aQ, S, bH, c_, d3, b4, b5, bB, bK, c4, b$, c0, ad, a1, cS, ah, W, cR, aq, ay, ax, h, aE, bX, X, a5, d, dc, db, de, d8, a9, df, da, bT, dd, a7, a6, r, a, c, e, Z, Y, _, f, $, u, bQ, a0, bY, b } from "./index-c44daab0.js";
+import { bP, cF, A, aY, a_, aH, cd, bm, a3, cr, cf, aS, V, C, l, cL, aK, br, ae, cN, ak, ar, cW, az, cg, ce, cZ, aO, by, y, aF, bF, cY, cG, bI, D, b3, au, bL, at, av, a2, cc, cb, cX, bk, aW, cI, af, bS, cK, cJ, cM, cp, aI, al, v, t, cO, I, bv, aV, w, Q, bg, bi, ch, cQ, aN, bu, as, aA, aB, aa, aC, aZ, aG, bG, bJ, ab, d7, cq, cA, bO, N, a4, g, aX, a8, bR, bA, bz, cP, c2, d2, i, d1, aL, bs, cj, O, bc, bd, bq, K, be, L, bf, F, b7, cD, E, b6, J, ba, G, b8, H, b9, M, c3, bb, cC, ac, d5, d4, P, bo, x, ag, aj, c1, bl, cU, cT, b1, bw, c9, c8, s, aM, bn, z, bx, b2, d6, B, ct, cH, bM, bU, bV, d9, aJ, R, ai, ap, ao, bN, am, cV, c5, an, cE, ca, bj, bC, aw, k, U, T, bh, cw, cz, cv, cu, cx, cy, cs, ck, cn, co, cm, cl, ci, cB, bW, aP, bt, aD, o, bZ, n, a$, d0, q, b_, b0, p, aU, bp, m, c$, aR, aT, c7, bE, bD, c6, aQ, S, bH, c_, d3, b4, b5, bB, bK, c4, b$, c0, ad, a1, cS, ah, W, cR, aq, ay, ax, h, aE, bX, X, a5, d, dc, db, de, d8, a9, df, da, bT, dd, a7, a6, r, a, c, e, Z, Y, _, f, $, u, bQ, a0, bY, b } from "./index-d00a6dbe.js";
 import "@cloudtower/eagle";
 import "@refinedev/core";
 import "react";

package/dist/refine.umd.cjs

@@ -12328,7 +12328,7 @@ var __publicField = (obj, key, value) => {
           },
           children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
             className: cx_default(eagle.Typo.Display.d2_regular_title, NameStyle),
-            children: (_c = record == null ? void 0 : record.metadata) == null ? void 0 : _c.name
+            children: showConfig.displayName || ((_c = record == null ? void 0 : record.metadata) == null ? void 0 : _c.name)
           }), stateDisplay ? /* @__PURE__ */ jsxRuntimeExports.jsx(StateTag, {
             state: stateDisplay,
             customResourceStateMap: showConfig.resourceStateMap
@@ -19518,15 +19518,19 @@ var __publicField = (obj, key, value) => {
     } = props;
     const uri = id ? monaco__namespace.Uri.parse(`${id}.yaml`) : void 0;
     React.useEffect(() => {
-      const finalSchemas = [
-        {
-          uri: String(uri),
-          fileMatch: [String(uri)],
-          schema: {
-            oneOf: schemas || []
-          }
+      if (!window._MonacoSchemaMap) {
+        window._MonacoSchemaMap = /* @__PURE__ */ new Map();
+      }
+      window._MonacoSchemaMap.set(id || "", {
+        // Id of the first schema
+        uri: String(uri),
+        // Associate with our model
+        fileMatch: [String(uri)],
+        schema: {
+          oneOf: schemas || [{ type: "object" }]
         }
-      ];
+      });
+      const finalSchemas = [...window._MonacoSchemaMap.values()];
       monacoYaml.setDiagnosticsOptions({
         enableSchemaRequest: false,
         validate: true,
@@ -19547,13 +19551,15 @@ var __publicField = (obj, key, value) => {
         tabSize: 2,
         lineNumbersMinChars: 7,
         readOnly,
-        autoIndent: {}.VITE_IS_TEST ? "none" : "advanced"
+        autoIndent: {}.VITE_IS_TEST ? "none" : "advanced",
+        theme: "vs"
       });
       instanceRef.current.editor = editor;
       getInstance == null ? void 0 : getInstance(editor);
       onEditorCreate == null ? void 0 : onEditorCreate(editor);
       return () => {
         instanceRef.current.editor = null;
+        window._MonacoSchemaMap.delete(id || "");
         model.dispose();
         editor.dispose();
       };
@@ -19570,7 +19576,7 @@ var __publicField = (obj, key, value) => {
           stop.dispose();
         };
       }
-    }, [onChange, instanceRef.current.editor]);
+    }, [onChange]);
     React.useEffect(() => {
       const editor = instanceRef.current.editor;
       if (editor) {
@@ -19604,7 +19610,7 @@ var __publicField = (obj, key, value) => {
           stop.dispose();
         };
       }
-    }, [onValidate, instanceRef.current.editor]);
+    }, [onValidate]);
     React.useEffect(() => {
       const editor = instanceRef.current.editor;
       if (editor) {
@@ -19617,7 +19623,7 @@ var __publicField = (obj, key, value) => {
           stop.dispose();
         };
       }
-    }, [onBlur, instanceRef.current.editor]);
+    }, [onBlur]);
     React.useEffect(() => {
       const editor = instanceRef.current.editor;
       const stops = [];
@@ -19644,7 +19650,7 @@ var __publicField = (obj, key, value) => {
       return () => {
         stops.forEach((stop) => stop.dispose());
       };
-    }, [instanceRef.current.editor, isScrollOnFocus]);
+    }, [isScrollOnFocus]);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -38799,26 +38805,29 @@ WARNING: This link could potentially be dangerous`)) {
         title,
         collapsable = true,
         isDefaultCollapsed,
+        value: value2,
         defaultValue = "",
         height,
         readOnly,
         errorMsgs = [],
         schemas,
         eleRef,
-        className
+        className,
+        debounceTime,
+        isScrollOnFocus = true
       } = props;
       const { t: t2 } = useTranslation();
       const [isCollapsed, setIsCollapsed] = React.useState(
         collapsable ? isDefaultCollapsed : false
       );
       const [isDiff, setIsDiff] = React.useState(false);
-      const [value2, setValue] = React.useState(defaultValue);
+      const [_value, _setValue] = React.useState(value2 || defaultValue);
       const editorInstance = React.useRef();
       const [copyTooltip, setCopyTooltip] = React.useState(t2("dovetail.copy"));
       const [resetTooltip, setResetTooltip] = React.useState(t2("dovetail.reset_arguments"));
       React.useImperativeHandle(ref, () => {
         return {
-          setValue,
+          setValue: _setValue,
           setEditorValue: (value22) => {
             var _a, _b;
             (_b = (_a = editorInstance.current) == null ? void 0 : _a.getModel()) == null ? void 0 : _b.setValue(value22);
@@ -38833,11 +38842,14 @@ WARNING: This link could potentially be dangerous`)) {
       const onChange = React.useCallback(
         (newVal) => {
           var _a;
-          setValue(newVal);
+          _setValue(newVal);
           (_a = props.onChange) == null ? void 0 : _a.call(props, newVal);
         },
         [props.onChange]
       );
+      const finalOnChange = React.useMemo(() => {
+        return debounceTime ? lodashEs.debounce(onChange, debounceTime) : onChange;
+      }, [onChange, debounceTime]);
       const onValidate = React.useCallback(
         (valid, schemaValid) => {
           var _a;
@@ -38848,16 +38860,23 @@ WARNING: This link could potentially be dangerous`)) {
       const onEditorCreate = React.useCallback(
         (editor) => {
           var _a, _b, _c;
-          if (editor.getValue() !== value2) {
-            (_b = (_a = editorInstance.current) == null ? void 0 : _a.getModel()) == null ? void 0 : _b.setValue(value2);
+          if (editor.getValue() !== _value) {
+            (_b = (_a = editorInstance.current) == null ? void 0 : _a.getModel()) == null ? void 0 : _b.setValue(_value);
           }
           (_c = props.onEditorCreate) == null ? void 0 : _c.call(props, editor);
         },
-        [value2, props.onEditorCreate]
+        [_value, props.onEditorCreate]
       );
       const getInstance = React.useCallback((ins) => {
         editorInstance.current = ins;
       }, []);
+      React.useEffect(() => {
+        var _a, _b;
+        if (value2 !== void 0 && value2 !== _value) {
+          _setValue(value2);
+          (_b = (_a = editorInstance.current) == null ? void 0 : _a.getModel()) == null ? void 0 : _b.setValue(value2);
+        }
+      }, [value2]);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
@@ -38911,7 +38930,7 @@ WARNING: This link could potentially be dangerous`)) {
                                 iconHeight: 16,
                                 onClick: () => {
                                   if (!isCollapsed) {
-                                    copyToClipboard(value2);
+                                    copyToClipboard(_value);
                                     setCopyTooltip(t2("dovetail.copied"));
                                   }
                                 }
@@ -39004,27 +39023,28 @@ WARNING: This link could potentially be dangerous`)) {
                   zIndex: 1
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: PlainCodeStyle, children: value2 }), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: isDiff ? "none" : "block" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: PlainCodeStyle, children: _value }), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: isDiff ? "none" : "block" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     MonacoYamlEditor,
                     {
                       id: props.id,
                       getInstance,
-                      defaultValue: value2,
+                      defaultValue: _value,
                       height,
-                      onChange,
+                      onChange: finalOnChange,
                       onValidate,
                       onEditorCreate,
                       onBlur: props.onBlur,
                       schemas,
-                      readOnly
+                      readOnly,
+                      isScrollOnFocus
                     }
                   ) }) }),
-                  isDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: PlainCodeStyle, children: value2 }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  isDiff ? /* @__PURE__ */ jsxRuntimeExports.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: PlainCodeStyle, children: _value }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     MonacoYamlDiffEditor$2,
                     {
                       id: props.id,
                       origin: defaultValue,
-                      modified: value2,
+                      modified: _value,
                       height
                     }
                   ) }) : null

package/lib/components/ShowContent/fields.d.ts

@@ -39,6 +39,7 @@ export interface ShowConfig<Model extends ResourceModel = ResourceModel> {
         color: Record<string, StatusCapsuleColor | 'loading'>;
         text: Record<string, string>;
     };
+    displayName?: string;
 }
 export declare const ImageField: <Model extends WorkloadBaseModel>(i18n: I18nType) => ShowField<Model>;
 export declare const ReplicaField: <Model extends JobModel | WorkloadModel>() => ShowField<Model>;

package/lib/components/YamlEditor/YamlEditorComponent.d.ts

@@ -4,6 +4,7 @@ import React from 'react';
 export type YamlEditorProps = {
     eleRef?: React.MutableRefObject<HTMLDivElement>;
     title?: string;
+    value?: string;
     defaultValue?: string;
     errorMsgs?: string[];
     schemas?: JSONSchema7[] | null;
@@ -13,6 +14,8 @@ export type YamlEditorProps = {
     collapsable?: boolean;
     isDefaultCollapsed?: boolean;
     readOnly?: boolean;
+    debounceTime?: number;
+    isScrollOnFocus?: boolean;
     onChange?: (value: string) => void;
     onValidate?: (valid: boolean, schemaValid: boolean) => void;
     onEditorCreate?: (editor: monaco.editor.IStandaloneCodeEditor) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dovetail-v2/refine",
-  "version": "0.2.1",
+  "version": "0.2.2-alpha.0",
   "type": "module",
   "files": [
     "dist",