@skyhook-io/k8s-ui 1.14.5 → 1.14.7

package/src/utils/yaml-file-import.test.ts

@@ -0,0 +1,189 @@
+import { describe, expect, it } from 'vitest'
+import {
+  describeFileDrag,
+  MAX_YAML_FILE_BYTES,
+  needsReplaceConfirmation,
+  readYamlFile,
+} from './yaml-file-import'
+
+function drag(items: Array<{ kind: string; type: string }>, types: string[] = []): DataTransfer {
+  return { items, types } as unknown as DataTransfer
+}
+
+// Safari keeps the dragged items protected until the drop, so `items` is empty
+// mid-drag; only `types` reports that files are coming.
+function safariDrag(types: string[]): DataTransfer {
+  return { items: [], types } as unknown as DataTransfer
+}
+
+const MULTI_DOC = `apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: first
+---
+apiVersion: v1
+kind: Secret
+metadata:
+  name: second
+`
+
+function yamlFile(name: string, content: string, type = ''): File {
+  return new File([content], name, { type })
+}
+
+describe('readYamlFile', () => {
+  it('loads a multi-document file as text the editor can hold unchanged', async () => {
+    const result = await readYamlFile([yamlFile('bundle.yaml', MULTI_DOC)])
+
+    expect(result).toEqual({ ok: true, fileName: 'bundle.yaml', yaml: MULTI_DOC })
+  })
+
+  it('accepts .yml as readily as .yaml', async () => {
+    const result = await readYamlFile([yamlFile('bundle.yml', MULTI_DOC)])
+
+    expect(result.ok).toBe(true)
+  })
+
+  // Browsers disagree on the MIME type for YAML — macOS Chrome commonly reports
+  // "", Windows reports assorted octet-stream variants — so the extension is the
+  // only signal that means the same thing everywhere.
+  it('accepts a YAML extension even when the browser reports no usable MIME type', async () => {
+    const result = await readYamlFile([
+      yamlFile('bundle.yaml', MULTI_DOC, 'application/octet-stream'),
+    ])
+
+    expect(result.ok).toBe(true)
+  })
+
+  it('rejects a non-YAML extension even when the browser claims it is YAML', async () => {
+    const result = await readYamlFile([yamlFile('notes.txt', MULTI_DOC, 'text/yaml')])
+
+    expect(result).toMatchObject({ ok: false, reason: 'extension' })
+  })
+
+  it('rejects a file that holds only whitespace', async () => {
+    const result = await readYamlFile([yamlFile('empty.yaml', '  \n\n  ')])
+
+    expect(result).toMatchObject({ ok: false, reason: 'empty' })
+  })
+
+  it('rejects a file larger than the cap without reading it', async () => {
+    const oversize = yamlFile('huge.yaml', 'x'.repeat(MAX_YAML_FILE_BYTES + 1))
+
+    expect(await readYamlFile([oversize])).toMatchObject({ ok: false, reason: 'too-large' })
+  })
+
+  it('rejects a drop carrying more than one file', async () => {
+    const result = await readYamlFile([
+      yamlFile('one.yaml', MULTI_DOC),
+      yamlFile('two.yaml', MULTI_DOC),
+    ])
+
+    expect(result).toMatchObject({ ok: false, reason: 'multiple-files' })
+  })
+
+  it('rejects an empty selection', async () => {
+    expect(await readYamlFile([])).toMatchObject({ ok: false, reason: 'no-file' })
+  })
+
+  it('reports a file the browser cannot read rather than throwing', async () => {
+    const unreadable = {
+      name: 'gone.yaml',
+      size: 128,
+      text: () => Promise.reject(new Error('NotReadableError')),
+    } as unknown as File
+
+    expect(await readYamlFile([unreadable])).toMatchObject({ ok: false, reason: 'unreadable' })
+  })
+
+  it('explains the cap in the message it hands the error banner', async () => {
+    const result = await readYamlFile([yamlFile('huge.yaml', 'x'.repeat(MAX_YAML_FILE_BYTES + 1))])
+
+    expect(result.ok).toBe(false)
+    if (!result.ok) expect(result.message).toContain('6 MiB')
+  })
+})
+
+// A drag exposes only `kind` and `type`; the file name is withheld until drop,
+// and YAML has no MIME type worth trusting. So the overlay promises "a file is
+// coming", never "an acceptable YAML file is coming".
+describe('describeFileDrag', () => {
+  it('ignores a drag with nothing attached', () => {
+    expect(describeFileDrag(null)).toBe('none')
+  })
+
+  it('leaves a text drag alone so the editor keeps its own drop behaviour', () => {
+    expect(describeFileDrag(drag([{ kind: 'string', type: 'text/plain' }]))).toBe('none')
+  })
+
+  it('reports a single file even when the browser withholds its type', () => {
+    expect(describeFileDrag(drag([{ kind: 'file', type: '' }]))).toBe('file')
+  })
+
+  it('counts only files when a drag carries companion text items', () => {
+    const dragged = drag([
+      { kind: 'file', type: '' },
+      { kind: 'string', type: 'text/uri-list' },
+    ])
+
+    expect(describeFileDrag(dragged)).toBe('file')
+  })
+
+  it('distinguishes a multi-file drag, which is the one rejection knowable up front', () => {
+    const dragged = drag([
+      { kind: 'file', type: '' },
+      { kind: 'file', type: '' },
+    ])
+
+    expect(describeFileDrag(dragged)).toBe('multiple-files')
+  })
+})
+
+// The create dialog opens prefilled — ResourcesView with a kind skeleton,
+// WorkloadView with a duplicate — so a non-empty editor is the normal state,
+// not a sign the user has work worth protecting.
+describe('needsReplaceConfirmation', () => {
+  const SKELETON = 'apiVersion: v1\nkind: ConfigMap\n'
+
+  it('loads straight over an untouched skeleton', () => {
+    expect(needsReplaceConfirmation(SKELETON, SKELETON)).toBe(false)
+  })
+
+  it('loads straight into an empty editor', () => {
+    expect(needsReplaceConfirmation('', '')).toBe(false)
+  })
+
+  it('asks before discarding edits the user actually made', () => {
+    expect(needsReplaceConfirmation(`${SKELETON}  name: checkout\n`, SKELETON)).toBe(true)
+  })
+
+  it('asks before discarding a manifest pasted into an editor that opened empty', () => {
+    expect(needsReplaceConfirmation(SKELETON, '')).toBe(true)
+  })
+
+  it('treats a whitespace-only difference as nothing worth protecting', () => {
+    expect(needsReplaceConfirmation(`${SKELETON}\n  \n`, SKELETON)).toBe(false)
+  })
+})
+
+describe('describeFileDrag across browsers', () => {
+  it('sees a file drag in Safari, where items stay empty until the drop', () => {
+    expect(describeFileDrag(safariDrag(['Files']))).toBe('file')
+  })
+
+  it('still ignores a Safari text drag, which advertises no Files type', () => {
+    expect(describeFileDrag(safariDrag(['text/plain']))).toBe('none')
+  })
+
+  it('counts files when the browser does expose them alongside the Files type', () => {
+    const dragged = drag(
+      [
+        { kind: 'file', type: '' },
+        { kind: 'file', type: '' },
+      ],
+      ['Files'],
+    )
+
+    expect(describeFileDrag(dragged)).toBe('multiple-files')
+  })
+})

package/src/utils/yaml-file-import.ts

@@ -0,0 +1,95 @@
+// The same limit /resources/apply enforces, so the number in this message is the
+// number the server uses. Loading the file blocks the main thread while the
+// editor parses the buffer — around 90ms at 128 KiB, 460ms at 1 MiB, 2.4s at
+// 5.5 MiB — which the import covers with a loading state rather than by capping
+// below what the server would accept.
+export const MAX_YAML_FILE_BYTES = 6 * 1024 * 1024
+
+const YAML_EXTENSIONS = ['.yaml', '.yml'] as const
+
+export const YAML_FILE_ACCEPT = '.yaml,.yml'
+
+export type YamlFileRejectionReason =
+  | 'no-file'
+  | 'multiple-files'
+  | 'extension'
+  | 'too-large'
+  | 'empty'
+  | 'unreadable'
+
+export type YamlFileResult =
+  | { ok: true; fileName: string; yaml: string }
+  | { ok: false; reason: YamlFileRejectionReason; message: string }
+
+function reject(reason: YamlFileRejectionReason, message: string): YamlFileResult {
+  return { ok: false, reason, message }
+}
+
+function hasYamlExtension(name: string): boolean {
+  const lower = name.toLowerCase()
+  return YAML_EXTENSIONS.some((extension) => lower.endsWith(extension))
+}
+
+export async function readYamlFile(
+  files: ArrayLike<File> | null | undefined,
+): Promise<YamlFileResult> {
+  if (!files || files.length === 0) {
+    return reject('no-file', 'No file selected.')
+  }
+  if (files.length > 1) {
+    return reject('multiple-files', 'Select a single YAML file — one file at a time.')
+  }
+
+  const file = files[0]
+  if (!hasYamlExtension(file.name)) {
+    return reject('extension', `${file.name} is not a YAML file. Choose a .yaml or .yml file.`)
+  }
+  if (file.size > MAX_YAML_FILE_BYTES) {
+    const limit = Math.round(MAX_YAML_FILE_BYTES / (1024 * 1024))
+    return reject('too-large', `${file.name} is larger than the ${limit} MiB limit.`)
+  }
+
+  let content: string
+  try {
+    content = await file.text()
+  } catch {
+    return reject('unreadable', `${file.name} could not be read. Check the file and try again.`)
+  }
+
+  if (!content.trim()) {
+    return reject('empty', `${file.name} is empty.`)
+  }
+
+  return { ok: true, fileName: file.name, yaml: content }
+}
+
+export type FileDragState = 'none' | 'file' | 'multiple-files'
+
+export function describeFileDrag(transfer: DataTransfer | null | undefined): FileDragState {
+  if (!transfer) return 'none'
+
+  // Safari keeps the dragged items protected until the drop, so `items` is
+  // empty for the whole drag. Every browser advertises "Files" in `types`
+  // though, which makes that the signal for whether files are coming; `items`
+  // only adds the count, where the browser is willing to give one.
+  const carriesFiles = transfer.types ? Array.from(transfer.types).includes('Files') : false
+
+  let files = 0
+  const items = transfer.items
+  if (items) {
+    for (let index = 0; index < items.length; index++) {
+      if (items[index].kind === 'file') files++
+    }
+  }
+
+  if (!carriesFiles && files === 0) return 'none'
+  return files > 1 ? 'multiple-files' : 'file'
+}
+
+// The dialog opens prefilled in both of its entry points, so "the editor holds
+// YAML" does not mean the user has work to lose. Only a divergence from what
+// the dialog put there does.
+export function needsReplaceConfirmation(current: string, initial: string): boolean {
+  const edited = current.trim()
+  return edited !== '' && edited !== initial.trim()
+}

package/src/components/logs/JsonLogLine.tsx

@@ -1,93 +0,0 @@
-import { useState, useMemo } from 'react'
-import { ChevronRight, ChevronDown } from 'lucide-react'
-import type { LogLevel } from './useLogBuffer'
-import { getLogPalette, getLogLevelColor } from './log-palette'
-
-interface JsonLogLineProps {
-  content: string
-  level: LogLevel
-  wordWrap: boolean
-  /** Dark/light palette selector. Defaults to `true` for the dark-by-default viewer. */
-  isDark?: boolean
-}
-
-export function JsonLogLine({ content, level, wordWrap, isDark = true }: JsonLogLineProps) {
-  const [expanded, setExpanded] = useState(false)
-  const palette = useMemo(() => getLogPalette(isDark), [isDark])
-  const levelColor = getLogLevelColor(level, isDark)
-
-  const parsed = useMemo(() => {
-    try {
-      return JSON.parse(content.trim())
-    } catch {
-      return null
-    }
-  }, [content])
-
-  if (!parsed) {
-    return (
-      <span className={`${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'} ${levelColor}`}>
-        {content}
-      </span>
-    )
-  }
-
-  const summary = buildSummary(parsed)
-  const fieldCount = Object.keys(parsed).length
-
-  return (
-    <span className={levelColor}>
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className={`inline-flex items-center gap-0.5 ${palette.hoverSurface} rounded px-0.5 -ml-0.5 align-middle`}
-      >
-        {expanded
-          ? <ChevronDown className={`w-3 h-3 shrink-0 ${palette.textTertiary}`} />
-          : <ChevronRight className={`w-3 h-3 shrink-0 ${palette.textTertiary}`} />
-        }
-      </button>
-      {!expanded ? (
-        <span className={wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}>
-          {summary}
-          <span className={`${palette.textTertiary} ml-1`}>{`{${fieldCount} fields}`}</span>
-        </span>
-      ) : (
-        <span className={`block ml-4 ${wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre'}`}>
-          {formatJsonExpanded(parsed)}
-        </span>
-      )}
-    </span>
-  )
-}
-
-function buildSummary(obj: Record<string, unknown>): string {
-  const parts: string[] = []
-
-  // Level
-  const lvl = obj.level || obj.severity || obj.lvl
-  if (typeof lvl === 'string') {
-    parts.push(lvl.toUpperCase())
-  }
-
-  // Message
-  const msg = obj.msg || obj.message
-  if (typeof msg === 'string') {
-    parts.push(msg)
-  }
-
-  // Error
-  const err = obj.error || obj.err
-  if (typeof err === 'string') {
-    parts.push(`error=${err}`)
-  }
-
-  return parts.join('  ')
-}
-
-function formatJsonExpanded(obj: Record<string, unknown>): string {
-  try {
-    return JSON.stringify(obj, null, 2)
-  } catch {
-    return String(obj)
-  }
-}