@skyhook-io/k8s-ui 1.7.5 → 1.7.7

package/src/components/ui/FetchResult.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import { ShieldOff, AlertTriangle, ServerCrash, LogIn, Copy, Check, type LucideIcon } from 'lucide-react'
+import { clsx } from 'clsx'
+import { PaneLoader } from './PaneLoader'
+import { isFetchError } from '../../types/fetch-error'
+
+// FetchResult collapses (loading, error, no-data) into one rendered outcome:
+// loader while loading, a typed error surface when the fetch threw, or the
+// notFoundMessage when neither — matching the prior plain-text "Resource not
+// found" so a disabled React Query (loading=false, data=undefined, error=null
+// under v5) still renders a sane fallback rather than going blank.
+//
+// Decision tree:
+//   loading                  → <PaneLoader/>
+//   error (403)              → "Access denied"            + error.message
+//   error (404)              → notFoundMessage            + error.message
+//   error (503)              → "Cluster unavailable"      + error.message
+//   error (401)              → "Sign-in required"         (apiFetch redirects; fallback)
+//   error (other / no shape) → "Couldn't load this view"  + error.message
+//   no loading, no error     → notFoundMessage            (headline only, no detail)
+//
+// Separate from EmptyState (which conveys "no data here" with
+// healthy/filtered/neutral tones) because HTTP-level fetch failures need
+// distinct visual and informational semantics — error vs absence.
+//
+// The error contract is duck-typed via FetchErrorShape so this stays in
+// @skyhook-io/k8s-ui without importing ApiError from either web/ (OSS)
+// or radar-hub-web.
+
+interface FetchResultProps {
+  loading: boolean
+  error?: unknown
+  /** Body line for 404 (resource fetched, server says missing). Default "Resource not found". */
+  notFoundMessage?: string
+  /** Pin to parent height. Existing call sites use "h-32" or "h-full". */
+  className?: string
+}
+
+export function FetchResult({
+  loading,
+  error,
+  notFoundMessage = 'Resource not found',
+  className = 'h-32',
+}: FetchResultProps) {
+  if (loading) {
+    return <PaneLoader className={className} />
+  }
+  if (error === undefined || error === null) {
+    // No loading + no error = the query is disabled or returned no data.
+    // Render the headline-only "not found" state so callers gated on `!data`
+    // don't end up with a blank body when React Query v5 leaves isLoading=false.
+    return (
+      <div className={clsx('flex items-center justify-center text-theme-text-tertiary', className)}>
+        {notFoundMessage}
+      </div>
+    )
+  }
+  return <ErrorSurface error={error} notFoundMessage={notFoundMessage} className={className} />
+}
+
+interface ErrorSurfaceProps {
+  error: unknown
+  notFoundMessage: string
+  className: string
+}
+
+function ErrorSurface({ error, notFoundMessage, className }: ErrorSurfaceProps) {
+  const classified = classify(error, notFoundMessage)
+  const Icon = classified.icon
+
+  return (
+    <div
+      role="status"
+      className={clsx('flex flex-col items-center justify-center gap-2 px-6 text-center', className)}
+    >
+      <Icon className="h-5 w-5 text-theme-text-tertiary" aria-hidden />
+      <div className="text-sm font-medium text-theme-text-secondary">{classified.headline}</div>
+      {classified.detail && (
+        <div className="flex items-center gap-2 max-w-md">
+          <span className="text-xs text-theme-text-tertiary break-words">{classified.detail}</span>
+          <CopyErrorButton text={classified.detail} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface Classified {
+  headline: string
+  detail: string | null
+  icon: LucideIcon
+}
+
+function classify(error: unknown, notFoundMessage: string): Classified {
+  if (isFetchError(error)) {
+    switch (error.status) {
+      case 403:
+        return { headline: 'Access denied', detail: error.message, icon: ShieldOff }
+      case 404:
+        return { headline: notFoundMessage, detail: error.message, icon: AlertTriangle }
+      case 401:
+        return { headline: 'Sign-in required', detail: error.message, icon: LogIn }
+      case 503:
+        return { headline: 'Cluster unavailable', detail: error.message, icon: ServerCrash }
+      default:
+        return { headline: "Couldn't load this view", detail: error.message, icon: AlertTriangle }
+    }
+  }
+  // Network failures (no .status), DOMException for AbortError, anything thrown without our shape.
+  return { headline: "Couldn't load this view", detail: errorMessageOf(error), icon: AlertTriangle }
+}
+
+function errorMessageOf(error: unknown): string | null {
+  if (error instanceof Error && error.message) return error.message
+  if (typeof error === 'string') return error
+  return null
+}
+
+function CopyErrorButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false)
+  const onCopy = () => {
+    navigator.clipboard.writeText(text).then(
+      () => {
+        setCopied(true)
+        window.setTimeout(() => setCopied(false), 1500)
+      },
+      () => { /* best-effort */ },
+    )
+  }
+  return (
+    <button
+      type="button"
+      onClick={onCopy}
+      className="flex-shrink-0 p-1 rounded text-theme-text-tertiary hover:text-theme-text-secondary hover:bg-theme-hover"
+      title={copied ? 'Copied' : 'Copy error'}
+      aria-label={copied ? 'Copied' : 'Copy error'}
+    >
+      {copied ? <Check className="h-3 w-3" aria-hidden /> : <Copy className="h-3 w-3" aria-hidden />}
+    </button>
+  )
+}

package/src/components/ui/RowActionMenu.tsx

@@ -0,0 +1,149 @@
+import { Fragment, useEffect, useLayoutEffect, useRef, useState, type ComponentType } from 'react'
+import { Loader2, MoreVertical } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Tooltip } from './Tooltip'
+
+export interface RowActionItem {
+  key: string
+  label: string
+  icon: ComponentType<{ className?: string }>
+  onClick: () => void
+  disabled?: boolean
+  disabledReason?: string
+  pending?: boolean
+  danger?: boolean
+  /** Render a horizontal divider above this item. */
+  divider?: boolean
+}
+
+interface RowActionMenuProps {
+  items: RowActionItem[]
+  ariaLabel?: string
+  /** Compact button variant (default: true) — sized for table-row anchoring. */
+  compact?: boolean
+}
+
+export function RowActionMenu({ items, ariaLabel = 'Row actions', compact = true }: RowActionMenuProps) {
+  const [open, setOpen] = useState(false)
+  // Flip the menu above the trigger when it would otherwise spill past the
+  // viewport bottom. The GitOps table's bottom rows sit at the end of a scroll
+  // container with the app's fixed overlay buttons below them, so a
+  // downward-opening menu there clips its lowest items with no way to scroll
+  // them into view. Measured after open (useLayoutEffect, pre-paint, no flicker).
+  const [openUp, setOpenUp] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setOpenUp(false)
+      return
+    }
+    const trigger = ref.current?.getBoundingClientRect()
+    const menuH = menuRef.current?.offsetHeight ?? 0
+    if (!trigger) return
+    const spaceBelow = window.innerHeight - trigger.bottom
+    // Flip up only when there's not enough room below AND enough room above,
+    // so a tall menu near the top doesn't get clipped at the other end.
+    setOpenUp(menuH + 8 > spaceBelow && trigger.top > menuH + 8)
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  const triggerSize = compact ? 'p-1' : 'p-1.5'
+  const iconSize = compact ? 'h-4 w-4' : 'h-5 w-5'
+
+  return (
+    <div ref={ref} className="relative inline-block">
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={(e) => {
+          e.stopPropagation()
+          setOpen((v) => !v)
+        }}
+        className={clsx(
+          'rounded text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary',
+          triggerSize,
+        )}
+      >
+        <MoreVertical className={iconSize} />
+      </button>
+      {open && (
+        <div
+          ref={menuRef}
+          role="menu"
+          className={clsx(
+            'absolute right-0 z-50 min-w-[180px] rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl',
+            openUp ? 'bottom-full mb-1' : 'top-full mt-1',
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {items.map((item) => {
+            const Icon = item.icon
+            const content = (
+              <button
+                type="button"
+                role="menuitem"
+                disabled={item.disabled || item.pending}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (item.disabled || item.pending) return
+                  item.onClick()
+                  setOpen(false)
+                }}
+                className={clsx(
+                  'flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors',
+                  item.disabled || item.pending
+                    ? 'cursor-not-allowed text-theme-text-tertiary'
+                    : item.danger
+                    ? 'text-red-500 hover:bg-theme-hover hover:text-red-400'
+                    : 'text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary',
+                )}
+              >
+                {item.pending ? (
+                  <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" />
+                ) : (
+                  <Icon className="h-3.5 w-3.5 shrink-0" />
+                )}
+                <span className="truncate">{item.label}</span>
+              </button>
+            )
+            return (
+              <Fragment key={item.key}>
+                {item.divider && <div className="my-1 h-px bg-theme-border" />}
+                {item.disabled && item.disabledReason ? (
+                  // wrapperClassName=w-full so the disabled item fills the menu
+                  // like enabled items — the Tooltip wrapper is inline-flex and
+                  // would otherwise shrink-wrap, and the menu inherits text-right
+                  // from the table's actions cell, shoving the item to the edge.
+                  <Tooltip content={item.disabledReason} position="left" wrapperClassName="w-full">
+                    {content}
+                  </Tooltip>
+                ) : (
+                  content
+                )}
+              </Fragment>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/ui/index.ts

@@ -5,6 +5,7 @@ export { MiddleEllipsis } from './MiddleEllipsis'
 export type { MiddleEllipsisProps } from './MiddleEllipsis'
 export { EmptyState } from './EmptyState'
 export type { EmptyStateTone, EmptyStateVariant } from './EmptyState'
+export { FetchResult } from './FetchResult'
 export { FilterPill } from './FilterPill'
 export type { FilterPillTone } from './FilterPill'
 export { StatusDot, mapHealthToTone } from './status-tone'
@@ -19,3 +20,5 @@ export { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
 export { ToastProvider, useToast, showApiError, showApiSuccess } from './Toast'
 export { CodeViewer } from './CodeViewer'
 export { YamlEditor, YamlDiffEditor } from './YamlEditor'
+export { RowActionMenu } from './RowActionMenu'
+export type { RowActionItem } from './RowActionMenu'

package/src/components/workload/WorkloadView.tsx

@@ -2,7 +2,7 @@ import { useState, useMemo, useEffect, useRef, useCallback, type ReactNode } fro
 import { flushSync } from 'react-dom'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { startViewTransitionSafe } from '../../utils/view-transition'
-import { PaneLoader } from '../ui/PaneLoader'
+import { FetchResult } from '../ui/FetchResult'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { clsx } from 'clsx'
 import {
@@ -80,6 +80,9 @@ interface WorkloadViewProps {
   certificateInfo?: any
   /** Whether the resource is loading */
   isLoading?: boolean
+  /** Fetch error for the resource (preserves status + message so the
+   *  drawer body can distinguish 403/404/503 from "no data"). */
+  resourceError?: unknown
   /** Function to refetch the resource data */
   refetch?: () => void
 
@@ -187,6 +190,7 @@ export function WorkloadView({
   relationships,
   certificateInfo,
   isLoading: resourceLoading = false,
+  resourceError,
   refetch: refetchProp,
   // Timeline
   allEvents,
@@ -480,10 +484,8 @@ export function WorkloadView({
 
         {/* Content — viewTransitionName scopes View Transitions API cross-fade to this element */}
         <div className="flex-1 overflow-y-auto" style={{ viewTransitionName: 'drawer-content' }}>
-          {resourceLoading ? (
-            <PaneLoader className="h-32" />
-          ) : !resource ? (
-            <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Resource not found</div>
+          {!resource ? (
+            <FetchResult loading={resourceLoading} error={resourceError} className="h-32" />
           ) : showYaml ? (
             <EditableYamlView
               resource={selectedResource}
@@ -660,6 +662,7 @@ export function WorkloadView({
               selectedResource={selectedResource}
               relationships={relationships}
               isLoading={resourceLoading}
+              error={resourceError}
               onNavigate={onNavigateToResource}
               onCopy={copyToClipboard}
               copied={copied}
@@ -711,10 +714,8 @@ export function WorkloadView({
         )}
         {activeTab === 'yaml' && (
           <div className="h-full overflow-auto">
-            {resourceLoading ? (
-              <PaneLoader className="h-32" />
-            ) : !resource ? (
-              <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Resource not found</div>
+            {!resource ? (
+              <FetchResult loading={resourceLoading} error={resourceError} className="h-32" />
             ) : (
               <EditableYamlView
                 resource={selectedResource}
@@ -1165,6 +1166,7 @@ function InfoTab({
   selectedResource,
   relationships,
   isLoading,
+  error,
   onNavigate,
   onCopy,
   copied,
@@ -1185,6 +1187,7 @@ function InfoTab({
   selectedResource: SelectedResource
   relationships?: Relationships
   isLoading: boolean
+  error?: unknown
   onNavigate?: NavigateToResource
   onCopy: (text: string, key: string) => void
   copied: string | null
@@ -1201,16 +1204,8 @@ function InfoTab({
   updatesError?: Error | null
   extraContent?: ReactNode
 }) {
-  if (isLoading) {
-    return <PaneLoader className="h-full" />
-  }
-
   if (!resource) {
-    return (
-      <div className="flex items-center justify-center h-full text-theme-text-tertiary">
-        Resource not found
-      </div>
-    )
+    return <FetchResult loading={isLoading} error={error} className="h-full" />
   }
 
   return (

package/src/types/fetch-error.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import { isFetchError, isForbiddenError } from './fetch-error'
+
+function shaped(message: string, status: number) {
+  return Object.assign(new Error(message), { status })
+}
+
+describe('isFetchError', () => {
+  it('accepts an Error decorated with a numeric status', () => {
+    expect(isFetchError(shaped('forbidden', 403))).toBe(true)
+  })
+
+  it('accepts a plain object with status and message', () => {
+    expect(isFetchError({ status: 500, message: 'boom' })).toBe(true)
+  })
+
+  it('rejects a network failure without a status field', () => {
+    expect(isFetchError(new Error('Failed to fetch'))).toBe(false)
+  })
+
+  it('rejects abort/cancel DOMException-style throws (no status)', () => {
+    const aborted = new Error('The user aborted a request.')
+    aborted.name = 'AbortError'
+    expect(isFetchError(aborted)).toBe(false)
+  })
+
+  it('rejects undefined, null, primitives', () => {
+    expect(isFetchError(undefined)).toBe(false)
+    expect(isFetchError(null)).toBe(false)
+    expect(isFetchError('forbidden')).toBe(false)
+    expect(isFetchError(403)).toBe(false)
+  })
+
+  it('rejects an object with a non-numeric status', () => {
+    expect(isFetchError({ status: '403', message: 'forbidden' })).toBe(false)
+  })
+})
+
+describe('isForbiddenError', () => {
+  it('is true only for 403 on a fetch-error shape', () => {
+    expect(isForbiddenError(shaped('nope', 403))).toBe(true)
+    expect(isForbiddenError(shaped('nope', 404))).toBe(false)
+    expect(isForbiddenError(new Error('Failed to fetch'))).toBe(false)
+    expect(isForbiddenError(null)).toBe(false)
+  })
+})

package/src/types/fetch-error.ts

@@ -0,0 +1,20 @@
+// FetchErrorShape is the duck-typed contract every fetch error in the
+// app already satisfies — both web/'s ApiError and radar-hub-web's
+// ApiError expose .status and .message. Living in @skyhook-io/k8s-ui
+// without importing either lets presentational components (FetchResult,
+// ResourcesView's forbidden-kind sidebar) classify errors uniformly
+// across the OSS binary and Radar Hub.
+export interface FetchErrorShape {
+  status: number
+  message: string
+}
+
+export function isFetchError(error: unknown): error is FetchErrorShape {
+  if (typeof error !== 'object' || error === null) return false
+  const e = error as Record<string, unknown>
+  return typeof e.status === 'number' && typeof e.message === 'string'
+}
+
+export function isForbiddenError(error: unknown): boolean {
+  return isFetchError(error) && error.status === 403
+}

package/src/types/index.ts

@@ -1,4 +1,5 @@
 export * from './core'
+export * from './fetch-error'
 export * from './gitops'
 export * from './gitops-tree'
 export * from './gitops-insights'