f7b4e591f9
- Fix LogStreamPanel event listener cleanup with synchronous unlisten - Fix eventBus async-unsafe unsubscribe with proper error handling - Fix KubernetesPage infinite loading by resetting state on section change - Add ErrorBoundary component with reset capability - Add Badge component with multiple variants - Add ResourceDetailsDrawer for slide-out details panel - Add useFavorites hook with localStorage persistence - Add useKeyboardShortcuts hook for declarative shortcuts - Add comprehensive test coverage for all new components/hooks - Add keyboard shortcuts documentation to README - Wrap KubernetesPage with ErrorBoundary for crash recovery - Install react-window for virtual scrolling support Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
104 lines
2.6 KiB
TypeScript
104 lines
2.6 KiB
TypeScript
import React from "react";
|
|
import Editor from "@monaco-editor/react";
|
|
import { Button } from "@/components/ui";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
interface YamlEditorProps {
|
|
content?: string;
|
|
onChange?: (yaml: string) => void;
|
|
onApply?: (yaml: string) => void;
|
|
onCancel?: () => void;
|
|
readOnly?: boolean;
|
|
height?: string;
|
|
showControls?: boolean;
|
|
}
|
|
|
|
export function YamlEditor({
|
|
content = "",
|
|
onChange,
|
|
onApply,
|
|
onCancel,
|
|
readOnly = false,
|
|
height = "400px",
|
|
showControls = true,
|
|
}: YamlEditorProps) {
|
|
const [value, setValue] = React.useState(content);
|
|
const [isLoading, setIsLoading] = React.useState(true);
|
|
const [isMonacoReady, setIsMonacoReady] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
// Only update value when Monaco is ready to prevent race condition
|
|
if (isMonacoReady) {
|
|
setValue(content);
|
|
}
|
|
}, [content, isMonacoReady]);
|
|
|
|
// Initialize value when Monaco mounts
|
|
React.useEffect(() => {
|
|
if (isMonacoReady && content) {
|
|
setValue(content);
|
|
}
|
|
}, [isMonacoReady, content]);
|
|
|
|
const handleChange = (v: string | undefined) => {
|
|
const next = v ?? "";
|
|
setValue(next);
|
|
// When there are no controls, propagate every change immediately to the parent.
|
|
if (!showControls) {
|
|
onChange?.(next);
|
|
}
|
|
};
|
|
|
|
const handleApply = () => {
|
|
onChange?.(value);
|
|
onApply?.(value);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2 h-full">
|
|
<div
|
|
className="rounded-md border overflow-hidden bg-[#1e1e1e]"
|
|
style={{ height }}
|
|
>
|
|
{isLoading && (
|
|
<div className="flex items-center justify-center h-full bg-[#1e1e1e]">
|
|
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" role="status" />
|
|
</div>
|
|
)}
|
|
<Editor
|
|
language="yaml"
|
|
theme="vs-dark"
|
|
value={value}
|
|
onChange={handleChange}
|
|
onMount={() => {
|
|
setIsLoading(false);
|
|
setIsMonacoReady(true);
|
|
}}
|
|
options={{
|
|
minimap: { enabled: false },
|
|
scrollBeyondLastLine: false,
|
|
fontSize: 13,
|
|
wordWrap: "on",
|
|
readOnly,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{showControls && (
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={onCancel}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
className="bg-primary"
|
|
onClick={handleApply}
|
|
disabled={readOnly}
|
|
>
|
|
Apply
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|