@skyhook-io/k8s-ui 1.0.0

package/src/components/ui/Tooltip.tsx

@@ -0,0 +1,165 @@
+import { ReactNode, useState, useRef, useEffect, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { clsx } from 'clsx'
+
+interface TooltipProps {
+  content: ReactNode
+  children: ReactNode
+  /** Delay before showing tooltip in ms (default: 300) */
+  delay?: number
+  /** Position of tooltip (default: 'top') */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  /** Additional class for the tooltip content */
+  className?: string
+  /** Whether tooltip is disabled */
+  disabled?: boolean
+  /** Additional class for the wrapper span (useful for positioning) */
+  wrapperClassName?: string
+  /** Inline styles for the wrapper span (useful for absolute positioning) */
+  wrapperStyle?: React.CSSProperties
+}
+
+export function Tooltip({
+  content,
+  children,
+  delay = 300,
+  position = 'top',
+  className,
+  disabled = false,
+  wrapperClassName,
+  wrapperStyle,
+}: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false)
+  const [coords, setCoords] = useState({ top: 0, left: 0 })
+  const triggerRef = useRef<HTMLSpanElement>(null)
+  const tooltipRef = useRef<HTMLSpanElement>(null)
+  const timeoutRef = useRef<number | null>(null)
+
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current) return
+
+    const rect = triggerRef.current.getBoundingClientRect()
+    const tooltipRect = tooltipRef.current?.getBoundingClientRect()
+    const tooltipWidth = tooltipRect?.width || 0
+    const tooltipHeight = tooltipRect?.height || 0
+
+    let top = 0
+    let left = 0
+
+    switch (position) {
+      case 'top':
+        top = rect.top - tooltipHeight - 6
+        left = rect.left + rect.width / 2 - tooltipWidth / 2
+        break
+      case 'bottom':
+        top = rect.bottom + 6
+        left = rect.left + rect.width / 2 - tooltipWidth / 2
+        break
+      case 'left':
+        top = rect.top + rect.height / 2 - tooltipHeight / 2
+        left = rect.left - tooltipWidth - 6
+        break
+      case 'right':
+        top = rect.top + rect.height / 2 - tooltipHeight / 2
+        left = rect.right + 6
+        break
+    }
+
+    // Keep tooltip within viewport
+    const padding = 8
+    if (left < padding) left = padding
+    if (left + tooltipWidth > window.innerWidth - padding) {
+      left = window.innerWidth - tooltipWidth - padding
+    }
+    if (top < padding) top = rect.bottom + 6 // flip to bottom
+    if (top + tooltipHeight > window.innerHeight - padding) {
+      top = rect.top - tooltipHeight - 6 // flip to top
+    }
+
+    setCoords({ top, left })
+  }, [position])
+
+  const showTooltip = () => {
+    if (disabled || !content) return
+    timeoutRef.current = window.setTimeout(() => {
+      setIsVisible(true)
+    }, delay)
+  }
+
+  const hideTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+    setIsVisible(false)
+  }
+
+  useEffect(() => {
+    if (isVisible) {
+      // Small delay to let the tooltip render before measuring
+      requestAnimationFrame(updatePosition)
+    }
+  }, [isVisible, updatePosition])
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  if (disabled || !content) {
+    return <>{children}</>
+  }
+
+  return (
+    <>
+      <span
+        ref={triggerRef}
+        className={clsx('inline-flex max-w-full', wrapperClassName)}
+        style={wrapperStyle}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        onFocus={showTooltip}
+        onBlur={hideTooltip}
+      >
+        {children}
+      </span>
+      {isVisible &&
+        createPortal(
+          <span
+            ref={tooltipRef}
+            className={clsx(
+              'fixed z-[9999] px-2 py-1 text-xs text-theme-text-primary bg-theme-base rounded shadow-lg border border-theme-border',
+              'whitespace-nowrap pointer-events-none',
+              className
+            )}
+            style={{ top: coords.top, left: coords.left }}
+            role="tooltip"
+          >
+            {content}
+          </span>,
+          document.body
+        )}
+    </>
+  )
+}
+
+/** Simple wrapper that adds tooltip to any element - use for quick migrations from title="" */
+export function WithTooltip({
+  tip,
+  children,
+  delay = 300,
+}: {
+  tip: string | undefined | null
+  children: ReactNode
+  delay?: number
+}) {
+  if (!tip) return <>{children}</>
+  return (
+    <Tooltip content={tip} delay={delay}>
+      {children}
+    </Tooltip>
+  )
+}

package/src/components/ui/YamlEditor.tsx

@@ -0,0 +1,280 @@
+import { useRef, useCallback, useEffect } from 'react'
+import Editor, { OnMount, OnChange, type Monaco } from '@monaco-editor/react'
+import type { editor } from 'monaco-editor'
+
+interface YamlEditorProps {
+  value: string
+  onChange?: (value: string) => void
+  readOnly?: boolean
+  height?: string | number
+  onValidate?: (isValid: boolean, errors: string[]) => void
+  /** Resource kind - used to highlight editable fields for restricted resources like Pods */
+  kind?: string
+}
+
+// Find line numbers for editable fields in a Pod YAML
+function findPodEditableLines(yaml: string): number[] {
+  const lines = yaml.split('\n')
+  const editableLines: number[] = []
+
+  let inContainers = false
+  let inInitContainers = false
+  let inTolerations = false
+  let containerIndent = 0
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    const trimmed = line.trimStart()
+    const indent = line.length - trimmed.length
+
+    // Track when we enter/exit containers section
+    if (trimmed.startsWith('containers:')) {
+      inContainers = true
+      containerIndent = indent
+      continue
+    }
+    if (trimmed.startsWith('initContainers:')) {
+      inInitContainers = true
+      containerIndent = indent
+      continue
+    }
+    if (trimmed.startsWith('tolerations:')) {
+      inTolerations = true
+      editableLines.push(i + 1) // 1-indexed
+      containerIndent = indent
+      continue
+    }
+
+    // Exit section when we hit same or lower indent level with a new key
+    if ((inContainers || inInitContainers || inTolerations) &&
+        indent <= containerIndent &&
+        trimmed.length > 0 &&
+        !trimmed.startsWith('-') &&
+        !trimmed.startsWith('#')) {
+      inContainers = false
+      inInitContainers = false
+      inTolerations = false
+    }
+
+    // Mark image lines as editable
+    if ((inContainers || inInitContainers) && trimmed.startsWith('image:')) {
+      editableLines.push(i + 1) // 1-indexed
+    }
+
+    // Mark toleration lines as editable (whole section)
+    if (inTolerations && trimmed.length > 0) {
+      editableLines.push(i + 1)
+    }
+
+    // activeDeadlineSeconds is editable
+    if (trimmed.startsWith('activeDeadlineSeconds:')) {
+      editableLines.push(i + 1)
+    }
+
+    // terminationGracePeriodSeconds is editable (with restrictions)
+    if (trimmed.startsWith('terminationGracePeriodSeconds:')) {
+      editableLines.push(i + 1)
+    }
+  }
+
+  return editableLines
+}
+
+export function YamlEditor({
+  value,
+  onChange,
+  readOnly = false,
+  height = '100%',
+  onValidate,
+  kind,
+}: YamlEditorProps) {
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null)
+  const decorationsRef = useRef<string[]>([])
+  const monacoRef = useRef<Monaco | null>(null)
+
+  // Apply decorations for editable fields
+  const applyDecorations = useCallback(() => {
+    const editor = editorRef.current
+    const monaco = monacoRef.current
+    if (!editor || !monaco || !kind) return
+
+    const isPod = kind.toLowerCase() === 'pods' || kind.toLowerCase() === 'pod'
+    if (!isPod) {
+      // Clear decorations for non-pods
+      if (decorationsRef.current.length > 0) {
+        decorationsRef.current = editor.deltaDecorations(decorationsRef.current, [])
+      }
+      return
+    }
+
+    const editableLines = findPodEditableLines(value)
+
+    const decorations: editor.IModelDeltaDecoration[] = editableLines.map(lineNumber => ({
+      range: {
+        startLineNumber: lineNumber,
+        startColumn: 1,
+        endLineNumber: lineNumber,
+        endColumn: 1,
+      },
+      options: {
+        isWholeLine: true,
+        className: 'editable-line-highlight',
+        glyphMarginClassName: 'editable-line-glyph',
+        overviewRuler: {
+          color: 'rgba(34, 197, 94, 0.5)',
+          position: monaco.editor.OverviewRulerLane.Left,
+        },
+      },
+    }))
+
+    decorationsRef.current = editor.deltaDecorations(decorationsRef.current, decorations)
+  }, [value, kind])
+
+  // Re-apply decorations when value changes
+  useEffect(() => {
+    applyDecorations()
+  }, [applyDecorations])
+
+  // Expose editor globally for desktop clipboard interception (see main.tsx).
+  useEffect(() => {
+    return () => { delete (window as any).__radarMonacoEditor }
+  }, [])
+
+  const handleEditorMount: OnMount = useCallback((editor, monaco) => {
+    editorRef.current = editor
+    monacoRef.current = monaco
+    ;(window as any).__radarMonacoEditor = editor
+
+    // Add CSS for editable line highlighting
+    const styleId = 'yaml-editor-styles'
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement('style')
+      style.id = styleId
+      style.textContent = `
+        .editable-line-highlight {
+          background-color: rgba(34, 197, 94, 0.1) !important;
+          border-left: 3px solid rgba(34, 197, 94, 0.6) !important;
+        }
+        .editable-line-glyph {
+          background-color: rgba(34, 197, 94, 0.6);
+          width: 4px !important;
+          margin-left: 3px;
+          border-radius: 2px;
+        }
+      `
+      document.head.appendChild(style)
+    }
+
+    // Configure YAML diagnostics (yaml property added by monaco-yaml plugin when available)
+    ;(monaco.languages as any).yaml?.yamlDefaults?.setDiagnosticsOptions({
+      enableSchemaRequest: false,
+      validate: true,
+      format: true,
+    })
+
+    // Set editor options
+    editor.updateOptions({
+      minimap: { enabled: false },
+      lineNumbers: 'on',
+      scrollBeyondLastLine: false,
+      wordWrap: 'on',
+      wrappingStrategy: 'advanced',
+      folding: true,
+      foldingStrategy: 'indentation',
+      renderLineHighlight: 'line',
+      selectOnLineNumbers: true,
+      roundedSelection: true,
+      cursorStyle: 'line',
+      automaticLayout: true,
+      tabSize: 2,
+      insertSpaces: true,
+      fontSize: 13,
+      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+      padding: { top: 12, bottom: 12 },
+      glyphMargin: true,
+    })
+
+    // Listen for validation markers
+    if (onValidate) {
+      monaco.editor.onDidChangeMarkers((uris: readonly { toString(): string }[]) => {
+        const uri = uris[0]
+        if (uri && uri.toString() === editor.getModel()?.uri.toString()) {
+          const markers = monaco.editor.getModelMarkers({ resource: uri as Parameters<typeof monaco.editor.getModelMarkers>[0]['resource'] })
+          const errors = markers
+            .filter((m: { severity: number }) => m.severity === monaco.MarkerSeverity.Error)
+            .map((m: { startLineNumber: number; message: string }) => `Line ${m.startLineNumber}: ${m.message}`)
+          onValidate(errors.length === 0, errors)
+        }
+      })
+    }
+
+    // Apply initial decorations
+    setTimeout(applyDecorations, 100)
+  }, [onValidate, applyDecorations])
+
+  const handleChange: OnChange = useCallback((newValue) => {
+    if (onChange && newValue !== undefined) {
+      onChange(newValue)
+    }
+  }, [onChange])
+
+  return (
+    <div className="rounded-lg overflow-hidden border border-theme-border" style={{ height }}>
+      <Editor
+        defaultLanguage="yaml"
+        value={value}
+        onChange={handleChange}
+        onMount={handleEditorMount}
+        theme="vs-dark"
+        options={{
+          readOnly,
+          domReadOnly: readOnly,
+        }}
+        loading={
+          <div className="flex items-center justify-center h-full bg-theme-surface text-theme-text-secondary">
+            Loading editor...
+          </div>
+        }
+      />
+    </div>
+  )
+}
+
+// Diff editor for showing changes before apply
+interface YamlDiffEditorProps {
+  original: string
+  modified: string
+  height?: string | number
+}
+
+export function YamlDiffEditor({
+  original: _original,
+  modified,
+  height = '100%',
+}: YamlDiffEditorProps) {
+  // TODO: Use Monaco DiffEditor to show actual diff
+  void _original
+  return (
+    <div className="rounded-lg overflow-hidden border border-theme-border" style={{ height }}>
+      <Editor
+        defaultLanguage="yaml"
+        value={modified}
+        theme="vs-dark"
+        options={{
+          readOnly: true,
+          minimap: { enabled: false },
+          lineNumbers: 'on',
+          scrollBeyondLastLine: false,
+          fontSize: 13,
+          fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+          padding: { top: 12, bottom: 12 },
+        }}
+        loading={
+          <div className="flex items-center justify-center h-full bg-theme-surface text-theme-text-secondary">
+            Loading diff...
+          </div>
+        }
+      />
+    </div>
+  )
+}