@skyhook-io/radar-app 1.8.6 → 1.8.8

package/src/components/gitops/GitOpsView.tsx

@@ -19,6 +19,7 @@ import {
   formatGitOpsSourceUrl,
   getGitOpsResourceStatus,
   getGitOpsTool,
+  isArgoOperationInProgress,
   isArgoSuspendedByRadar,
   gitOpsInsightChangeKey,
   initNavigationMap,
@@ -46,8 +47,10 @@ import { useToast } from '../ui/Toast'
 
 import {
   fetchJSON,
+  buildArgoResourceSyncVars,
   useApplyResource,
   useArgoRefresh,
+  useArgoResourceValidation,
   useArgoResume,
   useArgoRollback,
   useArgoSuspend,
@@ -66,6 +69,8 @@ import { useConnection } from '../../context/ConnectionContext'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
 import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
 import { CodeViewer } from '../ui/CodeViewer'
+import { ArgoResourceDiffLoader } from './ArgoResourceDiffLoader'
+import { RevisionMetaChip } from './RevisionMetaChip'
 import type { GitOpsHistoryItem } from '@skyhook-io/k8s-ui'
 
 const GITOPS_KINDS: APIResource[] = [
@@ -80,6 +85,10 @@ const GITOPS_KINDS: APIResource[] = [
   { name: 'alerts', kind: 'Alert', group: 'notification.toolkit.fluxcd.io', version: 'v1beta3', namespaced: true, verbs: ['list', 'get'], isCrd: true },
 ]
 
+type ArgoSyncDialogTarget =
+  | { scope: 'application' }
+  | { scope: 'resource'; resource: GitOpsInsightRef }
+
 const KIND_BY_NAME = new Map(GITOPS_KINDS.map((k) => [k.name, k]))
 
 // Rows are the table's primary content; their poll cadence is what the toolbar
@@ -97,12 +106,15 @@ interface GitOpsViewProps {
   namespaces: string[]
   onOpenResource: (resource: SelectedResource) => void
   onClearNamespaces?: () => void
+  // Opens the global Settings dialog — backs the "Connect Argo CD" hint on the
+  // Changes tab of an Argo Application detail page.
+  onOpenSettings?: () => void
 }
 
-export function GitOpsView({ namespaces, onOpenResource, onClearNamespaces }: GitOpsViewProps) {
+export function GitOpsView({ namespaces, onOpenResource, onClearNamespaces, onOpenSettings }: GitOpsViewProps) {
   const location = useLocation()
   if (location.pathname.startsWith('/gitops/detail/')) {
-    return <GitOpsDetailView namespaces={namespaces} onOpenResource={onOpenResource} />
+    return <GitOpsDetailView namespaces={namespaces} onOpenResource={onOpenResource} onOpenSettings={onOpenSettings} />
   }
   return <GitOpsTableView namespaces={namespaces} onClearNamespaces={onClearNamespaces} />
 }
@@ -329,7 +341,7 @@ function GitOpsTableView({ namespaces, onClearNamespaces }: { namespaces: string
   )
 }
 
-function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
+function GitOpsDetailView({ namespaces, onOpenResource, onOpenSettings }: GitOpsViewProps) {
   const location = useLocation()
   const navigate = useNavigate()
   const { showError, showSuccess } = useToast()
@@ -403,6 +415,7 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   const [helmValuesOpen, setHelmValuesOpen] = useState(false)
 
   const argoSync = useArgoSync()
+  const argoResourceValidation = useArgoResourceValidation()
   const argoRefresh = useArgoRefresh()
   const argoTerminate = useArgoTerminate()
   const argoSuspend = useArgoSuspend()
@@ -414,13 +427,23 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   const fluxSuspend = useFluxSuspend()
   const fluxResume = useFluxResume()
 
-  const [syncDialogOpen, setSyncDialogOpen] = useState(false)
+  const [syncDialogTarget, setSyncDialogTarget] = useState<ArgoSyncDialogTarget | null>(null)
   // Doubles as the "open" flag (truthy = dialog open) and the data carrier
   // for which history entry to roll back to.
   const [rollbackTarget, setRollbackTarget] = useState<GitOpsHistoryItem | null>(null)
   // Disambiguates which refresh button is in flight (both share argoRefresh).
   const [refreshKind, setRefreshKind] = useState<'normal' | 'hard'>('normal')
 
+  function openArgoSyncDialog(target: ArgoSyncDialogTarget) {
+    argoResourceValidation.reset()
+    setSyncDialogTarget(target)
+  }
+
+  function closeArgoSyncDialog() {
+    argoResourceValidation.reset()
+    setSyncDialogTarget(null)
+  }
+
   const detailRow = resourceQ.data ? normalizeDetailResource(kind, group, resourceQ.data) : null
   const tree = treeQ.data ?? null
   const helmValues = useMemo(() => extractHelmValues(kind, resourceQ.data), [kind, resourceQ.data])
@@ -436,6 +459,13 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   function openResourceFromTree(ref: GitOpsTreeRef | GitOpsInsightRef) {
     if (isGitOpsDetailRef(ref) && isValidKubernetesName(ref.name)) {
       const detailKind = kindToPlural(ref.kind)
+      // The tree's root node is this page's own subject — clicking it must not
+      // open a nested copy of the same detail page (which stacks an identical
+      // "GitOps / X / X" breadcrumb, and again, ad infinitum). A self-reference
+      // is a no-op; the header already represents this resource.
+      if (detailKind === kind && (ref.namespace || '') === (namespace || '') && ref.name === name) {
+        return
+      }
       const params = new URLSearchParams()
       if (ref.group) params.set('apiGroup', ref.group)
       // Lineage breadcrumb support: when the user opens a child GitOps CR
@@ -457,13 +487,14 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   }
 
   const isRunning = resourceQ.data?.status?.operationState?.phase === 'Running'
+  const operationInProgress = isArgoOperationInProgress(resourceQ.data)
   const isFluxWorkload = kind === 'kustomizations' || kind === 'helmreleases'
   const isFlux = tool === 'flux'
   const isArgoApp = kind === 'applications'
 
   // Detail-page shortcuts. Skip when a modal is already open so a stray "s"
   // in an input field doesn't pop another sync dialog.
-  const shortcutsEnabled = !syncDialogOpen && !rollbackTarget
+  const shortcutsEnabled = !syncDialogTarget && !rollbackTarget
   useRegisterShortcut({
     id: 'gitops-detail-sync',
     keys: 's',
@@ -471,11 +502,11 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
     category: 'GitOps',
     scope: 'gitops',
     handler: () => {
-      if (effectiveSuspended || terminating) return
-      if (isArgoApp) setSyncDialogOpen(true)
+      if (effectiveSuspended || terminating || operationInProgress) return
+      if (isArgoApp) openArgoSyncDialog({ scope: 'application' })
       else if (isFlux) fluxReconcile.mutate({ kind, namespace, name })
     },
-    enabled: shortcutsEnabled && (isArgoApp || isFlux) && !effectiveSuspended && !terminating,
+    enabled: shortcutsEnabled && (isArgoApp || isFlux) && !effectiveSuspended && !terminating && !(isArgoApp && operationInProgress),
   })
   useRegisterShortcut({
     id: 'gitops-detail-refresh',
@@ -529,7 +560,7 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
   }
 
   const argoHandlers: ArgoActionHandlers | undefined = isArgoApp ? {
-    onSyncRequested: () => setSyncDialogOpen(true),
+    onSyncRequested: () => openArgoSyncDialog({ scope: 'application' }),
     onRefresh: (refreshType) => {
       setRefreshKind(refreshType)
       argoRefresh.mutate({ namespace, name, hard: refreshType === 'hard' })
@@ -545,6 +576,7 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
     resuming: argoResume.isPending,
     autoSyncEnabled: argoAutoSyncEnabled,
     isRunning,
+    operationInProgress,
   } : undefined
 
   const fluxHandlers: FluxActionHandlers | undefined = isFlux ? {
@@ -576,6 +608,13 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
       detail={detail}
       insight={insightsQ.data ?? null}
       insightLoading={insightsQ.isLoading}
+      renderRevisionMeta={
+        isArgoApp && insightsQ.data?.capabilities?.revisionMetadataAvailable
+          ? (revision) => (
+              <RevisionMetaChip appNamespace={namespace} appName={name} revision={revision} />
+            )
+          : undefined
+      }
       onSelectIssue={(issue) => {
         const ref = issue.refs?.[0]
         if (!ref) return
@@ -679,7 +718,7 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
             <GitOpsActivityInsightView
               insight={insightsQ.data}
               error={insightsQ.error as Error | null}
-              onRollback={isArgoApp ? (item) => {
+              onRollback={isArgoApp && !operationInProgress ? (item) => {
                 if (parseArgoRollbackID(item.id) == null) return
                 setRollbackTarget(item)
               } : undefined}
@@ -692,8 +731,22 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
               insight={insightsQ.data}
               error={insightsQ.error as Error | null}
               onOpenResource={openResourceFromTree}
+              onSyncResource={isArgoApp ? (resource) => openArgoSyncDialog({ scope: 'resource', resource }) : undefined}
+              syncResourceDisabledReason={isArgoApp ? (
+                terminating
+                  ? terminatingActionTooltip
+                  : effectiveSuspended
+                    ? 'Resume the Application before syncing a resource.'
+                    : operationInProgress || argoSync.isPending
+                      ? 'Wait for the current sync operation to finish.'
+                      : undefined
+              ) : undefined}
               focusKey={changesFocusKey}
               tree={tree}
+              renderResourceDiff={isArgoApp ? (ref) => (
+                <ArgoResourceDiffLoader appNamespace={namespace} appName={name} resourceRef={ref} />
+              ) : undefined}
+              onOpenSettings={onOpenSettings}
             />
           )
         }
@@ -739,13 +792,27 @@ function GitOpsDetailView({ namespaces, onOpenResource }: GitOpsViewProps) {
       {isArgoApp && (
         <>
           <SyncOptionsDialog
-            open={syncDialogOpen}
+            open={!!syncDialogTarget}
             appLabel={`${namespace}/${name}`}
+            resource={syncDialogTarget?.scope === 'resource' ? syncDialogTarget.resource : undefined}
             pending={argoSync.isPending}
-            onCancel={() => setSyncDialogOpen(false)}
+            autoSyncEnabled={argoAutoSyncEnabled}
+            validationPending={argoResourceValidation.isPending}
+            operationInProgress={operationInProgress}
+            validationResult={argoResourceValidation.data}
+            validationError={argoResourceValidation.error?.message}
+            onCancel={closeArgoSyncDialog}
+            onValidationReset={() => argoResourceValidation.reset()}
+            onValidate={syncDialogTarget?.scope === 'resource' ? (opts) => {
+              argoResourceValidation.mutate(buildArgoResourceSyncVars(namespace, name, syncDialogTarget.resource, opts))
+            } : undefined}
             onConfirm={(opts) => {
-              argoSync.mutate({ namespace, name, ...opts }, {
-                onSettled: () => setSyncDialogOpen(false),
+              if (!syncDialogTarget) return
+              const variables = syncDialogTarget.scope === 'resource'
+                ? buildArgoResourceSyncVars(namespace, name, syncDialogTarget.resource, opts)
+                : { namespace, name, ...opts }
+              argoSync.mutate(variables, {
+                onSettled: closeArgoSyncDialog,
               })
             }}
           />

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,6 +1,6 @@
 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, useUpdateRepositorySilent, useArtifactHubSearch, type ArtifactHubSortOption } from '../../api/client'
 import { useCanHelmWrite } from '../../contexts/CapabilitiesContext'
@@ -254,8 +254,7 @@ 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)}

package/src/components/helm/HelmCompareRoute.tsx

@@ -17,7 +17,7 @@ import {
   Package,
   Settings,
 } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { PaneLoader, DiffLine, hasDiffBodyChange } from '@skyhook-io/k8s-ui'
 import {
   useCloudRole,
   useHelmHooksDiff,
@@ -30,7 +30,6 @@ import {
 import type { HelmHook, HelmRevision, HooksDiff, ResourceDiff } from '../../types'
 import { getHelmStatusColor, getKindBadgeColor, SEVERITY_BADGE } from '../../utils/badge-colors'
 import { formatDate } from './helm-utils'
-import { DiffLine, hasDiffBodyChange } from './ManifestDiffViewer'
 import { RoleGatedPanel } from './RoleGatedPanel'
 import { Tooltip } from '../ui/Tooltip'
 

package/src/components/helm/HelmReleaseDrawer.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { isUpgradeSourceIssueActionable } from './HelmReleaseDrawer'
+
+describe('isUpgradeSourceIssueActionable', () => {
+  it('keeps classic repository ambiguity informational', () => {
+    expect(isUpgradeSourceIssueActionable('ambiguous_repository')).toBe(false)
+  })
+
+  it('lets OCI registration help untracked and repo-index states', () => {
+    expect(isUpgradeSourceIssueActionable('untracked')).toBe(true)
+    expect(isUpgradeSourceIssueActionable('repo_index_error')).toBe(true)
+  })
+
+  it('does not treat a missing reason code as actionable', () => {
+    expect(isUpgradeSourceIssueActionable(undefined)).toBe(false)
+  })
+})