@skyhook-io/radar-app 0.2.2 → 0.3.1

package/src/components/gitops/RevisionMetaChip.tsx

@@ -0,0 +1,63 @@
+import { ShieldCheck, ShieldAlert } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { useArgoRevisionMetadata } from '../../api/client'
+import { Tooltip } from '../ui/Tooltip'
+
+// Argo returns the author as "Name <email>"; show just the name.
+function authorName(author?: string): string {
+  if (!author) return ''
+  const lt = author.indexOf('<')
+  return (lt >= 0 ? author.slice(0, lt) : author).trim()
+}
+
+// signatureInfo is a raw GPG verification line. "Good signature" → verified;
+// any other non-empty value → a check ran but didn't verify; empty → unsigned.
+function signatureState(sig?: string): 'good' | 'bad' | null {
+  if (!sig) return null
+  return /good signature/i.test(sig) ? 'good' : 'bad'
+}
+
+// RevisionMetaChip hydrates the Argo status-strip revision with Git commit
+// detail (author, subject, signature) fetched from the Argo CD API. Renders
+// nothing until data arrives, so the bare SHA is never blocked; the whole thing
+// is gated by the host on capabilities.revisionMetadataAvailable.
+export function RevisionMetaChip({
+  appNamespace,
+  appName,
+  revision,
+}: {
+  appNamespace: string
+  appName: string
+  revision: string
+}): ReactNode {
+  // The host only renders this chip when revision metadata is available, so no
+  // extra enabled gate is needed — the hook's own appName/revision guard suffices.
+  const { data } = useArgoRevisionMetadata(appNamespace, appName, revision)
+  if (!data) return null
+
+  const author = authorName(data.author)
+  const sig = signatureState(data.signatureInfo)
+  const subject = data.message?.split('\n')[0]?.trim()
+  if (!author && !sig && !subject) return null
+
+  return (
+    <>
+      {author && <span className="shrink-0 text-theme-text-secondary">· {author}</span>}
+      {subject && (
+        <Tooltip content={data.message ?? subject} delay={300} wrapperClassName="min-w-0">
+          <span className="max-w-[32ch] truncate text-theme-text-tertiary">“{subject}”</span>
+        </Tooltip>
+      )}
+      {sig === 'good' && (
+        <Tooltip content={data.signatureInfo ?? 'Signed commit'} delay={300} wrapperClassName="inline-flex shrink-0">
+          <ShieldCheck className="h-3 w-3 text-green-600 dark:text-green-400/80" />
+        </Tooltip>
+      )}
+      {sig === 'bad' && (
+        <Tooltip content={data.signatureInfo ?? 'Signature not verified'} delay={300} wrapperClassName="inline-flex shrink-0">
+          <ShieldAlert className="h-3 w-3 text-amber-600 dark:text-amber-400/80" />
+        </Tooltip>
+      )}
+    </>
+  )
+}

package/src/components/helm/ChartBrowser.tsx

@@ -1,13 +1,14 @@
 import { useState, useMemo } from 'react'
 import { Search, RefreshCw, Package, Database, AlertCircle, ExternalLink, ChevronDown, Star, Shield, BadgeCheck, Building2, Globe, ArrowUpDown, FileJson, PenTool } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { PaneLoader, Input } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
-import { useHelmRepositories, useSearchCharts, useUpdateRepository, useArtifactHubSearch, type ArtifactHubSortOption } from '../../api/client'
+import { useHelmRepositories, useSearchCharts, useUpdateRepository, useUpdateRepositorySilent, useArtifactHubSearch, type ArtifactHubSortOption } from '../../api/client'
 import { useCanHelmWrite } from '../../contexts/CapabilitiesContext'
 import type { ChartInfo, HelmRepository, ArtifactHubChart, ChartSource } from '../../types'
 import { formatAge } from './helm-utils'
 import { SEVERITY_BADGE } from '../../utils/badge-colors'
 import { Tooltip } from '../ui/Tooltip'
+import { useToast } from '../ui/Toast'
 
 interface ChartBrowserProps {
   onChartSelect: (repo: string, chart: string, version: string, source: ChartSource) => void
@@ -26,7 +27,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
 
   // Repo refresh is gated only by `requireHelmWrite` on the backend
   // (handleUpdateRepository deliberately skips requireCloudRole — it
-  // mutates pod-local chart cache, not cluster state). So the SPA gate
+  // mutates pod-local chart cache, not cluster state). So the frontend gate
   // here must NOT include the Cloud role check, or Cloud viewers with
   // rbac.helm=true would be blocked from a refresh the backend allows.
   const canHelmWrite = useCanHelmWrite()
@@ -66,21 +67,54 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
     return groups
   }, [filteredLocalCharts])
 
+  // Silent variant for the bulk path so the global MutationCache
+  // doesn't fire a per-call "Failed to update repository" toast
+  // — handleUpdateAllRepos surfaces a single aggregate toast
+  // that names the failed repos.
+  const updateRepoSilentMutation = useUpdateRepositorySilent()
+  const { showError, showSuccess } = useToast()
+  // updateRepoSilentMutation.isPending flips to false BETWEEN
+  // sequential mutateAsync calls, briefly re-enabling the bulk
+  // button mid-loop. Track the whole-batch state explicitly so
+  // the user can't kick off a second concurrent batch.
+  const [isBatchUpdating, setIsBatchUpdating] = useState(false)
+
   const handleUpdateRepo = async (repoName: string) => {
     await updateRepoMutation.mutateAsync(repoName)
     refetchCharts()
   }
 
   const handleUpdateAllRepos = async () => {
-    if (!repositories) return
-    for (const repo of repositories) {
-      try {
-        await updateRepoMutation.mutateAsync(repo.name)
-      } catch {
-        // Continue with other repos
+    if (!repositories || repositories.length === 0 || isBatchUpdating) return
+    setIsBatchUpdating(true)
+    const failed: string[] = []
+    try {
+      for (const repo of repositories) {
+        try {
+          await updateRepoSilentMutation.mutateAsync(repo.name)
+        } catch (err) {
+          failed.push(repo.name)
+          console.warn(`helm repo update failed for "${repo.name}":`, err)
+        }
       }
+    } finally {
+      setIsBatchUpdating(false)
     }
     refetchCharts()
+    const ok = repositories.length - failed.length
+    if (failed.length === 0) {
+      showSuccess(`Updated ${ok} ${ok === 1 ? 'repository' : 'repositories'}`)
+    } else if (ok === 0) {
+      showError(
+        `Failed to update ${failed.length} ${failed.length === 1 ? 'repository' : 'repositories'}`,
+        `Failed: ${failed.join(', ')}`,
+      )
+    } else {
+      showError(
+        `Updated ${ok}/${repositories.length} repositories`,
+        `Failed: ${failed.join(', ')}`,
+      )
+    }
   }
 
   const isLoading = chartSource === 'local' ? chartsLoading : artifactHubLoading
@@ -148,7 +182,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                   onClick={() => { setSelectedRepo('all'); setRepoDropdownOpen(false) }}
                   className={clsx(
                     'w-full px-3 py-2 text-left text-sm hover:bg-theme-hover flex items-center justify-between',
-                    selectedRepo === 'all' ? 'text-blue-400' : 'text-theme-text-primary'
+                    selectedRepo === 'all' ? 'text-accent' : 'text-theme-text-primary'
                   )}
                 >
                   <span>All Repositories</span>
@@ -156,7 +190,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 </button>
                 <div className="border-t border-theme-border my-1" />
                 {reposLoading ? (
-                  <div className="px-3 py-2 text-sm text-theme-text-tertiary">Loading...</div>
+                  <div className="px-3 py-2 text-sm text-theme-text-tertiary">Loading…</div>
                 ) : repositories?.length === 0 ? (
                   <div className="px-3 py-2 text-sm text-theme-text-tertiary">No repositories configured</div>
                 ) : (
@@ -186,9 +220,9 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 type="checkbox"
                 checked={showOfficialOnly}
                 onChange={(e) => setShowOfficialOnly(e.target.checked)}
-                className="rounded border-theme-border text-blue-500 focus:ring-blue-500"
+                className="rounded border-theme-border text-accent focus:ring-accent"
               />
-              <BadgeCheck className="w-3.5 h-3.5 text-blue-400" />
+              <BadgeCheck className="w-3.5 h-3.5 text-accent" />
               Official
             </label>
             <label className="flex items-center gap-1.5 text-sm text-theme-text-secondary">
@@ -196,7 +230,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 type="checkbox"
                 checked={showVerifiedOnly}
                 onChange={(e) => setShowVerifiedOnly(e.target.checked)}
-                className="rounded border-theme-border text-blue-500 focus:ring-blue-500"
+                className="rounded border-theme-border text-accent focus:ring-accent"
               />
               <Shield className="w-3.5 h-3.5 text-green-400" />
               Verified
@@ -207,7 +241,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
               <select
                 value={artifactHubSort}
                 onChange={(e) => setArtifactHubSort(e.target.value as ArtifactHubSortOption)}
-                className="bg-theme-elevated border border-theme-border-light rounded px-2 py-1 text-sm text-theme-text-primary focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="bg-theme-elevated border border-theme-border-light rounded px-2 py-1 text-sm text-theme-text-primary focus:outline-none focus:ring-2 focus:ring-accent"
               >
                 <option value="relevance">Relevance</option>
                 <option value="stars">Stars</option>
@@ -220,12 +254,11 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
         {/* Search */}
         <div className="flex-1 relative">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-          <input
-            type="text"
+          <Input
             placeholder={chartSource === 'local' ? "Search charts..." : "Search ArtifactHub..."}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full max-w-md pl-10 pr-4 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full max-w-md pl-10 pr-4 py-2 bg-theme-elevated border border-theme-border-light rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-accent"
           />
         </div>
 
@@ -237,7 +270,7 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                 type="checkbox"
                 checked={showAllVersions}
                 onChange={(e) => setShowAllVersions(e.target.checked)}
-                className="rounded border-theme-border text-blue-500 focus:ring-blue-500"
+                className="rounded border-theme-border text-accent focus:ring-accent"
               />
               All versions
             </label>
@@ -246,10 +279,10 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
             <Tooltip content={canHelmWrite ? "Update all repositories" : helmWriteReason}>
               <button
                 onClick={handleUpdateAllRepos}
-                disabled={updateRepoMutation.isPending || !canHelmWrite}
+                disabled={isBatchUpdating || !canHelmWrite}
                 className="p-2 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg disabled:opacity-50"
               >
-                <RefreshCw className={clsx('w-4 h-4', updateRepoMutation.isPending && 'animate-spin')} />
+                <RefreshCw className={clsx('w-4 h-4', isBatchUpdating && 'animate-spin')} />
               </button>
             </Tooltip>
           </>
@@ -273,14 +306,32 @@ export function ChartBrowser({ onChartSelect }: ChartBrowserProps) {
                   <div className="text-sm mt-1">
                     <p>No Helm repositories configured.</p>
                     <p className="mt-1">
-                      Add repositories using <code className="bg-theme-elevated px-1 rounded">helm repo add</code>
+                      Add repositories using <code className="inline-code">helm repo add</code>
                     </p>
                     <p className="mt-2">
-                      Or try searching on <button onClick={() => setChartSource('artifacthub')} className="text-blue-400 hover:underline">ArtifactHub</button>
+                      Or try searching on <button onClick={() => setChartSource('artifacthub')} className="text-accent-text hover:underline">ArtifactHub</button>
                     </p>
                   </div>
                 ) : (
-                  <p className="text-sm mt-1">Try updating your repositories</p>
+                  <div className="text-sm mt-1 flex flex-col items-center gap-2">
+                    <p>Your repositories may be out of date.</p>
+                    <Tooltip content={canHelmWrite ? 'Run helm repo update on every configured repository' : helmWriteReason}>
+                    <button
+                      onClick={handleUpdateAllRepos}
+                      disabled={isBatchUpdating || !canHelmWrite}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs btn-brand rounded disabled:opacity-50 disabled:pointer-events-none"
+                    >
+                      <RefreshCw className={`w-3.5 h-3.5 ${isBatchUpdating ? 'animate-spin' : ''}`} />
+                      {isBatchUpdating ? 'Updating…' : 'Update all repositories'}
+                    </button>
+                    </Tooltip>
+                    <button
+                      onClick={() => setChartSource('artifacthub')}
+                      className="text-xs text-blue-400 hover:underline"
+                    >
+                      Or browse ArtifactHub instead
+                    </button>
+                  </div>
                 )}
               </div>
             </div>
@@ -375,7 +426,7 @@ function RepoDropdownItem({ repo, isSelected, onSelect, onUpdate, isUpdating, ca
         onClick={onSelect}
         className={clsx(
           'flex-1 text-left text-sm truncate',
-          isSelected ? 'text-blue-400' : 'text-theme-text-primary'
+          isSelected ? 'text-accent' : 'text-theme-text-primary'
         )}
       >
         {repo.name}
@@ -385,14 +436,15 @@ function RepoDropdownItem({ repo, isSelected, onSelect, onUpdate, isUpdating, ca
           </span>
         )}
       </button>
+      <Tooltip content={canUpdate ? "Update repository" : (cantUpdateReason ?? "Helm write permissions required")}>
       <button
         onClick={(e) => { e.stopPropagation(); onUpdate() }}
         disabled={isUpdating || !canUpdate}
-        className="p-1 text-theme-text-tertiary hover:text-theme-text-primary opacity-0 group-hover:opacity-100 transition-opacity disabled:opacity-50"
-        title={canUpdate ? "Update repository" : (cantUpdateReason ?? "Helm write permissions required")}
+        className="p-1 text-theme-text-tertiary hover:text-theme-text-primary opacity-0 group-hover:opacity-100 transition-opacity disabled:opacity-50 disabled:pointer-events-none"
       >
         <RefreshCw className={clsx('w-3.5 h-3.5', isUpdating && 'animate-spin')} />
       </button>
+      </Tooltip>
     </div>
   )
 }
@@ -413,7 +465,7 @@ function LocalChartCard({ chart, onSelect }: LocalChartCardProps) {
           <img
             src={chart.icon}
             alt=""
-            className="w-10 h-10 rounded object-contain bg-white/10 p-1"
+            className="w-10 h-10 rounded object-contain bg-theme-elevated p-1"
             onError={(e) => {
               (e.target as HTMLImageElement).style.display = 'none'
             }}
@@ -425,7 +477,9 @@ function LocalChartCard({ chart, onSelect }: LocalChartCardProps) {
         )}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
-            <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+            <Tooltip content={chart.name} wrapperClassName="min-w-0 flex-1">
+              <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+            </Tooltip>
             {chart.deprecated && (
               <span className={clsx('px-1 py-0.5 text-[10px] rounded', SEVERITY_BADGE.warning)}>
                 deprecated
@@ -476,7 +530,7 @@ function ArtifactHubChartCard({ chart, onSelect }: ArtifactHubChartCardProps) {
           <img
             src={chart.logoUrl}
             alt=""
-            className="w-12 h-12 rounded object-contain bg-white/10 p-1 shrink-0"
+            className="w-12 h-12 rounded object-contain bg-theme-elevated p-1 shrink-0"
             onError={(e) => {
               (e.target as HTMLImageElement).style.display = 'none'
             }}
@@ -489,7 +543,9 @@ function ArtifactHubChartCard({ chart, onSelect }: ArtifactHubChartCardProps) {
 
         {/* Name and org */}
         <div className="flex-1 min-w-0">
-          <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+          <Tooltip content={chart.name} wrapperClassName="w-full">
+            <h4 className="text-sm font-medium text-theme-text-primary truncate">{chart.name}</h4>
+          </Tooltip>
           <div className="flex items-center gap-2 mt-0.5 text-xs text-theme-text-tertiary">
             <span className="flex items-center gap-1">
               <Building2 className="w-3 h-3" />