@skyhook-io/radar-app 1.0.0 → 1.0.1

package/src/components/NamespaceSwitcher.tsx

@@ -0,0 +1,298 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { ChevronDown, Globe, Search, AlertTriangle, X } from 'lucide-react'
+import { useNamespaceScope, useSetActiveNamespace } from '../api/client'
+import { Tooltip } from './ui/Tooltip'
+
+export interface NamespaceSwitcherHandle {
+  open: () => void
+}
+
+interface NamespaceSwitcherProps {
+  className?: string
+  disabled?: boolean
+  disabledTooltip?: string
+}
+
+/**
+ * NamespaceSwitcher is a per-user multi-select view filter for the cluster
+ * view. It does NOT reshape the shared informer cache — picks are saved
+ * server-side per user and intersected with the user's RBAC-allowed
+ * namespaces on each read.
+ *
+ * Three states reflect what the backend reports:
+ *   - cluster-wide: empty trigger label "All namespaces", picker lets the
+ *     user narrow the view; otherwise informational.
+ *   - namespace:    label shows the namespace count (or single name); picker
+ *     offers other accessible namespaces and a clear-all reset.
+ *   - restricted:   user can't list namespaces and isn't pinned; picker
+ *     surfaces only the kubeconfig context's namespace + any saved picks.
+ *
+ * Selection model: the dropdown keeps a draft Set<string>; toggling rows
+ * mutates the draft locally; closing the dropdown applies the draft in a
+ * single mutation. "Clear all" applies immediately and closes; "Select all
+ * visible" / "Clear visible" mutate the draft only and wait for close.
+ */
+export const NamespaceSwitcher = forwardRef<NamespaceSwitcherHandle, NamespaceSwitcherProps>(function NamespaceSwitcher(
+  { className = '', disabled = false, disabledTooltip },
+  ref,
+) {
+  const { data: scope, isLoading } = useNamespaceScope()
+  const setActive = useSetActiveNamespace()
+
+  const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 })
+  const [draft, setDraft] = useState<Set<string>>(() => new Set())
+
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const scopeActives = useMemo(() => scope?.actives ?? [], [scope?.actives])
+  const activesKey = useMemo(() => [...scopeActives].sort().join(','), [scopeActives])
+
+  // Sync the draft with the server's view whenever it changes (initial load,
+  // post-mutation refetch, eviction after RBAC drift).
+  useEffect(() => {
+    setDraft(new Set(scopeActives))
+  }, [activesKey, scopeActives])
+
+  const items = useMemo(() => {
+    if (!scope) return [] as string[]
+    return [...(scope.accessibleNamespaces ?? [])].sort((a, b) => a.localeCompare(b))
+  }, [scope])
+
+  const filteredItems = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return items
+    return items.filter(n => n.toLowerCase().includes(q))
+  }, [items, search])
+
+  const applySelection = useCallback((next: Set<string>) => {
+    if (!scope) return
+    const nextArr = Array.from(next).sort()
+    if (nextArr.join(',') === activesKey) return
+    setActive.mutate({ namespaces: nextArr })
+  }, [activesKey, scope, setActive])
+
+  const closeAndApply = useCallback(() => {
+    setIsOpen(false)
+    setSearch('')
+    applySelection(draft)
+  }, [applySelection, draft])
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      if (disabled || isLoading || setActive.isPending) return
+      setIsOpen(true)
+    },
+  }), [disabled, isLoading, setActive.isPending])
+
+  useEffect(() => {
+    if (!isOpen) return
+    const trigger = triggerRef.current
+    if (!trigger) return
+    const r = trigger.getBoundingClientRect()
+    setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 240) })
+  }, [isOpen])
+
+  useEffect(() => {
+    if (!isOpen) return
+    function onClick(e: MouseEvent) {
+      if (
+        !dropdownRef.current?.contains(e.target as Node) &&
+        !triggerRef.current?.contains(e.target as Node)
+      ) {
+        closeAndApply()
+      }
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') closeAndApply()
+    }
+    document.addEventListener('mousedown', onClick)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onClick)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [isOpen, closeAndApply])
+
+  if (!scope) return null
+
+  const toggle = (ns: string) => {
+    const next = new Set(draft)
+    if (next.has(ns)) next.delete(ns)
+    else next.add(ns)
+    setDraft(next)
+  }
+
+  const clearAll = () => {
+    setDraft(new Set())
+    setIsOpen(false)
+    setSearch('')
+    applySelection(new Set())
+  }
+
+  const selectAllVisible = () => {
+    const next = new Set(draft)
+    for (const ns of filteredItems) next.add(ns)
+    setDraft(next)
+  }
+
+  const clearVisible = () => {
+    const next = new Set(draft)
+    for (const ns of filteredItems) next.delete(ns)
+    setDraft(next)
+  }
+
+  const activeCount = scopeActives.length
+  const triggerLabel =
+    activeCount === 0 ? 'All namespaces' : activeCount === 1 ? scopeActives[0] : `${activeCount} namespaces`
+  const isClusterWide = activeCount === 0
+  const restrictedHint = scope.mode === 'restricted'
+  const isDisabled = disabled || isLoading || setActive.isPending
+  const canClearAll = scope.canClearNamespace || activeCount === 0
+  const tooltipContent = disabled && disabledTooltip
+    ? disabledTooltip
+    : restrictedHint
+      ? 'Limited namespace visibility — only namespaces granted by your RBAC are shown.'
+      : isClusterWide
+        ? 'Currently viewing all namespaces. Click to narrow the view.'
+        : activeCount === 1
+          ? `View is filtered to namespace ${scopeActives[0]}. Click to switch or reset.`
+          : `View is filtered to ${activeCount} namespaces. Click to adjust or reset.`
+
+  // Counts used to label the bulk-action buttons; computed against the visible
+  // (filtered) set so the labels match what the action will affect.
+  const visibleSelectedCount = filteredItems.reduce((n, ns) => n + (draft.has(ns) ? 1 : 0), 0)
+  const allVisibleSelected = filteredItems.length > 0 && visibleSelectedCount === filteredItems.length
+
+  return (
+    <>
+      <Tooltip
+        content={tooltipContent}
+        delay={300}
+        position="bottom"
+      >
+        <button
+          ref={triggerRef}
+          onClick={() => !isDisabled && (isOpen ? closeAndApply() : setIsOpen(true))}
+          disabled={isDisabled}
+          className={`flex items-center gap-1.5 px-2 py-1 rounded text-sm bg-theme-elevated hover:bg-theme-hover text-theme-text-primary disabled:opacity-60 transition-colors ${className}`}
+          aria-label="Switch active namespaces"
+        >
+          {isClusterWide ? (
+            <Globe className="w-3.5 h-3.5 text-theme-text-tertiary" />
+          ) : restrictedHint ? (
+            <AlertTriangle className="w-3.5 h-3.5 text-theme-text-tertiary" />
+          ) : null}
+          <span className="font-medium max-w-[180px] truncate">
+            {setActive.isPending ? 'Switching…' : triggerLabel}
+          </span>
+          <ChevronDown className="w-3 h-3 opacity-60" />
+        </button>
+      </Tooltip>
+
+      {isOpen &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            style={{ position: 'fixed', top: pos.top, left: pos.left, minWidth: pos.width, zIndex: 100 }}
+            className="bg-theme-surface border border-theme-border rounded-md shadow-theme-lg overflow-hidden"
+          >
+            {items.length > 6 && (
+              <div className="flex items-center gap-2 px-2 py-1.5 border-b border-theme-border">
+                <Search className="w-3.5 h-3.5 text-theme-text-tertiary" />
+                <input
+                  autoFocus
+                  value={search}
+                  onChange={e => setSearch(e.target.value)}
+                  placeholder="Filter namespaces"
+                  className="flex-1 bg-transparent text-sm outline-none text-theme-text-primary placeholder:text-theme-text-tertiary"
+                />
+              </div>
+            )}
+
+            <div className="flex items-center justify-between px-2 py-1.5 border-b border-theme-border text-xs text-theme-text-secondary">
+              <button
+                onClick={canClearAll ? clearAll : undefined}
+                disabled={!canClearAll || activeCount === 0}
+                className="flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
+                aria-label="Clear namespace selection"
+              >
+                <X className="w-3 h-3" />
+                Clear all
+              </button>
+              <button
+                onClick={allVisibleSelected ? clearVisible : selectAllVisible}
+                disabled={filteredItems.length === 0}
+                className="px-1.5 py-0.5 rounded hover:bg-theme-hover disabled:opacity-50 disabled:hover:bg-transparent"
+              >
+                {allVisibleSelected
+                  ? `Clear ${filteredItems.length} visible`
+                  : search.trim()
+                    ? `Select ${filteredItems.length} visible`
+                    : 'Select all'}
+              </button>
+            </div>
+
+            <ul className="max-h-80 overflow-y-auto py-1">
+              {filteredItems.length === 0 && (
+                <li className="px-3 py-2 text-xs text-theme-text-tertiary">
+                  {search ? 'No matches.' : 'No namespaces available.'}
+                </li>
+              )}
+
+              {filteredItems.map(ns => {
+                const isChecked = draft.has(ns)
+                const isContextDefault = ns === scope.kubeconfigNamespace && ns !== ''
+                return (
+                  <li key={ns}>
+                    <label
+                      className="w-full flex items-center justify-between px-3 py-1.5 text-sm hover:bg-theme-hover text-left text-theme-text-primary cursor-pointer"
+                    >
+                      <span className="flex items-center gap-2 min-w-0">
+                        <input
+                          type="checkbox"
+                          checked={isChecked}
+                          onChange={() => toggle(ns)}
+                          className="shrink-0 accent-current"
+                        />
+                        <span className="truncate">{ns}</span>
+                        {isContextDefault && (
+                          <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary shrink-0">
+                            kubeconfig
+                          </span>
+                        )}
+                      </span>
+                    </label>
+                  </li>
+                )
+              })}
+            </ul>
+
+            <div className="flex items-center justify-between px-3 py-1.5 border-t border-theme-border text-[11px] text-theme-text-tertiary">
+              <span>
+                {draft.size === 0 ? 'All namespaces' : `${draft.size} selected`}
+              </span>
+              <button
+                onClick={closeAndApply}
+                className="px-2 py-0.5 rounded bg-theme-elevated hover:bg-theme-hover text-theme-text-primary"
+              >
+                Done
+              </button>
+            </div>
+
+            {!scope.authoritative && (
+              <div className="px-3 py-2 border-t border-theme-border text-[11px] status-degraded">
+                Limited list — your RBAC doesn&rsquo;t allow listing all
+                namespaces. Other namespaces may be accessible but won&rsquo;t
+                appear here until you switch context.
+              </div>
+            )}
+          </div>,
+          document.body,
+        )}
+    </>
+  )
+})

package/src/components/helm/HelmReleaseDrawer.tsx

@@ -56,16 +56,17 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   // transient error state under the role-gated panel.
   const { canAtLeast } = useCloudRole()
   const canViewSensitive = canAtLeast('member')
+  const helmNamespace = release.storageNamespace || release.namespace
 
   const { data: releaseDetail, isLoading, refetch: refetchRelease } = useHelmRelease(
-    release.namespace,
+    helmNamespace,
     release.name
   )
   const [refetch, isRefreshAnimating] = useRefreshAnimation(refetchRelease)
 
   // Fetch manifest for selected revision (or latest)
   const { data: manifest, isLoading: manifestLoading } = useHelmManifest(
-    release.namespace,
+    helmNamespace,
     release.name,
     selectedRevision,
     canViewSensitive,
@@ -73,7 +74,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
   // Fetch values
   const { data: values, isLoading: valuesLoading } = useHelmValues(
-    release.namespace,
+    helmNamespace,
     release.name,
     showAllValues,
     canViewSensitive,
@@ -81,7 +82,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
   // Fetch diff if comparing revisions
   const { data: diffData, isLoading: diffLoading } = useHelmManifestDiff(
-    release.namespace,
+    helmNamespace,
     release.name,
     diffRevisions?.rev1 || 0,
     diffRevisions?.rev2 || 0,
@@ -89,10 +90,11 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
   )
 
   // Lazy check for upgrade availability
-  const { data: upgradeInfo, isLoading: upgradeLoading } = useHelmUpgradeInfo(
-    release.namespace,
+  const { data: upgradeInfo, isLoading: upgradeLoading, error: upgradeError } = useHelmUpgradeInfo(
+    helmNamespace,
     release.name
   )
+  const upgradeErrorMessage = upgradeError instanceof Error ? upgradeError.message : 'Upgrade check failed'
 
   // Mutations for actions
   const uninstallMutation = useHelmUninstall()
@@ -176,7 +178,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
     try {
       await rollbackWithProgress(
-        release.namespace,
+        helmNamespace,
         release.name,
         rollbackRevision,
         (event) => {
@@ -195,7 +197,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
       }])
 
       queryClient.invalidateQueries({ queryKey: ['helm-releases'] })
-      queryClient.invalidateQueries({ queryKey: ['helm-release', release.namespace, release.name] })
+      queryClient.invalidateQueries({ queryKey: ['helm-release', helmNamespace, release.name] })
 
       setTimeout(() => {
         setRollbackRevision(null)
@@ -215,7 +217,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
   const handleUninstallConfirm = () => {
     uninstallMutation.mutate(
-      { namespace: release.namespace, name: release.name },
+      { namespace: helmNamespace, name: release.name },
       {
         onSuccess: () => {
           setShowUninstallConfirm(false)
@@ -235,9 +237,10 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
     try {
       await upgradeWithProgress(
-        release.namespace,
+        helmNamespace,
         release.name,
         upgradeInfo.latestVersion,
+        upgradeInfo.repositoryName,
         (event) => {
           if (event.type === 'progress' && event.message) {
             setUpgradeProgress(prev => [...prev, {
@@ -255,8 +258,8 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
 
       // Invalidate queries
       queryClient.invalidateQueries({ queryKey: ['helm-releases'] })
-      queryClient.invalidateQueries({ queryKey: ['helm-release', release.namespace, release.name] })
-      queryClient.invalidateQueries({ queryKey: ['helm-upgrade-info', release.namespace, release.name] })
+      queryClient.invalidateQueries({ queryKey: ['helm-release', helmNamespace, release.name] })
+      queryClient.invalidateQueries({ queryKey: ['helm-upgrade-info', helmNamespace, release.name] })
       queryClient.invalidateQueries({ queryKey: ['helm-batch-upgrade-info'] })
 
       setTimeout(() => {
@@ -327,6 +330,13 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               <span className="badge bg-theme-hover/50 text-theme-text-secondary animate-pulse">
                 checking...
               </span>
+            ) : upgradeError ? (
+              <span
+                className="badge bg-theme-hover/50 text-theme-text-secondary"
+                title={upgradeErrorMessage}
+              >
+                upgrade check failed
+              </span>
             ) : upgradeInfo?.updateAvailable ? (
               <button
                 onClick={() => setShowUpgradeConfirm(true)}
@@ -344,6 +354,13 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
               <span className={clsx('badge', SEVERITY_BADGE.success)} title="Chart is up to date">
                 latest
               </span>
+            ) : upgradeInfo?.error ? (
+              <span
+                className="badge bg-theme-hover/50 text-theme-text-secondary"
+                title={upgradeInfo.error}
+              >
+                upstream unknown
+              </span>
             ) : null}
           </div>
           <div className="flex items-center gap-1">
@@ -450,7 +467,7 @@ export function HelmReleaseDrawer({ release, onClose, onNavigateToResource, isOp
                   onToggleAllValues={setShowAllValues}
                   onCopy={(text) => copyToClipboard(text, 'values')}
                   copied={copied === 'values'}
-                  namespace={release.namespace}
+                  namespace={helmNamespace}
                   name={release.name}
                   onApplySuccess={() => refetch()}
                 />

package/src/components/helm/HelmView.tsx

@@ -17,7 +17,7 @@ type ViewTab = 'releases' | 'charts'
 interface HelmViewProps {
   namespace: string
   selectedRelease?: SelectedHelmRelease | null
-  onReleaseClick?: (namespace: string, name: string) => void
+  onReleaseClick?: (namespace: string, name: string, storageNamespace?: string) => void
 }
 
 export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmViewProps) {
@@ -27,12 +27,14 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
 
   const { data: releases, isLoading, error: releasesError, refetch: refetchReleases } = useHelmReleases(namespace || undefined)
   const isForbidden = isForbiddenError(releasesError)
+  const releasesErrorMessage = releasesError instanceof Error ? releasesError.message : 'Failed to load Helm releases'
 
   // Lazy load upgrade info after releases are loaded
-  const { data: upgradeInfo, isLoading: upgradeLoading, refetch: refetchUpgradeInfo } = useHelmBatchUpgradeInfo(
+  const { data: upgradeInfo, isLoading: upgradeLoading, error: upgradeError, refetch: refetchUpgradeInfo } = useHelmBatchUpgradeInfo(
     namespace || undefined,
     Boolean(releases && releases.length > 0)
   )
+  const upgradeErrorMessage = upgradeError instanceof Error ? upgradeError.message : 'Upgrade checks failed'
 
   const [handleRefresh, isRefreshAnimating] = useRefreshAnimation(async () => {
     await Promise.all([refetchReleases(), refetchUpgradeInfo()])
@@ -132,7 +134,7 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
       scope: 'helm',
       handler: () => {
         const release = getHighlightedRelease()
-        if (release) onReleaseClick?.(release.namespace, release.name)
+        if (release) onReleaseClick?.(release.namespace, release.name, release.storageNamespace)
       },
       enabled: highlightedIndex >= 0,
     },
@@ -232,6 +234,11 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
 
             {/* Releases Table */}
             <div className="flex-1 overflow-auto">
+              {upgradeError && (
+                <div className="m-4 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-sm text-amber-300">
+                  Upgrade checks failed: {upgradeErrorMessage}
+                </div>
+              )}
               {isLoading ? (
                 <PaneLoader className="h-full" />
               ) : isForbidden ? (
@@ -240,6 +247,20 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
                   <p className="text-theme-text-secondary font-medium">Access Restricted</p>
                   <p className="text-sm mt-1">Insufficient permissions to list Helm releases</p>
                 </div>
+              ) : releasesError ? (
+                <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary gap-3 px-6 text-center">
+                  <Package className="w-10 h-10 text-amber-400" />
+                  <div>
+                    <p className="text-theme-text-secondary font-medium">Failed to load Helm releases</p>
+                    <p className="text-sm mt-1 break-all">{releasesErrorMessage}</p>
+                  </div>
+                  <button
+                    onClick={() => refetchReleases()}
+                    className="px-3 py-1.5 text-sm text-theme-text-primary border border-theme-border rounded-lg hover:bg-theme-elevated transition-colors"
+                  >
+                    Retry
+                  </button>
+                </div>
               ) : filteredReleases.length === 0 ? (
                 <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary gap-2">
                   <Package className="w-12 h-12 text-theme-text-disabled" />
@@ -291,16 +312,17 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
                   <tbody className="table-divide-subtle">
                     {filteredReleases.map((release, index) => (
                       <ReleaseRow
-                        key={`${release.namespace}-${release.name}`}
+                        key={releaseIdentityKey(release)}
                         ref={index === highlightedIndex ? highlightedRowRef : null}
                         release={release}
-                        upgradeInfo={upgradeInfo?.releases[`${release.namespace}/${release.name}`]}
+                        upgradeInfo={upgradeInfo?.releases[releaseIdentityKey(release)]}
                         isSelected={
                           selectedRelease?.namespace === release.namespace &&
-                          selectedRelease?.name === release.name
+                          selectedRelease?.name === release.name &&
+                          (selectedRelease?.storageNamespace || selectedRelease?.namespace) === (release.storageNamespace || release.namespace)
                         }
                         isHighlighted={index === highlightedIndex}
-                        onClick={() => onReleaseClick?.(release.namespace, release.name)}
+                        onClick={() => onReleaseClick?.(release.namespace, release.name, release.storageNamespace)}
                         onMouseEnter={() => setHighlightedIndex(-1)}
                       />
                     ))}
@@ -329,6 +351,10 @@ export function HelmView({ namespace, selectedRelease, onReleaseClick }: HelmVie
   )
 }
 
+function releaseIdentityKey(release: Pick<HelmRelease, 'namespace' | 'name' | 'storageNamespace'>): string {
+  return `${release.storageNamespace || release.namespace}/${release.name}`
+}
+
 interface ReleaseRowProps {
   release: HelmRelease
   upgradeInfo?: UpgradeInfo