@skyhook-io/k8s-ui 1.0.0 → 1.1.1

package/src/components/topology/TopologyGraph.tsx

@@ -17,8 +17,10 @@ import {
   MarkerType,
 } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
+import { toCanvas } from 'html-to-image'
 
-import { AlertTriangle, RotateCw, Scissors, Shield } from 'lucide-react'
+import { AlertTriangle, Download, Loader2, RotateCw, Shield } from 'lucide-react'
+import { useToast } from '../ui/Toast'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
 import { K8sResourceNode } from './K8sResourceNode'
@@ -152,6 +154,8 @@ interface TopologyGraphProps {
   hideGroupHeader?: boolean
   onNodeClick: (node: TopologyNode) => void
   selectedNodeId?: string
+  /** Show image export button in controls. Default: true */
+  showExportButton?: boolean
 }
 
 export function TopologyGraph({
@@ -161,6 +165,7 @@ export function TopologyGraph({
   hideGroupHeader = false,
   onNodeClick,
   selectedNodeId,
+  showExportButton = true,
 }: TopologyGraphProps) {
   const isTrafficView = viewMode === 'traffic'
   const [nodes, setNodes, onNodesChange] = useNodesState([] as Node[])
@@ -169,6 +174,7 @@ export function TopologyGraph({
   const [expandedPodGroups, setExpandedPodGroups] = useState<Set<string>>(new Set())
   const [layoutError, setLayoutError] = useState<string | null>(null)
   const [layoutRetryCount, setLayoutRetryCount] = useState(0)
+  const [isExporting, setIsExporting] = useState(false)
   const prevStructureRef = useRef<string>('')
   const layoutVersionRef = useRef(0) // Used to invalidate stale layout results
 
@@ -535,23 +541,8 @@ export function TopologyGraph({
 
   return (
     <ReactFlowProvider>
-      {/* Truncation banner - shown when topology has too many nodes */}
-      {topology?.truncated && (
-        <div className="absolute top-2 left-2 right-2 z-10 bg-blue-500/10 border border-blue-500/30 rounded-lg p-2 backdrop-blur-sm">
-          <div className="flex items-center gap-2">
-            <Scissors className="w-4 h-4 text-blue-400 shrink-0" />
-            <div className="text-sm">
-              <span className="font-medium text-blue-400">Large cluster:</span>
-              <span className="text-theme-text-secondary ml-1">
-                Showing {topology.nodes.length} of {topology.totalNodes} nodes.
-                Select a namespace for better performance.
-              </span>
-            </div>
-          </div>
-        </div>
-      )}
       {/* Warning banner for partial topology data */}
-      {topology?.warnings && topology.warnings.length > 0 && !topology.truncated && (() => {
+      {topology?.warnings && topology.warnings.length > 0 && (() => {
         const rbacWarnings = topology.warnings.filter(w => w.includes('RBAC not granted'))
         const otherWarnings = topology.warnings.filter(w => !w.includes('RBAC not granted'))
         const isAllRbac = otherWarnings.length === 0
@@ -623,19 +614,291 @@ export function TopologyGraph({
         minZoom={0.1}
         maxZoom={2}
         proOptions={{ hideAttribution: true }}
-        onlyRenderVisibleElements
+        onlyRenderVisibleElements={!isExporting}
       >
         <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#334155" />
         <Controls
           className="bg-theme-surface border border-theme-border rounded-lg"
           showInteractive={false}
-        />
+        >
+          {showExportButton && <ExportImageButton onExportingChange={setIsExporting} />}
+        </Controls>
         <ViewportController structureKey={structureKey} />
       </ReactFlow>
     </ReactFlowProvider>
   )
 }
 
+// Read the effective background color from the topology container
+function getTopologyBgColor(): string {
+  const el = document.querySelector('.react-flow')
+  if (el) {
+    const bg = getComputedStyle(el).backgroundColor
+    if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg
+  }
+  return '#0f172a'
+}
+
+// Compute export dimensions for the dialog preview
+function useExportDimensions(captureMode: 'viewport' | 'full', scale: number) {
+  const { getNodes, getNodesBounds } = useReactFlow()
+  return useMemo(() => {
+    if (captureMode === 'viewport') {
+      const el = document.querySelector('.react-flow') as HTMLElement
+      if (!el) return null
+      const { width, height } = el.getBoundingClientRect()
+      const w = Math.ceil(width)
+      const h = Math.ceil(height)
+      return { pw: w * scale, ph: h * scale }
+    }
+    const nodes = getNodes()
+    if (nodes.length === 0) return null
+    const bounds = getNodesBounds(nodes)
+    const w = Math.ceil(bounds.width + EXPORT_PADDING * 2)
+    const h = Math.ceil(bounds.height + EXPORT_PADDING * 2)
+    // Full capture uses pixelRatio=1, so dimensions are 1:1 with graph bounds
+    return { pw: w, ph: h }
+  }, [captureMode, scale, getNodes, getNodesBounds])
+}
+
+type ImageFormat = 'image/png' | 'image/webp'
+const FORMAT_LABELS: Record<ImageFormat, string> = { 'image/png': 'PNG', 'image/webp': 'WebP' }
+const FORMAT_EXT: Record<ImageFormat, string> = { 'image/png': 'png', 'image/webp': 'webp' }
+
+const EXPORT_PADDING = 16
+const EXPORT_TIMEOUT_MS = 30_000
+
+function withTimeout<T>(promise: Promise<T>, ms: number, msg: string): Promise<T> {
+  return Promise.race([
+    promise,
+    new Promise<never>((_, reject) => setTimeout(() => reject(new Error(msg)), ms)),
+  ])
+}
+
+// Export topology as image button + dialog (must be inside ReactFlowProvider)
+function ExportImageButton({ onExportingChange }: { onExportingChange: (v: boolean) => void }) {
+  const [showDialog, setShowDialog] = useState(false)
+  const [exporting, setExporting] = useState(false)
+  const [filename, setFilename] = useState('')
+  const [transparent, setTransparent] = useState(false)
+  const [scale, setScale] = useState(2)
+  const [captureMode, setCaptureMode] = useState<'viewport' | 'full'>('full')
+  const [format, setFormat] = useState<ImageFormat>('image/webp')
+  const { getNodes, getNodesBounds } = useReactFlow()
+  const { showError, showSuccess } = useToast()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const dims = useExportDimensions(captureMode, scale)
+
+  const openDialog = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    e.preventDefault()
+    const nodes = getNodes()
+    if (nodes.length === 0) return
+    setFilename(`topology-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}`)
+    setShowDialog(true)
+    setTimeout(() => inputRef.current?.select(), 50)
+  }, [getNodes])
+
+  const doExport = useCallback(async () => {
+    const flowEl = document.querySelector('.react-flow__viewport') as HTMLElement
+    if (!flowEl) return
+
+    const nodes = getNodes()
+    if (nodes.length === 0) return
+
+    setExporting(true)
+
+    const isFullCapture = captureMode === 'full'
+    if (isFullCapture) {
+      onExportingChange(true)
+      // Wait for React to render all off-screen nodes
+      await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))
+    }
+
+    // Yield to let the UI paint the exporting state before heavy DOM work
+    await new Promise(resolve => setTimeout(resolve, 50))
+
+    try {
+      const bgColor = transparent ? 'transparent' : getTopologyBgColor()
+
+      let canvas: HTMLCanvasElement
+      if (isFullCapture) {
+        const bounds = getNodesBounds(nodes)
+        const w = Math.ceil(bounds.width + EXPORT_PADDING * 2)
+        const h = Math.ceil(bounds.height + EXPORT_PADDING * 2)
+        const tx = -bounds.x + EXPORT_PADDING
+        const ty = -bounds.y + EXPORT_PADDING
+        canvas = await withTimeout(toCanvas(flowEl, {
+          backgroundColor: bgColor,
+          width: w,
+          height: h,
+          pixelRatio: 1,
+          skipFonts: true,
+          style: {
+            width: `${w}px`,
+            height: `${h}px`,
+            transform: `translate(${tx}px, ${ty}px) scale(1)`,
+          },
+        }), EXPORT_TIMEOUT_MS, 'Export timed out — topology may be too large')
+      } else {
+        const flowContainer = document.querySelector('.react-flow') as HTMLElement
+        if (!flowContainer) throw new Error('Topology container not found')
+        const { width: vw, height: vh } = flowContainer.getBoundingClientRect()
+
+        canvas = await withTimeout(toCanvas(flowEl, {
+          backgroundColor: bgColor,
+          width: Math.ceil(vw),
+          height: Math.ceil(vh),
+          pixelRatio: scale,
+          skipFonts: true,
+        }), EXPORT_TIMEOUT_MS, 'Export timed out — topology may be too large')
+      }
+
+      const ext = FORMAT_EXT[format]
+      // WebP: quality 1.0 (lossless) when transparent to avoid alpha artifacts, 0.92 for opaque. PNG ignores quality.
+      const quality = format === 'image/webp' ? (transparent ? 1.0 : 0.92) : undefined
+      const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, format, quality))
+      if (!blob) throw new Error('Failed to create image — canvas may be too large or format unsupported')
+
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `${filename || 'topology'}.${ext}`
+      a.click()
+      setTimeout(() => URL.revokeObjectURL(url), 1000)
+      const sizeMB = (blob.size / 1024 / 1024).toFixed(1)
+      showSuccess(`Exported ${ext.toUpperCase()} (${sizeMB} MB)`)
+    } catch (err) {
+      console.error('Failed to export topology:', err)
+      showError(`Export failed: ${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      setExporting(false)
+      onExportingChange(false)
+      setShowDialog(false)
+    }
+  }, [getNodes, getNodesBounds, transparent, scale, captureMode, format, filename, showError, showSuccess, onExportingChange])
+
+  useEffect(() => {
+    if (!showDialog) return
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.stopPropagation(); setShowDialog(false) }
+      if (e.key === 'Enter' && !exporting) { e.stopPropagation(); doExport() }
+    }
+    document.addEventListener('keydown', handleKey, true)
+    return () => document.removeEventListener('keydown', handleKey, true)
+  }, [showDialog, exporting, doExport])
+
+  return (
+    <>
+      <button
+        className="react-flow__controls-button"
+        onClick={openDialog}
+        disabled={exporting}
+        title="Export as image"
+      >
+        {exporting ? <Loader2 className="w-3 h-3 animate-spin" /> : <Download className="w-3 h-3" />}
+      </button>
+      {showDialog && (
+        <div
+          className="absolute bottom-12 left-0 z-50 bg-theme-surface border border-theme-border rounded-lg shadow-2xl p-3 w-72"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="text-sm font-medium text-theme-text-primary mb-3">Export topology</div>
+          <label className="block text-xs text-theme-text-secondary mb-1">Filename</label>
+          <input
+            ref={inputRef}
+            type="text"
+            value={filename}
+            onChange={(e) => setFilename(e.target.value)}
+            className="w-full px-2 py-1.5 text-sm bg-theme-base border border-theme-border rounded text-theme-text-primary outline-none focus:border-blue-500 mb-3"
+          />
+          <label className="block text-xs text-theme-text-secondary mb-1">Capture</label>
+          <div className="flex gap-1 mb-3">
+            {(['full', 'viewport'] as const).map(mode => (
+              <button
+                key={mode}
+                onClick={() => setCaptureMode(mode)}
+                className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${captureMode === mode ? 'bg-blue-600 text-white' : 'bg-theme-base text-theme-text-secondary hover:text-theme-text-primary border border-theme-border'}`}
+              >
+                {mode === 'full' ? 'Entire graph' : 'Visible area'}
+              </button>
+            ))}
+          </div>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="flex-1">
+              <label className="block text-xs text-theme-text-secondary mb-1">Format</label>
+              <div className="flex gap-1">
+                {(['image/webp', 'image/png'] as ImageFormat[]).map(f => (
+                  <button
+                    key={f}
+                    onClick={() => setFormat(f)}
+                    className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${format === f ? 'bg-blue-600 text-white' : 'bg-theme-base text-theme-text-secondary hover:text-theme-text-primary border border-theme-border'}`}
+                  >
+                    {FORMAT_LABELS[f]}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {captureMode === 'viewport' && (
+              <div className="flex-1">
+                <label className="block text-xs text-theme-text-secondary mb-1">Quality</label>
+                <select
+                  value={scale}
+                  onChange={(e) => setScale(Number(e.target.value))}
+                  className="w-full px-2 py-1.5 text-sm bg-theme-base border border-theme-border rounded text-theme-text-primary outline-none focus:border-blue-500"
+                >
+                  <option value={1}>Standard</option>
+                  <option value={2}>High (2x)</option>
+                  <option value={3}>Ultra (3x)</option>
+                </select>
+              </div>
+            )}
+          </div>
+          {dims && (
+            <div className="text-[10px] text-theme-text-tertiary mb-2">
+              Output: {dims.pw} × {dims.ph} px
+            </div>
+          )}
+          <div className="flex items-center mb-3">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={transparent}
+                onChange={(e) => setTransparent(e.target.checked)}
+                className="rounded"
+              />
+              <span className="text-xs text-theme-text-secondary">Transparent background</span>
+            </label>
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={() => setShowDialog(false)}
+              className="flex-1 px-3 py-1.5 text-sm text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={doExport}
+              disabled={exporting}
+              className="flex-1 px-3 py-1.5 text-sm font-medium bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50 flex items-center justify-center gap-1.5"
+            >
+              {exporting ? <Loader2 className="w-3 h-3 animate-spin" /> : <Download className="w-3 h-3" />}
+              Export
+            </button>
+          </div>
+        </div>
+      )}
+      {exporting && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40">
+          <div className="bg-theme-surface border border-theme-border rounded-lg px-5 py-4 shadow-2xl">
+            <div className="text-sm text-theme-text-primary animate-pulse">Exporting topology…</div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
 // Animation duration for viewport transitions
 const VIEWPORT_ANIMATION_DURATION = 400
 

package/src/components/ui/ConfirmDialog.tsx

@@ -1,10 +1,8 @@
-import { useEffect, useRef, ReactNode } from 'react'
-import { createPortal } from 'react-dom'
+import { ReactNode } from 'react'
 import { AlertTriangle, X } from 'lucide-react'
 import { clsx } from 'clsx'
 import { SEVERITY_TEXT, SEVERITY_BADGE_BORDERED } from '../../utils/badge-colors'
-import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { DialogPortal } from './DialogPortal'
 
 
 interface ConfirmDialogProps {
@@ -18,6 +16,7 @@ interface ConfirmDialogProps {
   cancelLabel?: string
   variant?: 'danger' | 'warning'
   isLoading?: boolean
+  isClosable?: boolean // Allow closing even when isLoading (e.g., for long-running ops the user can dismiss)
   children?: ReactNode // Optional custom content (e.g., checkboxes)
 }
 
@@ -32,99 +31,56 @@ export function ConfirmDialog({
   cancelLabel = 'Cancel',
   variant = 'danger',
   isLoading = false,
+  isClosable = false,
   children,
 }: ConfirmDialogProps) {
-  const dialogRef = useRef<HTMLDivElement>(null)
-  const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
-
-  // Handle ESC key
-  useEffect(() => {
-    if (!open) return
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && !isLoading) {
-        e.stopPropagation()
-        onClose()
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown, true)
-    return () => document.removeEventListener('keydown', handleKeyDown, true)
-  }, [open, onClose, isLoading])
-
-  // Focus trap
-  useEffect(() => {
-    if (open && dialogRef.current) {
-      dialogRef.current.focus()
-    }
-  }, [open])
-
-  if (!shouldRender) return null
-
+  const canClose = !isLoading || isClosable
   const isDanger = variant === 'danger'
   const severity = isDanger ? 'error' : 'warning'
 
-  return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      {/* Backdrop */}
-      <div
-        className={clsx(
-          'absolute inset-0 bg-black/60 backdrop-blur-sm',
-          TRANSITION_BACKDROP,
-          isOpen ? 'opacity-100' : 'opacity-0'
-        )}
-        onClick={isLoading ? undefined : onClose}
-      />
-
-      {/* Dialog */}
-      <div
-        ref={dialogRef}
-        tabIndex={-1}
-        className={clsx(
-          'relative bg-theme-surface border border-theme-border rounded-lg shadow-2xl max-w-md w-full mx-4 outline-none',
-          TRANSITION_PANEL,
-          isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
-        )}
-      >
-        {/* Header */}
-        <div className="flex items-start gap-3 p-4 border-b border-theme-border">
-          <div
-            className={clsx(
-              'flex items-center justify-center w-10 h-10 rounded-full shrink-0',
-              isDanger ? 'bg-red-500/20' : 'bg-amber-500/20'
-            )}
-          >
-            <AlertTriangle className={clsx('w-5 h-5', SEVERITY_TEXT[severity])} />
-          </div>
-          <div className="flex-1 min-w-0">
-            <h3 className="text-lg font-semibold text-theme-text-primary">{title}</h3>
-            <p className="text-sm text-theme-text-secondary mt-1">{message}</p>
-          </div>
-          <button
-            onClick={onClose}
-            disabled={isLoading}
-            className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50"
-          >
-            <X className="w-5 h-5" />
-          </button>
+  return (
+    <DialogPortal open={open} onClose={onClose} closable={canClose} className="max-w-md w-full">
+      {/* Header */}
+      <div className="flex items-start gap-3 p-4 border-b border-theme-border">
+        <div
+          className={clsx(
+            'flex items-center justify-center w-10 h-10 rounded-full shrink-0',
+            isDanger ? 'bg-red-500/20' : 'bg-amber-500/20'
+          )}
+        >
+          <AlertTriangle className={clsx('w-5 h-5', SEVERITY_TEXT[severity])} />
         </div>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-lg font-semibold text-theme-text-primary">{title}</h3>
+          <p className="text-sm text-theme-text-secondary mt-1">{message}</p>
+        </div>
+        <button
+          onClick={onClose}
+          disabled={!canClose}
+          className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
 
-        {/* Details */}
-        {details && (
-          <div className="p-4 border-b border-theme-border">
-            <pre className="text-xs text-theme-text-secondary bg-theme-base/50 rounded p-3 overflow-auto max-h-32 whitespace-pre-wrap font-mono">
-              {details}
-            </pre>
-          </div>
-        )}
+      {/* Details */}
+      {details && (
+        <div className="p-4 border-b border-theme-border">
+          <pre className="text-xs text-theme-text-secondary bg-theme-base/50 rounded p-3 overflow-auto max-h-32 whitespace-pre-wrap font-mono">
+            {details}
+          </pre>
+        </div>
+      )}
 
-        {/* Custom content */}
-        {children && (
-          <div className="px-4 pt-4">
-            {children}
-          </div>
-        )}
+      {/* Custom content */}
+      {children && (
+        <div className="px-4 pt-4">
+          {children}
+        </div>
+      )}
 
-        {/* Warning message */}
+      {/* Warning message — hidden once the action is in progress */}
+      {!isLoading && !children && (
         <div className="p-4">
           <div
             className={clsx(
@@ -140,49 +96,48 @@ export function ConfirmDialog({
             </span>
           </div>
         </div>
+      )}
 
-        {/* Actions */}
-        <div className="flex items-center justify-end gap-3 p-4 border-t border-theme-border">
-          <button
-            onClick={onClose}
-            disabled={isLoading}
-            className="px-4 py-2 text-sm font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg transition-colors disabled:opacity-50"
-          >
-            {cancelLabel}
-          </button>
-          <button
-            onClick={onConfirm}
-            disabled={isLoading}
-            className={clsx(
-              'px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2',
-              isDanger
-                ? 'bg-red-600 hover:bg-red-700 text-theme-text-primary'
-                : 'bg-amber-600 hover:bg-amber-700 text-theme-text-primary'
-            )}
-          >
-            {isLoading && (
-              <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                  fill="none"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                />
-              </svg>
-            )}
-            {confirmLabel}
-          </button>
-        </div>
+      {/* Actions */}
+      <div className="flex items-center justify-end gap-3 p-4 border-t border-theme-border">
+        <button
+          onClick={onClose}
+          disabled={!canClose}
+          className="px-4 py-2 text-sm font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg transition-colors disabled:opacity-50"
+        >
+          {cancelLabel}
+        </button>
+        <button
+          onClick={onConfirm}
+          disabled={isLoading}
+          className={clsx(
+            'px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2',
+            isDanger
+              ? 'bg-red-600 hover:bg-red-700 text-theme-text-primary'
+              : 'bg-amber-600 hover:bg-amber-700 text-theme-text-primary'
+          )}
+        >
+          {isLoading && (
+            <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+                fill="none"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+          )}
+          {confirmLabel}
+        </button>
       </div>
-    </div>,
-    document.body
+    </DialogPortal>
   )
 }