@skyhook-io/k8s-ui 1.7.2 → 1.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -63,7 +63,7 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "html-to-image": "^1.11.0",
-    "react-virtuoso": "^4.18.6",
+    "react-virtuoso": "^4.18.7",
     "shiki": "^4.0.0"
   },
   "peerDependencies": {
@@ -90,7 +90,7 @@
     "clsx": "^2.1.1",
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.12.0",
+    "lucide-react": "^1.16.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "typescript": "^6.0.2",

package/src/components/resources/renderers/NamespaceRenderer.tsx

@@ -3,6 +3,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ResourceLink } from '../../ui/drawer-components'
 import type { RBACNamespaceResponse, RBACBindingWithSubjects, RBACSubject, ResourceRef } from '../../../types'
 import { rbacKindBadgeClass } from '../../../utils/rbac-badges'
+import { RBACErrorSection } from './RBACErrorSection'
 import { SEVERITY_TEXT, SEVERITY_DOT } from '../../../utils/badge-colors'
 import { parseCPUToNanocores, parseMemoryToBytes } from '../../../utils/format'
 
@@ -197,11 +198,7 @@ function NamespaceRBACSection({
     )
   }
   if (error) {
-    return (
-      <Section title="RBAC" icon={Shield}>
-        <div className="text-sm text-red-400">Could not load RBAC summary: {error.message}</div>
-      </Section>
-    )
+    return <RBACErrorSection title="RBAC" error={error} errorPrefix="Could not load RBAC summary" />
   }
   if (!rbacData) return null
 

package/src/components/resources/renderers/PodRenderer.tsx

@@ -10,6 +10,7 @@ import {
   rbacApiGroupBadgeClass,
 } from '../../../utils/rbac-badges'
 import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
+import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
 import type { ResolvedEnvFrom, RBACSubjectResponse, RBACPolicyRule } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
 import { MetricsChart } from '../../ui/MetricsChart'
@@ -877,13 +878,11 @@ function PodPermissionsSection({
     )
   }
   if (error) {
-    return (
-      <Section title={title} icon={Shield}>
-        <div className="text-sm text-red-400">
-          Could not load permissions: {error.message}
-        </div>
-      </Section>
-    )
+    // Permissions is a bonus section here; when RBAC is simply not available
+    // (cluster-static) or forbidden, hide it rather than repeat a note on every
+    // Pod. Genuine faults still surface.
+    if (isRBACUnavailable(error)) return null
+    return <RBACErrorSection title={title} error={error} />
   }
   if (!rbacData) return null
 

package/src/components/resources/renderers/RBACErrorSection.test.tsx

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
+
+function err(message: string, status?: number): Error {
+  return Object.assign(new Error(message), status === undefined ? {} : { status })
+}
+
+describe('isRBACUnavailable', () => {
+  it('is true for the RBAC-cache 503 and any 403 (expected, non-actionable)', () => {
+    expect(isRBACUnavailable(err('RBAC cache not available', 503))).toBe(true)
+    expect(isRBACUnavailable(err('forbidden', 403))).toBe(true)
+  })
+
+  it('is false for genuine faults so they still surface', () => {
+    expect(isRBACUnavailable(err('Not connected to cluster', 503))).toBe(false)
+    expect(isRBACUnavailable(err('boom', 500))).toBe(false)
+    expect(isRBACUnavailable(err('Failed to fetch'))).toBe(false)
+  })
+})
+
+describe('RBACErrorSection', () => {
+  it('renders 503 (SA cannot read RBAC) as a calm note, not a red error', () => {
+    const html = renderToString(
+      <RBACErrorSection title="Permissions" error={err('RBAC cache not available', 503)} />,
+    )
+    expect(html).toContain('RBAC visibility')
+    expect(html).not.toContain('text-red-400')
+  })
+
+  it('renders a non-RBAC 503 (e.g. cluster disconnect) in red, not the calm RBAC note', () => {
+    const html = renderToString(
+      <RBACErrorSection title="Permissions" error={err('Not connected to cluster', 503)} />,
+    )
+    expect(html).toContain('text-red-400')
+    expect(html).not.toContain('RBAC visibility')
+  })
+
+  it('renders 403 (viewer lacks permission) as a calm note, not a red error', () => {
+    const html = renderToString(
+      <RBACErrorSection title="Permissions" error={err('forbidden', 403)} />,
+    )
+    expect(html).toContain('permission to view RBAC bindings')
+    expect(html).not.toContain('text-red-400')
+  })
+
+  it('renders genuine failures (500 / no status) in red with the prefix', () => {
+    const html = renderToString(
+      <RBACErrorSection title="Permissions" error={err('boom', 500)} />,
+    )
+    expect(html).toContain('text-red-400')
+    expect(html).toContain('Could not load permissions')
+    expect(html).toContain('boom')
+  })
+
+  it('honors a custom errorPrefix for genuine failures', () => {
+    const html = renderToString(
+      <RBACErrorSection title="Bindings" error={err('boom')} errorPrefix="Could not load RBAC data" />,
+    )
+    expect(html).toContain('Could not load RBAC data')
+  })
+})

package/src/components/resources/renderers/RBACErrorSection.tsx

@@ -0,0 +1,72 @@
+import { Shield } from 'lucide-react'
+import type { ComponentType } from 'react'
+import { Section } from '../../ui/drawer-components'
+
+interface RBACErrorSectionProps {
+  title: string
+  error: Error
+  // Matches the icon of the section's success/loading state (Shield for most,
+  // Users for the Role bindings section) so the error state isn't jarring.
+  icon?: ComponentType<{ className?: string }>
+  // Prefix for the genuine-error line; copy differs slightly across renderers
+  // ("permissions" on Pod/Workload, "RBAC data" on ServiceAccount).
+  errorPrefix?: string
+}
+
+const errorStatus = (error: Error): number | undefined => (error as { status?: number }).status
+
+// 503 because Radar's SA can't read RBAC, so the informers never synced — a
+// cluster-static config state (same on every resource), not a failure. The message
+// check distinguishes it from a generic connectivity 503 ("Not connected to
+// cluster"), which is a real fault and must stay loud (red).
+const isRBACCacheUnavailable = (error: Error): boolean =>
+  errorStatus(error) === 503 && error.message.includes('RBAC cache')
+
+// 403 because the requesting user lacks list permission on bindings.
+const isRBACForbidden = (error: Error): boolean => errorStatus(error) === 403
+
+// True for the two expected, non-actionable RBAC states above. Surfaces that treat
+// the RBAC section as a bonus (Pod/Workload Permissions) hide it entirely for these.
+// Genuine faults — connectivity 503, 500, network errors — are deliberately NOT
+// included, so they still surface rather than being silently dropped.
+export function isRBACUnavailable(error: Error): boolean {
+  return isRBACForbidden(error) || isRBACCacheUnavailable(error)
+}
+
+// RBACErrorSection renders each expected state as a calm note (distinct copy per
+// state) and reserves the red treatment for genuine failures. It shares the two
+// sub-predicates with isRBACUnavailable so the "what counts as unavailable" rule
+// has a single source of truth and can't drift.
+export function RBACErrorSection({
+  title,
+  error,
+  icon = Shield,
+  errorPrefix = 'Could not load permissions',
+}: RBACErrorSectionProps) {
+  if (isRBACCacheUnavailable(error)) {
+    return (
+      <Section title={title} icon={icon}>
+        <div className="text-sm text-theme-text-tertiary">
+          RBAC visibility isn’t available — the identity Radar connects with can’t read
+          RBAC resources in this cluster.
+        </div>
+      </Section>
+    )
+  }
+  if (isRBACForbidden(error)) {
+    return (
+      <Section title={title} icon={icon}>
+        <div className="text-sm text-theme-text-tertiary">
+          You don’t have permission to view RBAC bindings here.
+        </div>
+      </Section>
+    )
+  }
+  return (
+    <Section title={title} icon={icon}>
+      <div className="text-sm text-red-400">
+        {errorPrefix}: {error.message}
+      </div>
+    </Section>
+  )
+}

package/src/components/resources/renderers/RoleRenderer.tsx

@@ -3,6 +3,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import type { RBACRoleResponse, RBACSubject, ResourceRef } from '../../../types'
 import { rbacKindBadgeClass, rbacVerbBadgeClass } from '../../../utils/rbac-badges'
+import { RBACErrorSection } from './RBACErrorSection'
 
 interface RoleRendererProps {
   data: any
@@ -216,13 +217,7 @@ function RoleBindingsSection({ rbacRoleData, loading, error, onNavigate }: RoleB
     )
   }
   if (error) {
-    return (
-      <Section title="Bindings" icon={Users}>
-        <div className="text-sm text-red-400">
-          Could not load bindings: {error.message}
-        </div>
-      </Section>
-    )
+    return <RBACErrorSection title="Bindings" error={error} icon={Users} errorPrefix="Could not load bindings" />
   }
   if (!rbacRoleData) return null
 

package/src/components/resources/renderers/ServiceAccountRenderer.tsx

@@ -16,6 +16,7 @@ import {
   rbacKindBadgeClass,
 } from '../../../utils/rbac-badges'
 import { RBAC_BLAST_ESCALATION_VERBS } from '../../../utils/rbac-blast-radius'
+import { RBACErrorSection } from './RBACErrorSection'
 import { BADGE_SEVERITY_COLORS } from '../../ui/Badge'
 
 interface ServiceAccountRendererProps {
@@ -194,13 +195,7 @@ function RBACSections({ rbacData, loading, error, onNavigate }: RBACSectionsProp
     )
   }
   if (error) {
-    return (
-      <Section title="Bindings" icon={Shield}>
-        <div className="text-sm text-red-400">
-          Could not load RBAC data: {error.message}
-        </div>
-      </Section>
-    )
+    return <RBACErrorSection title="Bindings" error={error} errorPrefix="Could not load RBAC data" />
   }
   if (!rbacData) return null
 

package/src/components/resources/renderers/WorkloadRenderer.tsx

@@ -5,6 +5,7 @@ import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection,
 import { DialogPortal } from '../../ui/DialogPortal'
 import type { RBACSubjectResponse, RBACPolicyRule } from '../../../types'
 import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
+import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
 import {
   rbacVerbBadgeClass,
   rbacResourceBadgeClass,
@@ -379,11 +380,11 @@ function WorkloadPermissionsSection({
     )
   }
   if (error) {
-    return (
-      <Section title={title} icon={Shield}>
-        <div className="text-sm text-red-400">Could not load permissions: {error.message}</div>
-      </Section>
-    )
+    // Permissions is a bonus section here; when RBAC is simply not available
+    // (cluster-static) or forbidden, hide it rather than repeat a note on every
+    // workload. Genuine faults still surface.
+    if (isRBACUnavailable(error)) return null
+    return <RBACErrorSection title={title} error={error} />
   }
   if (!rbacData) return null
 

package/src/components/ui/ClusterName.tsx

@@ -91,10 +91,18 @@ export function ClusterName({ name, variant = 'inline', noBadge, fallbackBadge,
   const showFallback = !noBadge && !hasProvider && fallbackBadge != null
   const showRegion = parsed.region !== null && variant === 'stacked'
   const collapsed = parsed.raw !== parsed.clusterName
-  // Tooltip when there's something to disclose — either we collapsed the
-  // raw, or the displayed name is being middle-truncated to fit. Callers
-  // can opt out via `noTooltip` when the raw is already visible elsewhere.
-  const needsTooltip = !noTooltip && (collapsed || truncated)
+  // The styled <Tooltip> wrapper is gated ONLY on `collapsed` — a stable,
+  // string-derived fact. Truncation must NOT gate the wrapper: wrapping
+  // changes the layout box MiddleEllipsis measures, so a truncated↔untruncated
+  // flip oscillates through its ResizeObserver (the exact feedback its
+  // onTruncatedChange note warns against). For the truncation case we disclose
+  // the full name via MiddleEllipsis's native `title` instead — an attribute,
+  // not a layout change — so the measurement can't feed back.
+  const showRawTooltip = !noTooltip && collapsed
+  // Don't also set a native title when the raw is already shown via the
+  // wrapper (collapsed) — that would double up. Only the non-collapsed
+  // truncation path uses it; there raw === clusterName.
+  const truncationTitle = !noTooltip && !collapsed && truncated ? parsed.clusterName : undefined
 
   const body = (
     <span className={['inline-flex items-center gap-1.5 min-w-0', className ?? ''].join(' ')}>
@@ -102,7 +110,7 @@ export function ClusterName({ name, variant = 'inline', noBadge, fallbackBadge,
       {showFallback && fallbackBadge}
       {variant === 'stacked' ? (
         <span className="flex flex-col min-w-0 flex-1">
-          <MiddleEllipsis text={parsed.clusterName} onTruncatedChange={onTruncatedChange} />
+          <MiddleEllipsis text={parsed.clusterName} title={truncationTitle} onTruncatedChange={onTruncatedChange} />
           {showRegion && (
             <span className="text-[10px] text-theme-text-tertiary truncate">
               {parsed.provider} · {parsed.region}
@@ -110,12 +118,12 @@ export function ClusterName({ name, variant = 'inline', noBadge, fallbackBadge,
           )}
         </span>
       ) : (
-        <MiddleEllipsis text={parsed.clusterName} onTruncatedChange={onTruncatedChange} />
+        <MiddleEllipsis text={parsed.clusterName} title={truncationTitle} onTruncatedChange={onTruncatedChange} />
       )}
     </span>
   )
 
-  if (!needsTooltip) return body
+  if (!showRawTooltip) return body
 
   return (
     <Tooltip content={parsed.raw} delay={250}>

package/src/utils/resource-icons.ts

@@ -145,7 +145,7 @@ const KIND_ICON_MAP: Record<string, LucideIcon> = {
   nodeclaim: Server,
   ec2nodeclass: Server,
   aksnodeclass: Server,
-  gcpnodeclass: Server,
+  gcenodeclass: Server,
 
   // KEDA
   scaledobject: Scaling,