@dovetail-v2/refine 0.0.45 → 0.0.46-alpha.1

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

@@ -1,34 +0,0 @@
-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

@@ -1,149 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

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

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

@@ -1,102 +0,0 @@
-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

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

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

@@ -1,61 +0,0 @@
-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.js

@@ -1,38 +0,0 @@
-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

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