@skyhook-io/k8s-ui 1.6.1 → 1.6.2

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

@@ -1,41 +1,67 @@
-import { Shield, Users } from 'lucide-react'
+import { Shield, Users, Eye } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ResourceLink, AlertBanner } from '../../ui/drawer-components'
-import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import type { ResourceRef, RBACPolicyRule } from '../../../types'
+import {
+  rbacVerbBadgeClass,
+  rbacResourceBadgeClass,
+  rbacApiGroupBadgeClass,
+  rbacKindBadgeClass,
+} from '../../../utils/rbac-badges'
+import { BADGE_SEVERITY_COLORS } from '../../ui/Badge'
 
 interface RoleBindingRendererProps {
   data: any
-  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  onNavigate?: (ref: ResourceRef) => void
+  /** Rules from the referenced Role/ClusterRole. Undefined means the host
+   *  hasn't wired the fetch (inline rules preview is omitted). Null means
+   *  the fetch failed; the section shows a tactful note instead of silence. */
+  roleRules?: RBACPolicyRule[] | null
+  roleRulesLoading?: boolean
 }
 
+// Wide groups whose membership effectively widens a binding beyond a named
+// subject. Kept in sync with pkg/rbac/builtins.go (WideGroups). Mismatch
+// here = misleading or missing warning, not a security flaw — but cross-
+// check if you add to one side, add to the other.
+const WIDE_GROUP_DESCRIPTIONS: Record<string, string> = {
+  'system:authenticated':
+    'every authenticated entity in the cluster, including external OIDC users',
+  'system:unauthenticated':
+    'every unauthenticated (anonymous) request',
+  'system:masters':
+    'the system:masters super-user group, which bypasses authorization',
+}
+
+function findWideGroupSubject(subjects: any[]): { name: string; description: string } | null {
+  for (const s of subjects) {
+    if (s.kind !== 'Group') continue
+    const d = WIDE_GROUP_DESCRIPTIONS[s.name]
+    if (d) return { name: s.name, description: d }
+  }
+  return null
+}
+
+// Subject-kind colors (ServiceAccount/User/Group). Reuse theme-aware palette
+// classes for proper light/dark contrast.
 function getSubjectKindBadgeClass(kind: string): string {
   switch (kind) {
     case 'ServiceAccount':
-      return 'bg-green-500/20 text-green-400'
+      return BADGE_SEVERITY_COLORS.success
     case 'User':
-      return 'bg-blue-500/20 text-blue-400'
+      return BADGE_SEVERITY_COLORS.info
     case 'Group':
-      return 'bg-purple-500/20 text-purple-400'
-    default:
-      return BADGE_INACTIVE
-  }
-}
-
-function getRoleRefKindBadgeClass(kind: string): string {
-  switch (kind) {
-    case 'Role':
-      return 'bg-blue-500/20 text-blue-400'
-    case 'ClusterRole':
-      return 'bg-purple-500/20 text-purple-400'
+      return rbacKindBadgeClass('ClusterRole') // purple — distinct from User
     default:
-      return BADGE_INACTIVE
+      return BADGE_SEVERITY_COLORS.neutral
   }
 }
 
-export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererProps) {
+export function RoleBindingRenderer({ data, onNavigate, roleRules, roleRulesLoading }: RoleBindingRendererProps) {
   const roleRef = data.roleRef || {}
   const subjects: any[] = data.subjects || []
   const isClusterRoleBinding = data.kind === 'ClusterRoleBinding'
+  const wideGroup = findWideGroupSubject(subjects)
 
   return (
     <>
@@ -47,6 +73,19 @@ export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererPro
         />
       )}
 
+      {/* Wide-group warning — describe the blast radius, don't just label it. */}
+      {wideGroup && (
+        <AlertBanner variant="warning" title={`Wide grant: ${wideGroup.name}`}>
+          <div className="text-xs">
+            This binding grants{' '}
+            <span className="text-theme-text-secondary font-medium">
+              {roleRef.kind || 'a role'}{roleRef.name ? ` "${roleRef.name}"` : ''}
+            </span>{' '}
+            to {wideGroup.description}.
+          </div>
+        </AlertBanner>
+      )}
+
       {isClusterRoleBinding && (
         <div className="p-2 bg-blue-500/10 border border-blue-500/30 rounded text-xs text-blue-300/80 flex items-start gap-2">
           <span>ClusterRoleBinding grants permissions across all namespaces.</span>
@@ -59,7 +98,7 @@ export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererPro
             label="Kind"
             value={
               roleRef.kind ? (
-                <span className={clsx('badge', getRoleRefKindBadgeClass(roleRef.kind))}>
+                <span className={clsx('badge', rbacKindBadgeClass(roleRef.kind))}>
                   {roleRef.kind}
                 </span>
               ) : undefined
@@ -72,6 +111,16 @@ export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererPro
         </PropertyList>
       </Section>
 
+      {/* Inline rules preview — saves a click when operators are validating
+       *  "what does this binding actually grant". Only when host wired fetch. */}
+      {roleRules !== undefined && (
+        <RulesPreviewSection
+          rules={roleRules}
+          loading={!!roleRulesLoading}
+          roleName={roleRef.name}
+        />
+      )}
+
       <Section title={`Subjects (${subjects.length})`} icon={Users} defaultExpanded>
         <div className="space-y-2">
           {subjects.map((subject: any, i: number) => (
@@ -85,6 +134,9 @@ export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererPro
                 ) : (
                   <span className="text-theme-text-primary font-medium">{subject.name}</span>
                 )}
+                {subject.kind === 'Group' && WIDE_GROUP_DESCRIPTIONS[subject.name] && (
+                  <span className={clsx('badge text-xs', BADGE_SEVERITY_COLORS.alert)}>wide</span>
+                )}
               </div>
               <div className="text-xs text-theme-text-tertiary mt-1">
                 Namespace: {subject.kind === 'ServiceAccount' ? (subject.namespace || 'default') : '-'}
@@ -96,3 +148,63 @@ export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererPro
     </>
   )
 }
+
+function RulesPreviewSection({
+  rules,
+  loading,
+  roleName,
+}: {
+  rules: RBACPolicyRule[] | null
+  loading: boolean
+  roleName?: string
+}) {
+  return (
+    <Section title="Rules Granted" icon={Eye} defaultExpanded={false}>
+      {loading ? (
+        <div className="text-sm text-theme-text-tertiary">Loading rules…</div>
+      ) : !rules ? (
+        <div className="text-sm text-theme-text-tertiary">
+          Could not resolve referenced role
+          {roleName ? ` "${roleName}"` : ''} — it may not exist (orphan binding)
+          or be unavailable.
+        </div>
+      ) : rules.length === 0 ? (
+        <div className="text-sm text-theme-text-tertiary">
+          The referenced role has no rules.
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {rules.map((r, i) => {
+            const resources = r.resources ?? []
+            const nonResourceURLs = r.nonResourceURLs ?? []
+            // Non-resource rules (e.g. system:discovery grants `get` on
+            // /api, /healthz) have no resources/apiGroups - render the
+            // URLs in place so the line doesn't read as a bare "X on"
+            // with nothing after it.
+            const isNonResource = resources.length === 0 && nonResourceURLs.length > 0
+            return (
+              <div key={i} className="flex items-center gap-1 flex-wrap text-xs">
+                {(r.verbs ?? []).map((v) => (
+                  <span key={v} className={clsx('badge', rbacVerbBadgeClass(v))}>{v}</span>
+                ))}
+                <span className="text-theme-text-secondary">on</span>
+                {isNonResource ? (
+                  nonResourceURLs.map((u) => (
+                    <span key={u} className="badge text-xs font-mono bg-theme-elevated text-theme-text-secondary">{u}</span>
+                  ))
+                ) : (
+                  resources.map((res) => (
+                    <span key={res} className={clsx('badge', rbacResourceBadgeClass)}>{res}</span>
+                  ))
+                )}
+                {!isNonResource && (r.apiGroups ?? []).filter((g) => g !== '').map((g) => (
+                  <span key={g} className={clsx('badge', rbacApiGroupBadgeClass)}>{g}</span>
+                ))}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </Section>
+  )
+}

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

@@ -1,24 +1,22 @@
-import { Shield, Info } from 'lucide-react'
+import { Shield, Info, Users } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, AlertBanner } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import type { RBACRoleResponse, RBACSubject, ResourceRef } from '../../../types'
+import { rbacKindBadgeClass, rbacVerbBadgeClass } from '../../../utils/rbac-badges'
 
 interface RoleRendererProps {
   data: any
+  /** Reverse-lookup data from /api/rbac/role/{kind}/{namespace}/{name}.
+   *  Undefined when the host hasn't wired the fetch (Bindings section is
+   *  omitted). Null when the fetch failed (renders an inline error). */
+  rbacRoleData?: RBACRoleResponse | null
+  rbacRoleLoading?: boolean
+  rbacRoleError?: Error | null
+  onNavigate?: (ref: ResourceRef) => void
 }
 
-const READ_VERBS = new Set(['get', 'list', 'watch'])
-const WRITE_VERBS = new Set(['create', 'update', 'patch'])
-const DELETE_VERBS = new Set(['delete', 'deletecollection'])
 
-function getVerbColor(verb: string): string {
-  if (verb === '*') return 'bg-red-500/20 text-red-400'
-  if (READ_VERBS.has(verb)) return 'bg-green-500/20 text-green-400'
-  if (WRITE_VERBS.has(verb)) return 'bg-yellow-500/20 text-yellow-400'
-  if (DELETE_VERBS.has(verb)) return 'bg-red-500/20 text-red-400'
-  return 'bg-blue-500/20 text-blue-400'
-}
-
-export function RoleRenderer({ data }: RoleRendererProps) {
+export function RoleRenderer({ data, rbacRoleData, rbacRoleLoading, rbacRoleError, onNavigate }: RoleRendererProps) {
   const rules = data.rules || []
   const aggregationRule = data.aggregationRule
 
@@ -36,6 +34,16 @@ export function RoleRenderer({ data }: RoleRendererProps) {
         />
       )}
 
+      {/* Bindings reverse-lookup — only when host wired the fetch. */}
+      {rbacRoleData !== undefined && (
+        <RoleBindingsSection
+          rbacRoleData={rbacRoleData}
+          loading={!!rbacRoleLoading}
+          error={rbacRoleError ?? null}
+          onNavigate={onNavigate}
+        />
+      )}
+
       {/* Overview */}
       <Section title="Overview" icon={Shield}>
         <PropertyList>
@@ -107,10 +115,7 @@ export function RoleRenderer({ data }: RoleRendererProps) {
                     {rule.verbs.map((verb: string) => (
                       <span
                         key={verb}
-                        className={clsx(
-                          'badge',
-                          getVerbColor(verb)
-                        )}
+                        className={clsx('badge', rbacVerbBadgeClass(verb))}
                       >
                         {verb}
                       </span>
@@ -190,3 +195,128 @@ export function RoleRenderer({ data }: RoleRendererProps) {
     </>
   )
 }
+
+// ============================================================================
+// ROLE BINDINGS REVERSE-LOOKUP SECTION
+// ============================================================================
+
+interface RoleBindingsSectionProps {
+  rbacRoleData: RBACRoleResponse | null
+  loading: boolean
+  error: Error | null
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+function RoleBindingsSection({ rbacRoleData, loading, error, onNavigate }: RoleBindingsSectionProps) {
+  if (loading) {
+    return (
+      <Section title="Bindings" icon={Users}>
+        <div className="text-sm text-theme-text-tertiary">Loading bindings…</div>
+      </Section>
+    )
+  }
+  if (error) {
+    return (
+      <Section title="Bindings" icon={Users}>
+        <div className="text-sm text-red-400">
+          Could not load bindings: {error.message}
+        </div>
+      </Section>
+    )
+  }
+  if (!rbacRoleData) return null
+
+  const bindings = rbacRoleData.bindings ?? []
+  return (
+    <Section title={`Bindings (${bindings.length})`} icon={Users} defaultExpanded>
+      {bindings.length === 0 ? (
+        <div className="text-sm text-theme-text-tertiary">
+          No bindings reference this role. It grants no effective permissions.
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {bindings.map((b) => {
+            const bindingKindPlural =
+              b.binding.kind === 'RoleBinding' ? 'rolebindings' : 'clusterrolebindings'
+            return (
+              <div key={b.binding.kind + '/' + b.binding.namespace + '/' + b.binding.name} className="card-inner">
+                {/* items-center + uniform text-xs so the badge, link, and
+                 *  "granted to N subjects" footnote share a baseline. */}
+                <div className="flex items-center gap-2 flex-wrap text-xs mb-2">
+                  <span className={clsx('badge', rbacKindBadgeClass(b.binding.kind))}>
+                    {b.binding.kind}
+                  </span>
+                  <ResourceLink
+                    kind={bindingKindPlural}
+                    namespace={b.binding.namespace}
+                    name={b.binding.name}
+                    onNavigate={onNavigate}
+                  />
+                  <span className="text-theme-text-secondary">
+                    granted to {b.subjects.length} subject{b.subjects.length === 1 ? '' : 's'}
+                  </span>
+                </div>
+                <RoleBindingSubjectsList subjects={b.subjects} onNavigate={onNavigate} />
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </Section>
+  )
+}
+
+function RoleBindingSubjectsList({
+  subjects,
+  onNavigate,
+}: {
+  subjects: RBACSubject[]
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const inline = subjects.slice(0, 3)
+  const hidden = subjects.length - inline.length
+  return (
+    <div className="flex flex-wrap gap-1 items-center text-xs">
+      {inline.map((s, i) => (
+        <RoleBindingSubjectChip key={i} subject={s} onNavigate={onNavigate} />
+      ))}
+      {hidden > 0 && (
+        <span className="text-theme-text-secondary">+{hidden} more</span>
+      )}
+    </div>
+  )
+}
+
+function RoleBindingSubjectChip({
+  subject,
+  onNavigate,
+}: {
+  subject: RBACSubject
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  // ServiceAccounts have a detail page; Users and Groups don't (those are
+  // external identities — there's no "User" resource in Kubernetes).
+  if (subject.kind === 'ServiceAccount') {
+    return (
+      <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-theme-elevated border border-theme-border">
+        <span className="text-theme-text-secondary">sa:</span>
+        <ResourceLink
+          kind="serviceaccounts"
+          namespace={subject.namespace}
+          name={subject.name}
+          onNavigate={onNavigate}
+        />
+        {subject.namespace && <span className="text-theme-text-secondary">({subject.namespace})</span>}
+      </span>
+    )
+  }
+  return (
+    <span
+      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-theme-elevated border border-theme-border text-theme-text-primary"
+      title={`${subject.kind} — no detail page (external identity)`}
+    >
+      <span className="text-theme-text-secondary">{subject.kind.toLowerCase()}:</span>
+      {subject.name}
+    </span>
+  )
+}