@dovetail-v2/refine 0.0.63-pod-exec.0 → 0.0.64

package/lib/src/components/ValueDisplay/index.d.ts

@@ -5,5 +5,5 @@ interface ValueDisplayProps {
     style?: React.CSSProperties;
     className?: string;
 }
-declare function ValueDisplay(props: ValueDisplayProps): JSX.Element;
+export declare function ValueDisplay(props: ValueDisplayProps): JSX.Element;
 export default ValueDisplay;

package/lib/src/components/WorkloadDropdown/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon, useUIKit } from '@cloudtower/eagle';
+import { DynamicResourceSchedule16BlueIcon } from '@cloudtower/icons-react';
+import { useResource, useUpdate } from '@refinedev/core';
+import { useD2Translation } from '../../i18n';
+import { pruneBeforeEdit } from '../../utils/k8s';
+import K8sDropdown from '../K8sDropdown';
+export function WorkloadDropdown(props) {
+    const { record } = props;
+    const kit = useUIKit();
+    const { resource } = useResource();
+    const { mutate } = useUpdate();
+    const { t } = useD2Translation();
+    return (_jsx(K8sDropdown, { record: record, children: _jsx(kit.menu.Item, { onClick: () => {
+                const v = record.redeploy();
+                const id = v.id;
+                pruneBeforeEdit(v);
+                mutate({
+                    id,
+                    resource: resource?.name || '',
+                    values: v,
+                });
+            }, children: _jsx(Icon, { src: DynamicResourceSchedule16BlueIcon, children: t('dovetail.redeploy') }) }) }));
+}

package/lib/src/components/WorkloadPodsTable/WorkloadPodsTable.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { css } from '@linaria/core';
+import { useList } from '@refinedev/core';
+import { useMemo, useState } from 'react';
+import { matchSelector } from 'src/utils/match-selector';
+import { NameColumnRenderer, NodeNameColumnRenderer, RestartCountColumnRenderer, StateDisplayColumnRenderer, WorkloadImageColumnRenderer, } from '../../hooks/useEagleTable/columns';
+import { useD2Translation } from '../../i18n';
+import Table from '../Table';
+import { TableToolBar } from '../Table/TableToolBar';
+export const WorkloadPodsTable = ({ selector, hideToolbar, }) => {
+    const { i18n } = useD2Translation();
+    const kit = useUIKit();
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const { data } = useList({
+        resource: 'pods',
+        meta: { resourceBasePath: '/api/v1', kind: 'Pod' },
+        pagination: {
+            mode: 'off',
+        },
+    });
+    const dataSource = useMemo(() => {
+        return data?.data.filter(p => {
+            return selector ? matchSelector(p, selector) : true;
+        });
+    }, [data?.data, selector]);
+    const columns = [
+        StateDisplayColumnRenderer(i18n),
+        NameColumnRenderer(i18n, 'pods'),
+        NodeNameColumnRenderer(i18n),
+        WorkloadImageColumnRenderer(i18n),
+        RestartCountColumnRenderer(i18n),
+    ];
+    return (_jsxs(kit.space, { direction: "vertical", className: css `
+        width: 100%;
+        vertical-align: top;
+      `, children: [hideToolbar ? null : (_jsx(TableToolBar, { title: "", selectedKeys: selectedKeys, hideCreate: true })), _jsx(Table, { tableKey: "pods", loading: !dataSource, data: dataSource || [], columns: columns, onSelect: keys => setSelectedKeys(keys), rowKey: "id", error: false, currentPage: currentPage, onPageChange: p => setCurrentPage(p), currentSize: 10, refetch: () => null })] }));
+};

package/lib/src/components/WorkloadPodsTable/index.js

@@ -0,0 +1 @@
+export * from './WorkloadPodsTable';

package/lib/src/components/WorkloadReplicas/index.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { useUIKit } from '@cloudtower/eagle';
+import { useResource, useUpdate } from '@refinedev/core';
+import { get } from 'lodash-es';
+import React, { useState, useCallback, useImperativeHandle, useRef } from 'react';
+import { EditField } from 'src/components/EditField';
+import { pruneBeforeEdit } from '../../utils/k8s';
+const WorkloadReplicasForm = React.forwardRef(function WorkloadReplicasForm(props, ref) {
+    const { defaultValue, record, label } = props;
+    const kit = useUIKit();
+    const { resource } = useResource();
+    const { mutateAsync } = useUpdate();
+    const [replicas, setReplicas] = useState(defaultValue);
+    const submit = useCallback(() => {
+        const v = record.scale(replicas);
+        const id = record.id;
+        pruneBeforeEdit(v);
+        return mutateAsync({
+            id,
+            resource: resource?.name || '',
+            values: v,
+        });
+    }, [record, replicas, resource?.name, mutateAsync]);
+    useImperativeHandle(ref, () => ({
+        submit,
+    }), [submit]);
+    return (_jsx(kit.form.Item, { label: label, children: _jsx(kit.fields.Integer, { input: {
+                name: 'replicas',
+                value: replicas,
+                onChange: (value) => {
+                    setReplicas(Number(value));
+                },
+                onBlur: () => { },
+                onFocus: () => { },
+            }, meta: {}, controls: true }) }));
+});
+export function WorkloadReplicas({ record, label, editable }) {
+    const formRef = useRef(null);
+    const readyReplicas = record.status && 'readyReplicas' in record.status ? record.status.readyReplicas : 0;
+    const replicas = record.spec && 'replicas' in record.spec ? record.spec.replicas : 0;
+    const canScale = record.kind === 'Deployment' || record.kind === 'StatefulSet';
+    const currentReplicas = get(record, 'spec.replicas', 0);
+    return (_jsxs("span", { children: [readyReplicas, "/", replicas, editable && canScale && (_jsx(EditField, { modalProps: {
+                    formRef,
+                    renderContent() {
+                        return (_jsx(WorkloadReplicasForm, { ref: formRef, defaultValue: currentReplicas, record: record, label: label || '' }));
+                    }
+                } }))] }));
+}

package/lib/src/components/YamlEditor/MonacoYamlDiffEditor.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as monaco from 'monaco-editor';
+import { useEffect, useRef } from 'react';
+const MonacoYamlDiffEditor = props => {
+    const ref = useRef(null);
+    const { origin, modified, id, height } = props;
+    useEffect(() => {
+        const originalUri = id ? monaco.Uri.parse(`${id}_original.yaml`) : undefined;
+        const modifiedUri = id ? monaco.Uri.parse(`${id}_modified.yaml`) : undefined;
+        const originalModel = monaco.editor.createModel(origin, 'yaml', originalUri);
+        const modifiedModel = monaco.editor.createModel(modified, 'yaml', modifiedUri);
+        const diffEditor = monaco.editor.createDiffEditor(ref.current, {
+            renderSideBySide: true,
+            originalEditable: false,
+            readOnly: true,
+            ignoreTrimWhitespace: false,
+            scrollBeyondLastLine: false,
+        });
+        diffEditor.setModel({
+            original: originalModel,
+            modified: modifiedModel,
+        });
+        return () => {
+            diffEditor.dispose();
+            originalModel.dispose();
+            modifiedModel.dispose();
+        };
+    }, [modified, origin, id]);
+    return (_jsx("div", { ref: ref, style: {
+            width: '100%',
+            height: height || '500px',
+        } }));
+};
+export default MonacoYamlDiffEditor;

package/lib/src/components/YamlEditor/MonacoYamlEditor.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '@linaria/core';
+import * as monaco from 'monaco-editor';
+import { setDiagnosticsOptions } from 'monaco-yaml';
+import { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { YamlEditorStyle } from './style';
+import YamlWorker from './yaml.worker?worker';
+if (!import.meta.env.PROD) {
+    window.MonacoEnvironment = {
+        getWorker(_, label) {
+            switch (label) {
+                // Handle other cases
+                case 'yaml':
+                    return new YamlWorker();
+                default:
+                    throw new Error(`Unknown label ${label}`);
+            }
+        },
+    };
+}
+const schemaMap = new Map();
+const MonacoYamlEditor = props => {
+    const ref = useRef(null);
+    const instanceRef = useRef({ editor: null });
+    const { defaultValue, id, height, readOnly, schema, isScrollOnFocus, onChange, onValidate, getInstance, onEditorCreate, onBlur, } = props;
+    const uri = id ? monaco.Uri.parse(`${id}.yaml`) : undefined;
+    useEffect(() => {
+        if (schema) {
+            schemaMap.set(id, {
+                // Id of the first schema
+                uri: String(uri),
+                // Associate with our model
+                fileMatch: uri ? [String(uri)] : [],
+                schema,
+            });
+        }
+        const schemas = [...schemaMap.values()];
+        // config monaco yaml
+        setDiagnosticsOptions({
+            enableSchemaRequest: false,
+            hover: true,
+            completion: true,
+            validate: true,
+            format: true,
+            isKubernetes: true,
+            schemas,
+        });
+        const model = monaco.editor.createModel(defaultValue, 'yaml', uri);
+        const editor = monaco.editor.create(ref.current, {
+            automaticLayout: true,
+            scrollBeyondLastLine: false,
+            model,
+            scrollbar: {
+                handleMouseWheel: !isScrollOnFocus,
+            },
+            tabSize: 2,
+            readOnly: readOnly,
+            autoIndent: import.meta.env.VITE_IS_TEST ? 'none' : 'advanced',
+        });
+        instanceRef.current.editor = editor;
+        getInstance?.(editor);
+        onEditorCreate?.(editor);
+        return () => {
+            instanceRef.current.editor = null;
+            schemaMap.delete(id);
+            model.dispose();
+            editor.dispose();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultValue, schema, id, readOnly, isScrollOnFocus, getInstance]);
+    useEffect(() => {
+        const editor = instanceRef.current.editor;
+        if (editor) {
+            const stop = editor.onDidChangeModelContent(() => {
+                ReactDOM.unstable_batchedUpdates(() => {
+                    onChange?.(editor.getValue());
+                });
+            });
+            return () => {
+                stop.dispose();
+            };
+        }
+    }, [onChange, instanceRef.current.editor]);
+    useEffect(() => {
+        const editor = instanceRef.current.editor;
+        if (editor) {
+            const stop = monaco.editor.onDidChangeMarkers((uri) => {
+                const model = instanceRef.current.editor?.getModel();
+                const currentEditorUri = model?.uri;
+                if (model && uri.toString() === currentEditorUri?.toString()) {
+                    const marks = monaco.editor.getModelMarkers({ owner: 'yaml', resource: currentEditorUri });
+                    const yamlMarks = marks.filter(m => m.source === 'YAML');
+                    const schemaMarks = marks.filter(m => m.source !== 'YAML');
+                    const yamlValid = yamlMarks.length === 0;
+                    const schemaValid = schemaMarks.length === 0;
+                    onValidate?.(yamlValid, schemaValid);
+                    if (marks.some(mark => mark.source?.includes('yaml-schema'))) {
+                        monaco.editor.setModelMarkers(model, 'yaml', marks.map(mark => ({ ...mark, source: '', resource: {} })));
+                    }
+                }
+            });
+            return () => {
+                stop.dispose();
+            };
+        }
+    }, [onValidate, instanceRef.current.editor]);
+    useEffect(() => {
+        const editor = instanceRef.current.editor;
+        if (editor) {
+            const stop = editor.onDidBlurEditorWidget(() => {
+                ReactDOM.unstable_batchedUpdates(() => {
+                    onBlur?.();
+                });
+            });
+            return () => {
+                stop.dispose();
+            };
+        }
+    }, [onBlur, instanceRef.current.editor]);
+    useEffect(() => {
+        const editor = instanceRef.current.editor;
+        const stops = [];
+        if (editor && isScrollOnFocus) {
+            stops.push(editor.onDidFocusEditorWidget(() => {
+                editor.updateOptions({
+                    scrollbar: {
+                        handleMouseWheel: true,
+                    }
+                });
+            }));
+            stops.push(editor.onDidBlurEditorWidget(() => {
+                editor.updateOptions({
+                    scrollbar: {
+                        handleMouseWheel: false,
+                    }
+                });
+            }));
+        }
+        return () => {
+            stops.forEach(stop => stop.dispose());
+        };
+    }, [instanceRef.current.editor, isScrollOnFocus]);
+    return (_jsx("div", { ref: ref, className: cx(YamlEditorStyle, props.className), style: {
+            width: '100%',
+            height: height || '500px',
+        } }));
+};
+export default MonacoYamlEditor;

package/lib/src/components/YamlEditor/YamlEditorComponent.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { Icon } from '@cloudtower/eagle';
+import { ClipboardCopy16GradientGrayIcon, ClipboardCopy16GradientBlueIcon, HierarchyTriangleRight16GrayIcon, HierarchyTriangleRight16BlueIcon, Retry16GradientGrayIcon, Retry16GradientBlueIcon, XmarkFailedSeriousWarningFill16RedIcon, EditPen16GradientGrayIcon, EditPen16GradientBlueIcon, Showdiff16GradientGrayIcon, Showdiff16GradientBlueIcon, } from '@cloudtower/icons-react';
+import { cx } from '@linaria/core';
+import React, { Suspense, useCallback, useRef, useState, useImperativeHandle, forwardRef, } from 'react';
+import { useD2Translation } from '../../i18n';
+import { Separator } from '../Separator';
+import { ErrorMsgStyle, IconStyle, PlainCodeStyle, TitleStyle, ToolBarStyle, ToolBarHeaderStyle, ErrorIconStyle, WrapperStyle, ErrorWrapperStyle, } from './style';
+const MonacoYamlEditor = React.lazy(() => import('./MonacoYamlEditor'));
+const MonacoYamlDiffEditor = React.lazy(() => import('./MonacoYamlDiffEditor'));
+export const YamlEditorComponent = forwardRef(function YamlEditorComponent(props, ref) {
+    const { title, collapsable = true, isDefaultCollapsed, defaultValue = '', height, readOnly, errorMsgs = [], schema, eleRef, className, } = props;
+    const kit = useUIKit();
+    const { t } = useD2Translation();
+    const [isCollapsed, setIsCollapsed] = useState(collapsable ? isDefaultCollapsed : false);
+    const [isDiff, setIsDiff] = useState(false);
+    const [value, setValue] = useState(defaultValue);
+    const editorInstance = useRef();
+    const [copyTooltip, setCopyTooltip] = useState(t('dovetail.copy'));
+    const [resetTooltip, setResetTooltip] = useState(t('dovetail.reset_arguments'));
+    useImperativeHandle(ref, () => {
+        return {
+            setValue,
+            setEditorValue: (value) => {
+                editorInstance.current?.getModel()?.setValue(value);
+            },
+            getEditorValue: () => {
+                return editorInstance.current?.getValue() ?? '';
+            },
+            getEditorInstance: () => editorInstance.current || null,
+        };
+    });
+    const onChange = useCallback((newVal) => {
+        setValue(newVal);
+        props.onChange?.(newVal);
+    }, [props.onChange]);
+    const onValidate = useCallback((valid, schemaValid) => {
+        props.onValidate?.(valid, schemaValid);
+    }, [props.onValidate]);
+    const onEditorCreate = useCallback((editor) => {
+        if (editor.getValue() !== value) {
+            editorInstance.current?.getModel()?.setValue(value);
+        }
+        props.onEditorCreate?.(editor);
+    }, [value, props.onEditorCreate]);
+    const getInstance = useCallback((ins) => {
+        editorInstance.current = ins;
+    }, []);
+    return (_jsxs("div", { className: cx(WrapperStyle, className), "data-is-error": !!errorMsgs.length, ref: eleRef, children: [_jsxs(kit.space, { className: cx(ToolBarStyle, isCollapsed ? 'collapsed' : ''), direction: "vertical", size: 0, children: [_jsxs(kit.space, { className: ToolBarHeaderStyle, children: [_jsxs(kit.space, { size: 8, children: [collapsable && (_jsx(Icon, { src: HierarchyTriangleRight16GrayIcon, hoverSrc: HierarchyTriangleRight16BlueIcon, className: cx(IconStyle, isCollapsed ? '' : 'arrow-down'), iconWidth: 16, iconHeight: 16, onClick: () => setIsCollapsed(!isCollapsed) })), _jsx("div", { className: cx(TitleStyle, 'yaml-editor-title'), children: title || t('dovetail.configure_file') })] }), _jsxs(kit.space, { size: 14, children: [isDiff ? undefined : (_jsxs(_Fragment, { children: [_jsx(kit.tooltip, { title: isCollapsed ? '' : copyTooltip, onVisibleChange: visible => {
+                                                    if (!visible) {
+                                                        setTimeout(() => {
+                                                            setCopyTooltip(t('dovetail.copy'));
+                                                        }, 80);
+                                                    }
+                                                }, children: _jsx(Icon, { "data-disabled": isCollapsed, src: ClipboardCopy16GradientGrayIcon, hoverSrc: isCollapsed ? undefined : ClipboardCopy16GradientBlueIcon, className: IconStyle, iconWidth: 16, iconHeight: 16, onClick: () => {
+                                                        if (!isCollapsed) {
+                                                            copyToClipboard(value);
+                                                            setCopyTooltip(t('dovetail.copied'));
+                                                        }
+                                                    } }) }), _jsx(Separator, {}), _jsx(kit.tooltip, { title: isCollapsed ? '' : resetTooltip, onVisibleChange: visible => {
+                                                    if (!visible) {
+                                                        setTimeout(() => {
+                                                            setResetTooltip(t('dovetail.reset_arguments'));
+                                                        }, 80);
+                                                    }
+                                                }, children: _jsx(Icon, { "data-disabled": isCollapsed, src: Retry16GradientGrayIcon, hoverSrc: isCollapsed ? undefined : Retry16GradientBlueIcon, className: IconStyle, iconWidth: 16, iconHeight: 16, onClick: () => {
+                                                        if (!isCollapsed) {
+                                                            editorInstance.current?.setValue(defaultValue);
+                                                            setResetTooltip(t('dovetail.already_reset'));
+                                                        }
+                                                    } }) }), _jsx(Separator, {})] })), _jsx(kit.tooltip, { title: isCollapsed
+                                            ? ''
+                                            : isDiff
+                                                ? t('dovetail.back_to_edit')
+                                                : t('dovetail.view_changes'), children: isDiff ? (_jsx(Icon, { "data-disabled": isCollapsed, src: EditPen16GradientGrayIcon, hoverSrc: isCollapsed ? undefined : EditPen16GradientBlueIcon, className: IconStyle, iconWidth: 16, iconHeight: 16, onClick: () => (isCollapsed ? undefined : setIsDiff(false)) })) : (_jsx(Icon, { "data-disabled": isCollapsed, src: Showdiff16GradientGrayIcon, hoverSrc: isCollapsed ? undefined : Showdiff16GradientBlueIcon, className: IconStyle, iconWidth: 16, iconHeight: 16, onClick: () => (isCollapsed ? undefined : setIsDiff(true)) })) })] })] }), errorMsgs.length ? (_jsxs(kit.space, { className: ErrorWrapperStyle, size: 8, align: "start", children: [_jsx(XmarkFailedSeriousWarningFill16RedIcon, { className: ErrorIconStyle }), _jsx("div", { children: errorMsgs.map((errorMsg, index) => (_jsxs("div", { className: ErrorMsgStyle, children: [errorMsgs.length > 1 ? `${index + 1}. ` : '', errorMsg] }, errorMsg))) })] })) : undefined] }), _jsx("div", { style: {
+                    display: isCollapsed ? 'none' : 'block',
+                    width: '100%',
+                    height: height || '500px',
+                    zIndex: 1,
+                }, children: isDiff ? (_jsx(Suspense, { fallback: _jsx("pre", { className: PlainCodeStyle, children: value }), children: _jsx(MonacoYamlDiffEditor, { id: props.id, origin: defaultValue, modified: value, height: height }) })) : (_jsx(Suspense, { fallback: _jsx("pre", { className: PlainCodeStyle, children: value }), children: _jsx(MonacoYamlEditor, { id: props.id, getInstance: getInstance, defaultValue: defaultValue, height: height, onChange: onChange, onValidate: onValidate, onEditorCreate: onEditorCreate, onBlur: props.onBlur, schema: schema, readOnly: readOnly }) })) })] }));
+});
+function copyToClipboard(text) {
+    const input = document.createElement('textarea');
+    input.value = text;
+    document.body.appendChild(input);
+    input.select();
+    document.execCommand('copy');
+    document.body.removeChild(input);
+}

package/lib/src/components/YamlEditor/index.js

@@ -0,0 +1 @@
+export * from './YamlEditorComponent';

package/lib/src/components/YamlEditor/style.js

@@ -0,0 +1,102 @@
+import { css } from '@linaria/core';
+export const ToolBarStyle = css `
+  width: 100%;
+  padding: 11px;
+  border-bottom: 1px solid rgba(211, 218, 235, 0.6);
+  background: rgba(225, 230, 241, 0.6);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+
+  &.collapsed {
+    border-bottom: 0;
+  }
+
+  & svg {
+    margin: auto;
+  }
+
+  & > .dovetail-ant-space-item {
+    line-height: 16px;
+  }
+`;
+export const ToolBarHeaderStyle = css `
+  display: flex;
+  width: 100%;
+  height: 20px;
+  justify-content: space-between;
+
+  .ant-space-item {
+    line-height: 1;
+  }
+`;
+export const ErrorIconStyle = css `
+  margin-top: 1px;
+`;
+export const WrapperStyle = css `
+  width: 100%;
+  border: 1px solid rgba(211, 218, 235, 0.6);
+  border-radius: 8px;
+
+  &[data-is-error='true'] {
+    border-color: #f0483e;
+
+    & .${ToolBarStyle} {
+      padding-bottom: 7px;
+      background: #ffecec;
+    }
+  }
+`;
+export const TitleStyle = css `
+  color: #00122e;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 20px;
+`;
+export const IconStyle = css `
+  cursor: pointer;
+  margin: auto 0;
+
+  &.arrow-down svg {
+    transform: rotate(90deg);
+  }
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+export const DisabledIconStyle = css `
+  fill: rgba(#2c3852, 0.6);
+  cursor: not-allowed;
+`;
+export const PlainCodeStyle = css `
+  font-family: Menlo, Monaco, 'Courier New', monospace;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  padding-left: 62px;
+  overflow: auto;
+`;
+export const ErrorMsgStyle = css `
+  color: #f0483e;
+  font-size: 12px;
+  line-height: 18px;
+  word-break: break-all;
+`;
+export const ErrorWrapperStyle = css `
+  margin-top: 8px;
+`;
+export const YamlEditorStyle = css `
+  .monaco-editor {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+
+    .margin {
+      border-bottom-left-radius: 8px;
+    }
+
+    .monaco-scrollable-element {
+      border-bottom-right-radius: 8px;
+    }
+  }
+`;

package/lib/src/components/YamlEditor/yaml.worker.js

@@ -0,0 +1 @@
+import 'monaco-yaml/yaml.worker.js';

package/lib/src/components/YamlForm/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { FormAction } from '@refinedev/core';
 import useEagleForm from 'src/hooks/useEagleForm';
 export declare enum SchemaStrategy {
     Required = "Required",
@@ -8,9 +7,7 @@ export declare enum SchemaStrategy {
 }
 export interface YamlFormProps {
     id?: string;
-    action?: FormAction;
     initialValues?: Record<string, unknown>;
-    transformValues?: (values: Record<string, unknown>) => Record<string, unknown>;
     schemaStrategy?: SchemaStrategy;
     isShowLayout?: boolean;
     useFormProps?: Parameters<typeof useEagleForm>[0];
@@ -18,7 +15,6 @@ export interface YamlFormProps {
         disabled?: boolean;
         onClick: () => void;
     }) => void;
-    onErrorsChange?: (errors: string[]) => void;
     onFinish?: () => void;
 }
 declare function YamlForm(props: YamlFormProps): JSX.Element;

package/lib/src/components/YamlForm/index.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { css } from '@linaria/core';
+import React, { useMemo, useCallback, useEffect } from 'react';
+import ErrorContent from 'src/components/ErrorContent';
+import { FormErrorAlert } from 'src/components/FormErrorAlert';
+import FormLayout from 'src/components/FormLayout';
+import { YamlEditorComponent } from 'src/components/YamlEditor/YamlEditorComponent';
+import { BASE_INIT_VALUE } from 'src/constants/k8s';
+import useEagleForm from 'src/hooks/useEagleForm';
+import { getCommonErrors } from 'src/utils/error';
+import { useD2Translation } from '../../i18n';
+const FormStyle = css `
+`;
+const EditorStyle = css `
+  flex: 1;
+  height: 100%;
+  margin-bottom: 16px;
+`;
+export var SchemaStrategy;
+(function (SchemaStrategy) {
+    SchemaStrategy["Required"] = "Required";
+    SchemaStrategy["Optional"] = "Optional";
+    SchemaStrategy["None"] = "None";
+})(SchemaStrategy || (SchemaStrategy = {}));
+function YamlForm(props) {
+    const { id, schemaStrategy = SchemaStrategy.Optional, isShowLayout = true, onSaveButtonPropsChange } = props;
+    const { formProps, saveButtonProps, editorProps, errorResponseBody, mutationResult, isLoadingSchema, fetchSchema, } = useEagleForm({
+        id,
+        action: id ? 'edit' : 'create',
+        editorOptions: {
+            isSkipSchema: schemaStrategy === SchemaStrategy.None,
+        },
+        liveMode: 'off',
+        initialValuesForCreate: props.initialValues ?? BASE_INIT_VALUE
+    });
+    const kit = useUIKit();
+    const { t, i18n } = useD2Translation();
+    const responseErrors = errorResponseBody
+        ? getCommonErrors(errorResponseBody, i18n)
+        : [];
+    const FormWrapper = isShowLayout ? FormLayout : React.Fragment;
+    // use useMemo to keep {} the same
+    const schema = useMemo(() => {
+        return editorProps.schema || {};
+    }, [editorProps.schema]);
+    const onFinish = useCallback(async (store) => {
+        await formProps.onFinish?.(store);
+        props.onFinish?.();
+    }, [formProps, props]);
+    useEffect(() => {
+        onSaveButtonPropsChange?.(saveButtonProps);
+    }, [saveButtonProps, onSaveButtonPropsChange]);
+    return (_jsx(FormWrapper, { saveButtonProps: saveButtonProps, children: _jsx(kit.form, { ...formProps, initialValues: formProps.initialValues, layout: "horizontal", className: FormStyle, onFinish: onFinish, children: (() => {
+                if (isLoadingSchema) {
+                    return _jsx(kit.loading, {});
+                }
+                return editorProps.schema || schemaStrategy !== SchemaStrategy.Required ? (_jsxs(_Fragment, { children: [_jsx(kit.form.Item, { style: { flex: 1 }, children: _jsx(YamlEditorComponent, { ...editorProps, className: EditorStyle, schema: schema, collapsable: false }) }), _jsx(kit.form.Item, { children: mutationResult.error && (_jsx(FormErrorAlert, { errorMsgs: errorResponseBody ? responseErrors : [mutationResult.error.message], style: { marginBottom: 16 } })) })] })) : (_jsx(ErrorContent, { errorText: t('dovetail.fetch_schema_fail'), refetch: fetchSchema }));
+            })() }) }));
+}
+export default YamlForm;

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

@@ -7,7 +7,6 @@ export * from './FormLayout';
 export * from './PodContainersTable';
 export * from './WorkloadDropdown';
 export * from './ReplicasDropdown';
-export * from './PodDropdown';
 export * from './CreateButton';
 export * from './ImageNames';
 export * from './ResourceCRUD';
@@ -40,3 +39,5 @@ export * from './TextTags';
 export * from './PodLog';
 export * from './NetworkPolicyRulesViewer';
 export * from './Tabs';
+export * as ValueDisplay from './ValueDisplay';
+export * from './ResourceSelect';

package/lib/src/components/index.js

@@ -0,0 +1,38 @@
+export * from './Breadcrumb';
+export * from './Form';
+export * from './PageShow';
+export * from './Time';
+export * from './ConditionsTable';
+export * from './FormLayout';
+export * from './PodContainersTable';
+export * from './WorkloadDropdown';
+export * from './CreateButton';
+export * from './ImageNames';
+export * from './ResourceCRUD';
+export * from './WorkloadPodsTable';
+export * from './CronJobDropdown';
+export * from './K8sDropdown';
+export * from './ResourceUsageBar';
+export * from './WorkloadReplicas';
+export * from './CronjobJobsTable';
+export * from './KeyValue';
+export * from './Separator';
+export * from './YamlEditor';
+export * from './DeleteButton';
+export * from './Layout';
+export * from './ShowContent';
+export * from './YamlForm';
+export * from './DeleteManyButton';
+export * from './ListPage';
+export * from './StateTag';
+export * from './DrawerShow';
+export * from './Menu';
+export * from './Table';
+export * from './EditButton';
+export * from './ReferenceLink';
+export * from './ResourceLink';
+export * from './NamespacesFilter';
+export * from './Tags';
+export * from './PodLog';
+export * from './FormModal';
+export * from './NetworkPolicyRulesTable';

package/lib/src/constants/index.js

@@ -0,0 +1,2 @@
+export * from './k8s';
+export * from './state';