@skyhook-io/k8s-ui 1.14.5 → 1.14.7

package/src/components/shared/CreateResourceDialog.tsx

@@ -1,5 +1,7 @@
-import { useCallback, useEffect, useState } from 'react'
-import { AlertTriangle, Check, ChevronDown, ChevronRight, Loader2, X } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState, type DragEvent as ReactDragEvent } from 'react'
+import { AlertTriangle, Check, Loader2, Upload, X } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
+import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { DialogPortal } from '../ui/DialogPortal'
 import { YamlEditor, type YamlSchemaLoader } from '../ui/YamlEditor'
 import {
@@ -9,6 +11,17 @@ import {
 } from '../ui/YamlReview'
 import { Tooltip } from '../ui/Tooltip'
 import { formatApplyError } from '../../utils/k8s-errors'
+import {
+  describeFileDrag,
+  needsReplaceConfirmation,
+  readYamlFile,
+  YAML_FILE_ACCEPT,
+  type FileDragState,
+} from '../../utils/yaml-file-import'
+
+// A frame this close to the last one means the main thread is keeping up; a
+// blocked editor produces gaps far larger.
+const responsiveFrameMs = 100
 
 export interface ApplyResult {
   name: string
@@ -71,6 +84,41 @@ export function CreateResourceDialog({
     nonAtomic: boolean
     context?: string
   } | null>(null)
+  const [drag, setDrag] = useState<FileDragState>('none')
+  const [pendingImport, setPendingImport] = useState<{ fileName: string; yaml: string } | null>(null)
+  const [importing, setImporting] = useState<string | null>(null)
+  // An import is several awaits and several frames long. Anything that changes
+  // what the result should land on — a newer import, a close, a reopen — bumps
+  // the generation, and every deferred step checks it before touching state.
+  const importGeneration = useRef(0)
+  const scheduledFrames = useRef(new Set<number>())
+  // The buffer as it stands now, not as it stood when a read began.
+  const yamlRef = useRef(yaml)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  // dragenter/dragleave also fire for the editor's own descendants, so the
+  // overlay tracks depth rather than the first dragleave it sees.
+  const dragDepth = useRef(0)
+
+  useEffect(() => {
+    yamlRef.current = yaml
+  }, [yaml])
+
+  const retireDeferredImports = useCallback(() => {
+    importGeneration.current += 1
+    for (const id of scheduledFrames.current) cancelAnimationFrame(id)
+    scheduledFrames.current.clear()
+  }, [])
+
+  useEffect(() => retireDeferredImports, [retireDeferredImports])
+
+  const scheduleFrame = useCallback((generation: number, run: () => void) => {
+    const id = requestAnimationFrame(() => {
+      scheduledFrames.current.delete(id)
+      if (generation !== importGeneration.current) return
+      run()
+    })
+    scheduledFrames.current.add(id)
+  }, [])
 
   useEffect(() => {
     if (!open) return
@@ -82,16 +130,24 @@ export function CreateResourceDialog({
     setError(null)
     setSuccess(null)
     setPreview(null)
-  }, [open, initialYaml])
+    setDrag('none')
+    setPendingImport(null)
+    setImporting(null)
+    dragDepth.current = 0
+    retireDeferredImports()
+  }, [open, initialYaml, retireDeferredImports])
 
   const pending = isApplying || isPreviewing
   const closeNow = useCallback(() => {
+    retireDeferredImports()
     setError(null)
     setSuccess(null)
     setPreview(null)
+    setPendingImport(null)
+    setImporting(null)
     setYaml('')
     onClose()
-  }, [onClose])
+  }, [onClose, retireDeferredImports])
   const handleClose = useCallback(() => {
     if (!pending) closeNow()
   }, [closeNow, pending])
@@ -123,6 +179,100 @@ export function CreateResourceDialog({
     [closeNow, onCreated],
   )
 
+  // Handing a document to the editor parses the whole buffer and blocks the
+  // main thread, so the status has to be on screen before that starts. Two
+  // frames: the first commits it, the second lets the browser paint it. A
+  // spinner would only freeze mid-turn, so this says what is happening instead
+  // of pretending to animate.
+  const loadIntoEditor = useCallback(
+    (fileName: string, content: string, generation: number) => {
+      setImporting(fileName)
+      scheduleFrame(generation, () => {
+        scheduleFrame(generation, () => {
+          setYaml(content)
+          // Clearing it in this same callback would batch it into the very
+          // render that blocks, retiring the status while the editor is still
+          // unusable. Wait for a frame to arrive on time instead: that is the
+          // editor answering again, which is what the status was promising.
+          let previous = performance.now()
+          const clearWhenResponsive = () => {
+            const now = performance.now()
+            if (now - previous < responsiveFrameMs) {
+              setImporting(null)
+              return
+            }
+            previous = now
+            scheduleFrame(generation, clearWhenResponsive)
+          }
+          scheduleFrame(generation, clearWhenResponsive)
+        })
+      })
+    },
+    [scheduleFrame],
+  )
+
+  const loadFiles = useCallback(
+    async (files: File[]) => {
+      const generation = ++importGeneration.current
+      const result = await readYamlFile(files)
+      // A newer import, a close or a reopen happened while this one was
+      // reading; its result describes an editor that has moved on.
+      if (generation !== importGeneration.current) return
+      // This import owns the status from here. Taking the generation retired
+      // the frames that would have cleared a previous import's overlay, so
+      // every path out of this function has to leave it in a sane state — the
+      // ones that return early below would otherwise strand it on screen.
+      setImporting(null)
+      if (!result.ok) {
+        setSuccess(null)
+        setError(result.message)
+        return
+      }
+      setError(null)
+      setSuccess(null)
+      if (needsReplaceConfirmation(yamlRef.current, initialYaml)) {
+        setPendingImport({ fileName: result.fileName, yaml: result.yaml })
+        return
+      }
+      loadIntoEditor(result.fileName, result.yaml, generation)
+    },
+    [initialYaml, loadIntoEditor],
+  )
+
+  const handleDragEnter = useCallback((event: ReactDragEvent) => {
+    const state = describeFileDrag(event.dataTransfer)
+    if (state === 'none') return
+    event.preventDefault()
+    dragDepth.current += 1
+    setDrag(state)
+  }, [])
+
+  const handleDragOver = useCallback((event: ReactDragEvent) => {
+    if (describeFileDrag(event.dataTransfer) === 'none') return
+    // Without this the browser navigates away to the dropped file.
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'copy'
+  }, [])
+
+  const handleDragLeave = useCallback((event: ReactDragEvent) => {
+    if (describeFileDrag(event.dataTransfer) === 'none') return
+    dragDepth.current = Math.max(0, dragDepth.current - 1)
+    if (dragDepth.current === 0) setDrag('none')
+  }, [])
+
+  const handleDrop = useCallback(
+    (event: ReactDragEvent) => {
+      if (describeFileDrag(event.dataTransfer) === 'none') return
+      event.preventDefault()
+      dragDepth.current = 0
+      setDrag('none')
+      // The DataTransfer is neutered once this handler returns, so take the
+      // files off it before anything awaits.
+      void loadFiles(Array.from(event.dataTransfer.files))
+    },
+    [loadFiles],
+  )
+
   const handleSubmit = useCallback(async () => {
     if (!yaml.trim()) {
       setError('YAML content is required')
@@ -256,13 +406,64 @@ export function CreateResourceDialog({
           </div>
 
           <div className="min-h-0 flex-1 px-5 py-3">
-            <YamlEditor
-              value={yaml}
-              onChange={setYaml}
-              height="400px"
-              onValidate={handleValidate}
-              schemaLoader={schemaLoader}
-            />
+            <div className="mb-2 flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+                className="flex items-center gap-1.5 rounded-md border border-theme-border px-2.5 py-1 text-xs font-medium text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary"
+              >
+                <Upload className="h-3.5 w-3.5" />
+                Import YAML file
+              </button>
+              <span className="text-xs text-theme-text-tertiary">
+                or drop a YAML file into the editor
+              </span>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept={YAML_FILE_ACCEPT}
+                className="hidden"
+                onChange={(event) => {
+                  const picked = Array.from(event.target.files ?? [])
+                  // Clearing the input empties its FileList, so read it first.
+                  event.target.value = ''
+                  void loadFiles(picked)
+                }}
+              />
+            </div>
+
+            <div
+              className="relative h-[400px]"
+              onDragEnter={handleDragEnter}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
+            >
+              <YamlEditor
+                value={yaml}
+                onChange={setYaml}
+                height="400px"
+                onValidate={handleValidate}
+                schemaLoader={schemaLoader}
+              />
+              {importing && (
+                <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md border border-theme-border bg-theme-base/85">
+                  <span className="text-sm font-medium text-theme-text-primary">
+                    Loading {importing}…
+                  </span>
+                </div>
+              )}
+              {drag !== 'none' && (
+                <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md border-2 border-dashed border-accent bg-theme-base/85">
+                  <span className="flex items-center gap-2 text-sm font-medium text-theme-text-primary">
+                    <Upload className="h-4 w-4" />
+                    {drag === 'multiple-files'
+                      ? 'Drop a single YAML file'
+                      : 'Drop YAML file to load'}
+                  </span>
+                </div>
+              )}
+            </div>
           </div>
 
           {(error || previewError) && (
@@ -362,12 +563,33 @@ export function CreateResourceDialog({
           </div>
         </>
       )}
+
+      <ConfirmDialog
+        open={pendingImport !== null}
+        onClose={() => setPendingImport(null)}
+        onConfirm={() => {
+          // Confirming is its own decision about the editor as it stands now,
+          // so it loads under a fresh generation rather than the one the read
+          // started under, which anything since may have retired.
+          if (pendingImport) {
+            const generation = ++importGeneration.current
+            loadIntoEditor(pendingImport.fileName, pendingImport.yaml, generation)
+          }
+          setPendingImport(null)
+        }}
+        variant="warning"
+        showWarning={false}
+        title="Replace editor contents?"
+        message={`Loading ${pendingImport?.fileName ?? 'this file'} discards the YAML currently in the editor.`}
+        confirmLabel="Replace"
+      />
     </DialogPortal>
   )
 }
 
 function ApplyErrorBanner({ error }: { error: string }) {
   const [expanded, setExpanded] = useState(false)
+  const { panelId, buttonProps } = useDisclosure(expanded)
   const parsed = formatApplyError(error)
   const hasFriendly = Boolean(parsed.suggestion)
   return (
@@ -383,19 +605,20 @@ function ApplyErrorBanner({ error }: { error: string }) {
       </div>
       {hasFriendly && (
         <button
+          {...buttonProps}
           type="button"
           onClick={() => setExpanded((value) => !value)}
           className="flex items-center gap-1 px-3 pb-2 text-red-500/60 hover:text-red-500/80 dark:text-red-400/60 dark:hover:text-red-400/80"
         >
-          {expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+          <CollapseChevron open={expanded} inheritColor className="h-3 w-3" />
           Details
         </button>
       )}
-      {expanded && hasFriendly && (
+      <Collapse open={expanded && hasFriendly} id={panelId}>
         <div className="break-all px-3 pb-2 font-mono leading-relaxed text-red-500/60 dark:text-red-400/60">
           {parsed.raw}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }

package/src/components/shared/DrainPlanDialog.test.tsx

@@ -0,0 +1,154 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import {
+  DrainPlanContent,
+  canConfirmDrain,
+  emptyDirPodsAtRisk,
+  planMatches,
+  type DrainPlan,
+  type DrainPlanPod,
+} from './DrainPlanDialog'
+
+function pod(name: string, outcome: DrainPlanPod['outcome'], extra: Partial<DrainPlanPod> = {}): DrainPlanPod {
+  return { namespace: 'shop', name, outcome, reason: `${name} reason`, emptyDir: false, pdbChecked: true, ...extra }
+}
+
+function plan(pods: DrainPlanPod[], options: Partial<DrainPlan['options']> = {}): DrainPlan {
+  return {
+    node: 'worker-1',
+    generatedAt: '2026-09-10T10:00:00Z',
+    estimate: true,
+    options: { ignoreDaemonSets: true, deleteEmptyDirData: false, force: false, ...options },
+    summary: {
+      evict: pods.filter((p) => p.outcome === 'evict').length,
+      skip: pods.filter((p) => p.outcome === 'skip').length,
+      mayBlock: pods.filter((p) => p.outcome === 'may-block').length,
+    },
+    pods,
+    pdbsEvaluated: true,
+  }
+}
+
+const off = { force: false, deleteEmptyDirData: false }
+const emptyDirOn = { force: false, deleteEmptyDirData: true }
+
+describe('planMatches', () => {
+  it('rejects a plan computed for another node or other options', () => {
+    const p = plan([])
+    expect(planMatches(p, 'worker-1', off)).toBe(true)
+    expect(planMatches(p, 'worker-2', off)).toBe(false)
+    expect(planMatches(p, 'worker-1', emptyDirOn)).toBe(false)
+    expect(planMatches(null, 'worker-1', off)).toBe(false)
+  })
+})
+
+describe('canConfirmDrain', () => {
+  it('never enables the drain before a current plan exists', () => {
+    expect(canConfirmDrain({ plan: null, nodeName: 'worker-1', options: off, loading: false, planSupported: true })).toBe(false)
+    expect(canConfirmDrain({ plan: plan([]), nodeName: 'worker-1', options: off, loading: true, planSupported: true })).toBe(false)
+    expect(canConfirmDrain({ plan: plan([]), nodeName: 'other', options: off, loading: false, planSupported: true })).toBe(false)
+  })
+
+  it('keeps the drain disabled after a plan request error, even if an older plan is still around', () => {
+    const p = plan([pod('web', 'evict')])
+    expect(canConfirmDrain({ plan: p, nodeName: 'worker-1', options: off, loading: false, error: 'boom', planSupported: true })).toBe(false)
+    expect(canConfirmDrain({ plan: null, nodeName: 'worker-1', options: off, loading: false, error: 'boom', planSupported: false })).toBe(true)
+  })
+
+  it('enables the drain once a matching plan is shown', () => {
+    expect(canConfirmDrain({ plan: plan([pod('web', 'evict')]), nodeName: 'worker-1', options: off, loading: false, planSupported: true })).toBe(true)
+  })
+
+  it('does not gate the drain a second time when emptyDir pods would be evicted', () => {
+    const p = plan([pod('cache', 'evict', { emptyDir: true })], { deleteEmptyDirData: true })
+    expect(emptyDirPodsAtRisk(p).map((x) => x.name)).toEqual(['cache'])
+    expect(canConfirmDrain({ plan: p, nodeName: 'worker-1', options: emptyDirOn, loading: false, planSupported: true })).toBe(true)
+  })
+
+  it('confirms without a plan when the host cannot compute one', () => {
+    expect(canConfirmDrain({ plan: null, nodeName: 'worker-1', options: off, loading: false, planSupported: false })).toBe(true)
+    expect(canConfirmDrain({ plan: null, nodeName: 'worker-1', options: emptyDirOn, loading: false, planSupported: false })).toBe(true)
+  })
+})
+
+describe('DrainPlanContent', () => {
+  const noop = () => {}
+
+  function render(props: Partial<Parameters<typeof DrainPlanContent>[0]>) {
+    return renderToString(
+      <DrainPlanContent
+        nodeName="worker-1"
+        plan={null}
+        loading={false}
+        options={off}
+        onOptionsChange={noop}
+        planSupported
+        {...props}
+      />,
+    )
+  }
+
+  it('shows per-pod outcomes with reasons and calls the result an estimate', () => {
+    const html = render({ plan: plan([pod('web', 'may-block', { pdb: 'shop/web', reason: 'PodDisruptionBudget shop/web currently allows no disruptions' }), pod('agent', 'skip')]) })
+    expect(html).toContain('may block')
+    expect(html).toContain('shop/web')
+    expect(html).toContain('currently allows no disruptions')
+    expect(html).toContain('agent reason')
+    expect(html).toContain('Estimated at')
+    expect(html).toContain('About this estimate')
+  })
+
+  it('offers a refresh only when the host can recompute the plan', () => {
+    const p = plan([pod('web', 'evict')])
+    expect(render({ plan: p, onRefreshPlan: noop })).toContain('Recompute the plan')
+    expect(render({ plan: p })).not.toContain('Recompute the plan')
+  })
+
+  it('exposes the estimate caveat on a focusable trigger', () => {
+    const html = render({ plan: plan([pod('web', 'evict')]) })
+    expect(html).toMatch(/<button[^>]*aria-label="About this estimate"/)
+  })
+
+  it('offers a retry on a failed plan only when the host can recompute it', () => {
+    expect(render({ error: 'boom', onRefreshPlan: noop })).toContain('Try again')
+    expect(render({ error: 'boom' })).not.toContain('Try again')
+  })
+
+  it('shows a loading state instead of a stale plan', () => {
+    const html = render({ loading: true, plan: plan([pod('web', 'evict')]) })
+    expect(html).toContain('Computing the plan')
+    expect(html).not.toContain('web reason')
+  })
+
+  it('ignores a plan computed for another node', () => {
+    const html = render({ plan: { ...plan([pod('web', 'evict')]), node: 'worker-2' } })
+    expect(html).not.toContain('web reason')
+  })
+
+  it('names the pods whose emptyDir data would go, and asks for no second tick', () => {
+    const p = plan([pod('cache', 'evict', { emptyDir: true }), pod('web', 'evict')], { deleteEmptyDirData: true })
+    const html = render({ plan: p, options: emptyDirOn })
+    expect(html).toContain('emptyDir data will be discarded')
+    expect(html).toContain('shop/cache')
+    expect(html).not.toMatch(/<input[^>]*type="checkbox"[^>]*class="mt-0\.5/)
+  })
+
+  it('says nothing about discarding emptyDir data while the option is off', () => {
+    const html = render({ plan: plan([pod('cache', 'skip', { emptyDir: true })]) })
+    expect(html).not.toContain('emptyDir data will be discarded')
+  })
+
+  it('warns when PodDisruptionBudgets could not be evaluated and does not print a zero for them', () => {
+    const p = { ...plan([pod('web', 'evict')]), pdbsEvaluated: false, pdbError: 'list poddisruptionbudgets: forbidden' }
+    const html = render({ plan: p })
+    expect(html).toContain('PodDisruptionBudgets were not evaluated')
+    expect(html).toContain('forbidden')
+    expect(html).toContain('PodDisruptionBudgets not evaluated')
+    expect(html).not.toContain('0 may block')
+  })
+
+  it('warns honestly when the estimate shows no emptyDir pod', () => {
+    const html = render({ plan: plan([pod('web', 'evict')], { deleteEmptyDirData: true }), options: emptyDirOn })
+    expect(html).toContain('No pod that would be evicted uses emptyDir right now')
+  })
+})