@skyhook-io/k8s-ui 1.18.2 → 1.20.0

package/src/components/compare/ResourceCompareView.test.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { ResourceCompareView, type ResourceCompareViewProps } from './ResourceCompareView'
+
+vi.mock('../ui/YamlEditor', () => ({ YamlDiffEditor: () => null }))
+
+const checkout = { kind: 'Deployment', namespace: 'shop', name: 'checkout' }
+
+function header(props: Partial<ResourceCompareViewProps>) {
+  const html = renderToStaticMarkup(
+    <ResourceCompareView a={checkout} b={checkout} aData={{}} bData={{}} onSwap={() => {}} onClose={() => {}} {...props} />,
+  )
+  // Tags split the name from its namespace, so compare the text a reader sees.
+  const host = document.createElement('div')
+  host.innerHTML = html
+  return host.textContent ?? ''
+}
+
+describe('ResourceCompareView sides', () => {
+  it('names the resource once and tells the sides apart by where they run', () => {
+    const text = header({ aSubtitle: 'payments-eu', bSubtitle: 'payments-us' })
+    expect(text.split('shop/checkout')).toHaveLength(2)
+    expect(text).toContain('payments-eu')
+    expect(text).toContain('payments-us')
+  })
+
+  it('keeps a cut-off location readable on hover', () => {
+    const html = renderToStaticMarkup(
+      <ResourceCompareView a={checkout} b={checkout} aData={{}} bData={{}} onSwap={() => {}} onClose={() => {}} aSubtitle="payments-eu" bSubtitle="payments-us" />,
+    )
+    expect(html).toContain('title="payments-eu"')
+    expect(html).toContain('title="payments-us"')
+  })
+
+  it('names both sides when they are different resources', () => {
+    const text = header({ b: { ...checkout, name: 'billing' }, aSubtitle: 'payments-eu', bSubtitle: 'payments-eu' })
+    expect(text).toContain('shop/checkout')
+    expect(text).toContain('shop/billing')
+  })
+
+  it('keeps names when the same kind and name come from different API groups', () => {
+    const text = header({ a: { ...checkout, group: 'apps' }, b: { ...checkout, group: 'example.com' }, aSubtitle: 'eu', bSubtitle: 'us' })
+    expect(text.split('shop/checkout')).toHaveLength(3)
+  })
+
+  it('keeps names when both sides come from the same place', () => {
+    expect(header({ aSubtitle: 'payments-eu', bSubtitle: 'payments-eu' }).split('shop/checkout')).toHaveLength(3)
+  })
+
+  it('keeps names with no location to show', () => {
+    expect(header({}).split('shop/checkout')).toHaveLength(3)
+  })
+})

package/src/components/compare/ResourceCompareView.tsx

@@ -59,12 +59,15 @@ function ResourcePill({
   error,
   onChange,
   subtitle,
+  subtitleOnly,
 }: {
   resource: CompareResourceRef
   side: CompareSide
   error?: string
   onChange?: () => void
   subtitle?: string
+  /** Both sides are the same resource, so where it runs is all that tells them apart. */
+  subtitleOnly?: boolean
 }) {
   const tones = SIDE_TONES[side]
   const errTone = 'border-red-400/50 bg-red-500/10'
@@ -82,13 +85,19 @@ function ResourcePill({
         {label}
       </span>
       {error && <AlertTriangle className="w-3 h-3 text-red-400 shrink-0" aria-hidden />}
-      <span className={clsx('truncate min-w-0', error ? 'text-red-300' : 'text-theme-text-primary')}>
-        {resource.namespace && <span className="opacity-60">{resource.namespace}/</span>}
-        {resource.name}
-        {subtitle && (
-          <span className="opacity-60 ml-1" aria-label={`Source: ${subtitle}`}>
-            · {subtitle}
-          </span>
+      <span className={clsx('truncate min-w-0', error ? 'text-red-300' : 'text-theme-text-primary')} title={subtitleOnly ? subtitle : undefined}>
+        {subtitleOnly ? (
+          subtitle
+        ) : (
+          <>
+            {resource.namespace && <span className="opacity-60">{resource.namespace}/</span>}
+            {resource.name}
+            {subtitle && (
+              <span className="opacity-60 ml-1" aria-label={`Source: ${subtitle}`}>
+                · {subtitle}
+              </span>
+            )}
+          </>
         )}
       </span>
       {onChange && (
@@ -144,6 +153,10 @@ export function ResourceCompareView({
   // blank the editor. When the A/B identity changes (navigating to a
   // new pair on the same route), the latch resets so the loader shows
   // again until the new fetches settle.
+  // The same resource from two places: say what it is once, up top, so the pills
+  // can show the one thing that differs. Long names no longer push that out of view.
+  const sameResource = a.kind === b.kind && a.group === b.group && a.namespace === b.namespace && a.name === b.name &&
+    Boolean(aSubtitle && bSubtitle) && aSubtitle !== bSubtitle
   const settleKey = `${a.kind}|${a.namespace}|${a.name}|${a.group ?? ''}|${aSubtitle ?? ''}` +
     `|${b.kind}|${b.namespace}|${b.name}|${b.group ?? ''}|${bSubtitle ?? ''}`
   const settleKeyRef = useRef(settleKey)
@@ -160,15 +173,25 @@ export function ResourceCompareView({
     <div className="flex-1 min-w-0 flex flex-col h-full bg-theme-base">
       <div className="h-0.5 w-full bg-gradient-to-r from-blue-400/70 via-skyhook-400/40 to-emerald-400/70" />
 
-      <div className="flex items-center gap-3 px-4 py-2.5 border-b border-theme-border bg-theme-surface">
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2.5 border-b border-theme-border bg-theme-surface">
         <GitCompare className="w-5 h-5 text-skyhook-400 shrink-0" />
-        <h2 className="text-sm font-semibold text-theme-text-primary shrink-0 whitespace-nowrap">
+        <h2 className={clsx('text-sm font-semibold text-theme-text-primary whitespace-nowrap', sameResource ? 'min-w-0 max-w-[30%] truncate' : 'shrink-0')}>
           Compare <span className="text-theme-text-tertiary mx-0.5">·</span>{' '}
           <span className="text-theme-text-secondary font-medium">{kindLabel}</span>
+          {sameResource && (
+            <>
+              <span className="text-theme-text-tertiary mx-0.5">·</span>{' '}
+              <span className="text-theme-text-secondary font-medium" title={`${a.namespace}/${a.name}`}>
+                {a.namespace && <span className="opacity-60">{a.namespace}/</span>}
+                {a.name}
+              </span>
+            </>
+          )}
         </h2>
 
-        <div className="flex items-center gap-2 min-w-0 flex-1">
-          <ResourcePill resource={a} side="a" error={aError} onChange={onChangeA} subtitle={aSubtitle} />
+        {/* The row wraps before the sides get too narrow to tell apart. */}
+        <div className="flex items-center gap-2 min-w-72 flex-1">
+          <ResourcePill resource={a} side="a" error={aError} onChange={onChangeA} subtitle={aSubtitle} subtitleOnly={sameResource} />
           <Tooltip content="Swap A and B">
             <button
               onClick={onSwap}
@@ -177,7 +200,7 @@ export function ResourceCompareView({
               <ArrowLeftRight className="w-3.5 h-3.5" />
             </button>
           </Tooltip>
-          <ResourcePill resource={b} side="b" error={bError} onChange={onChangeB} subtitle={bSubtitle} />
+          <ResourcePill resource={b} side="b" error={bError} onChange={onChangeB} subtitle={bSubtitle} subtitleOnly={sameResource} />
         </div>
 
         <div className="flex items-center gap-1 shrink-0">

package/src/components/gitops/GitOpsDetailLayout.test.tsx

@@ -22,6 +22,21 @@ const shell: Omit<GitOpsDetailLayoutProps, 'identity' | 'isArgoApp'> = {
 }
 
 describe('GitOpsDetailLayout', () => {
+  it.each([false, true])('shows tree limits without insights, including fullscreen=%s', (fullscreen) => {
+    const warning = 'Some generated resources could not be checked; the resource tree may be incomplete.'
+    const html = renderToString(
+      <GitOpsDetailLayout
+        {...shell}
+        identity={{ kind: 'applications', group: 'argoproj.io', namespace: 'shop', name: 'wordpress', kindLabel: 'Application' }}
+        isArgoApp
+        fullscreen={fullscreen}
+        warnings={[warning, warning]}
+      />,
+    )
+    expect(html).toContain('Limited resource view')
+    expect(html.split(warning)).toHaveLength(2)
+  })
+
   it('shows the tool chip, facts and Argo operations for an Argo CD Application', () => {
     const html = renderToString(
       <GitOpsDetailLayout
@@ -39,6 +54,7 @@ describe('GitOpsDetailLayout', () => {
     expect(html).toContain('ArgoCD')
     expect(html).toContain('Project')
     expect(html).toContain('Sync…')
+    expect(html).not.toContain('Limited resource view')
   })
 
   // A root that is not a GitOps resource gets one state: its name and why

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -2,12 +2,28 @@ import { useEffect, type ComponentType, type ReactNode } from 'react'
 import { ArrowDownUp, Clock3, GitBranch, GitCommit, Loader2, Pause, Play, RefreshCw, Settings, Trash2, XCircle, Zap } from 'lucide-react'
 import { Collapse, CollapseChevron, useDisclosure } from '../ui/Collapse'
 import { PaneLoader } from '../ui/PaneLoader'
+import { AlertBanner } from '../ui/drawer-components'
 
 import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
 import { GitOpsIssuesBand, GitOpsStatusStrip } from './insights'
 import { GitOpsHealthSourceNotice } from './GitOpsHealthSourceNotice'
 import { Tooltip } from '../ui/Tooltip'
+import { RadarUpgradeNote, radarUpgradeNoteText } from '../ui/RadarUpgradeNote'
 import type { GitOpsHealthStatus, GitOpsInsight, GitOpsIssue, GitOpsRemediation, SyncStatus } from '../../types'
+import type { RadarUpgradeRequirement } from '../../types/fetch-error'
+
+function argoAutoSyncControllerNote(controller: ArgoActionHandlers['autoSyncController']): string {
+  if (!controller) return ''
+  return controller.kind === 'ApplicationSet'
+    ? ` ApplicationSet ${controller.name} can turn it back on; to keep it off, change the ApplicationSet's template.`
+    : ` Application ${controller.name} manages this one from Git and can turn it back on when it syncs; to keep it off, change it in Git.`
+}
+
+function argoResumeDescription(suspended: boolean, settings: ArgoActionHandlers['resumeSettings']): string {
+  if (suspended) return 'Turn auto-sync back on with its current or saved settings.'
+  if (!settings) return 'Turn on automated sync, so Argo applies new commits from Git.'
+  return `Argo applies new commits${settings.selfHeal ? ' and reverts live edits (self-heal)' : ''}. Resources removed from Git are ${settings.prune ? 'deleted (prune on)' : 'kept (prune off)'}.`
+}
 
 // ---------------------------------------------------------------------------
 // Props
@@ -76,11 +92,22 @@ export interface ArgoActionHandlers {
   terminating: boolean
   suspending: boolean
   resuming: boolean
-  // autoSyncEnabled: caller derives from spec.syncPolicy.automated.
+  // autoSyncEnabled: caller derives via isArgoAutoSyncEnabled.
   autoSyncEnabled: boolean
   // isRunning: caller derives from status.operationState.phase === 'Running'.
   isRunning: boolean
   operationInProgress?: boolean
+  // Set when the connected Radar is too old to turn this app's auto-sync back
+  // on (isArgoAutoSyncSwitchedOff): Enable auto-sync renders disabled, with
+  // the upgrade note under the header.
+  resumeUpgrade?: RadarUpgradeRequirement | null
+  // What Enable auto-sync turns on when Radar didn't suspend the app
+  // (argoResumeSettings). Without it the tooltip makes no prune claim.
+  resumeSettings?: { prune: boolean; selfHeal: boolean } | null
+  resumeBlockedReason?: string
+  // The Argo CD object that can turn auto-sync back on after Disable
+  // (argoAutoSyncController); its tooltip names it.
+  autoSyncController?: { kind: 'ApplicationSet' | 'Application'; name: string } | null
 }
 
 export interface FluxActionHandlers {
@@ -125,6 +152,8 @@ export interface GitOpsDetailLayoutProps {
   // Insights — drives StatusStrip + IssuesBand
   insight: GitOpsInsight | null
   insightLoading: boolean
+  // Tree warnings are independent of the insights request's success.
+  warnings?: string[]
   // Issue interactions — caller wires onSelectIssue to jump to Changes tab
   // and highlight the affected resource.
   onSelectIssue?: (issue: GitOpsIssue) => void
@@ -229,6 +258,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
     detail,
     insight,
     insightLoading,
+    warnings,
     onSelectIssue,
     onRemediate,
     remediationPending,
@@ -280,6 +310,9 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
 
   const effectiveSuspended = status?.suspended ?? false
   const argoOperationInProgress = argo?.operationInProgress ?? argo?.isRunning ?? false
+  const argoSyncDisabled = effectiveSuspended || terminating || argoOperationInProgress
+  const resumeUpgrade = isArgoApp && argo && !argo.autoSyncEnabled ? argo.resumeUpgrade ?? null : null
+  const resumeBlockedReason = isArgoApp && argo && !argo.autoSyncEnabled ? argo.resumeBlockedReason : undefined
   // graphFullscreen hides everything chrome-side; the body region expands.
   // Mirrors the OSS GitOpsDetailView shell behavior so the visual chrome
   // class set carries through.
@@ -365,6 +398,8 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                   {detail.autoSyncMode && <AppFact label="Sync mode" value={detail.autoSyncMode} />}
                 </div>
               )}
+              {resumeBlockedReason && <p className="mt-2 text-xs text-theme-text-secondary">{resumeBlockedReason}</p>}
+              {resumeUpgrade && <RadarUpgradeNote requirement={resumeUpgrade} className="mt-2" />}
             </div>
             {/* Action buttons */}
             <div className="flex flex-wrap items-center gap-2">
@@ -376,7 +411,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                     icon={ArrowDownUp}
                     loading={argo.syncing}
                     onClick={argo.onSyncRequested}
-                    disabled={effectiveSuspended || terminating || argoOperationInProgress}
+                    disabled={argoSyncDisabled}
                     disabledReason={terminating
                       ? terminatingActionTooltip
                       : argoOperationInProgress
@@ -411,7 +446,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                   {argo.autoSyncEnabled ? (
                     <ActionButton
                       label="Disable auto-sync"
-                      description="Stop Argo from automatically syncing Git changes. Manual Sync still works."
+                      description={`Stop Argo from automatically syncing Git changes.${argoSyncDisabled ? '' : ' Manual Sync still works.'}${argoAutoSyncControllerNote(argo.autoSyncController)}`}
                       icon={Pause}
                       loading={argo.suspending}
                       onClick={argo.onSuspend}
@@ -421,12 +456,16 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
                   ) : (
                     <ActionButton
                       label="Enable auto-sync"
-                      description="Re-enable automatic syncing of Git changes to the cluster."
+                      description={argoResumeDescription(effectiveSuspended, argo.resumeSettings)}
                       icon={Play}
                       loading={argo.resuming}
-                      onClick={argo.onResume}
-                      disabled={terminating}
-                      disabledReason={terminating ? terminatingActionTooltip : undefined}
+                      onClick={() => !resumeBlockedReason && !resumeUpgrade && argo.onResume()}
+                      disabled={terminating || !!resumeUpgrade || !!resumeBlockedReason}
+                      disabledReason={terminating
+                        ? terminatingActionTooltip
+                        : resumeBlockedReason || (resumeUpgrade
+                          ? radarUpgradeNoteText(resumeUpgrade)
+                          : undefined)}
                     />
                   )}
                 </>
@@ -528,6 +567,14 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
         <div className="p-4 text-sm text-red-500">Failed to load GitOps view: {resourceError.message}</div>
       ) : (
         <div className={bodyShellClass}>
+          {((warnings?.length ?? 0) > 0 || (insight?.warnings?.length ?? 0) > 0) && (
+            <AlertBanner
+              variant="warning"
+              title="Limited resource view"
+              items={[...new Set([...(warnings ?? []), ...(insight?.warnings ?? [])])]}
+              className="shrink-0 rounded-none border-x-0 border-t-0"
+            />
+          )}
           <div className="flex shrink-0 items-center justify-between gap-3 border-b border-theme-border bg-theme-base px-4 py-2">
             <div className="flex items-center gap-1 rounded-md border border-theme-border bg-theme-surface p-1">
               <ViewButton active={activeTab === 'topology'} icon={GitBranch} label="Topology" onClick={() => onTabChange('topology')} />

package/src/components/gitops/GitOpsHealthSourceNotice.tsx

@@ -38,7 +38,7 @@ export const APP_TREE_API_ERROR_FINDINGS = 'Meanwhile, rows marked "Found by Rad
 export const APP_TREE_API_ERROR_NO_FINDINGS = "Radar didn't find a problem on its own."
 
 export const REMOTE_DESTINATION_NOTICE =
-  "This application deploys to a different cluster, so its resources aren't visible from here."
+  "The recorded resources aren't confirmed to belong to this cluster, so local health and generated resources aren't shown."
 export const REMOTE_FLUX_TARGET_NOTICE =
   "This applies its resources to a different cluster, so they aren't visible from here."
 

package/src/components/gitops/GitOpsTableView.tsx

@@ -34,9 +34,11 @@ import { FacetSection, FacetButton } from '../ui/Facet'
 import { SortableTh, TH_CLASS, type SortDir } from '../ui/SortableTh'
 import { DistributionBar } from '../ui/DistributionBar'
 import { RowActionMenu, type RowActionItem } from '../ui/RowActionMenu'
+import { radarUpgradeNoteText } from '../ui/RadarUpgradeNote'
+import type { RadarUpgradeRequirement } from '../../types/fetch-error'
 import { BoardTableSkeleton, BoardRailSkeleton } from '../ui/BoardSkeleton'
 import { getGitOpsResourceStatus } from './detail-helpers'
-import { isArgoOperationInProgress, isArgoSuspendedByRadar } from '../resources/resource-utils-argo'
+import { isArgoAutoSyncEnabled, isArgoAutoSyncSwitchedOff, isArgoOperationInProgress, isArgoSuspendedByRadar } from '../resources/resource-utils-argo'
 import { toggleSet } from './GitOpsGraphFilterRail'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import { parseContextName } from '../../utils/context-name'
@@ -288,6 +290,10 @@ export interface GitOpsTableViewProps {
   // In-flight action state, keyed by `row.id`. Drives the per-item
   // spinner so the user can tell which Sync/Refresh is still running.
   pendingRowActions?: Map<string, Set<GitOpsRowAction>>
+  // Set when the connected Radar is too old to turn auto-sync back on for an
+  // Application with automated.enabled: false; its Resume renders disabled.
+  argoResumeUpgrade?: RadarUpgradeRequirement | null
+  argoResumeBlockedReason?: string
 }
 
 // ----- Main component --------------------------------------------------------
@@ -330,6 +336,8 @@ export function GitOpsTableView({
   onClearNamespaces,
   onRowAction,
   pendingRowActions,
+  argoResumeUpgrade,
+  argoResumeBlockedReason,
   filtersSide = 'left',
 }: GitOpsTableViewProps) {
   const searchInputRef = useRef<HTMLInputElement>(null)
@@ -858,6 +866,8 @@ export function GitOpsTableView({
               destinationHrefFor={destinationHrefFor}
               onRowAction={onRowAction}
               pendingRowActions={pendingRowActions}
+              argoResumeUpgrade={argoResumeUpgrade}
+              argoResumeBlockedReason={argoResumeBlockedReason}
             />
           )}
         </div>
@@ -1292,6 +1302,8 @@ function GitOpsTable({
   destinationHrefFor,
   onRowAction,
   pendingRowActions,
+  argoResumeUpgrade,
+  argoResumeBlockedReason,
 }: {
   rows: GitOpsRow[]
   sort: { key: SortKey; dir: SortDir } | null
@@ -1303,6 +1315,8 @@ function GitOpsTable({
   destinationHrefFor?: (row: GitOpsRow, destination: FleetDestinationStamp) => string
   onRowAction?: (row: GitOpsRow, action: GitOpsRowAction) => void
   pendingRowActions?: Map<string, Set<GitOpsRowAction>>
+  argoResumeUpgrade?: RadarUpgradeRequirement | null
+  argoResumeBlockedReason?: string
 }) {
   const showActions = !!onRowAction
   return (
@@ -1409,7 +1423,7 @@ function GitOpsTable({
                   className="overflow-visible border-b border-theme-border px-2 py-2 text-right align-middle"
                   onClick={(e) => e.stopPropagation()}
                 >
-                  <RowActionMenu items={buildRowActionItems(row, onRowAction, pendingRowActions)} />
+                  <RowActionMenu items={buildRowActionItems(row, onRowAction, pendingRowActions, argoResumeUpgrade, argoResumeBlockedReason)} />
                 </td>
               )}
             </tr>
@@ -1424,10 +1438,12 @@ function GitOpsTable({
 // the row's tool (Argo vs Flux), current suspend state, terminating state,
 // and Argo's operationState.phase (used to gate the Terminate entry — only
 // shown while a sync is mid-flight, mirroring the detail-page condition).
-function buildRowActionItems(
+export function buildRowActionItems(
   row: GitOpsRow,
   onAction: (row: GitOpsRow, action: GitOpsRowAction) => void,
   pending?: Map<string, Set<GitOpsRowAction>>,
+  argoResumeUpgrade?: RadarUpgradeRequirement | null,
+  argoResumeBlockedReason?: string,
 ): RowActionItem[] {
   const inFlight = pending?.get(row.id)
   const isPending = (action: GitOpsRowAction) => inFlight?.has(action) ?? false
@@ -1480,13 +1496,16 @@ function buildRowActionItems(
       pending: isPending('hard-refresh'),
     })
     if (suspended) {
+      const resumeBlockedReason = isArgoAutoSyncSwitchedOff(row.raw)
+        ? argoResumeBlockedReason || (argoResumeUpgrade ? radarUpgradeNoteText(argoResumeUpgrade) : undefined)
+        : undefined
       items.push({
         key: 'resume',
         label: 'Resume',
         icon: Play,
-        onClick: () => onAction(row, 'resume'),
-        disabled: terminating,
-        disabledReason: terminating ? terminatingReason : undefined,
+        onClick: () => !resumeBlockedReason && onAction(row, 'resume'),
+        disabled: terminating || !!resumeBlockedReason,
+        disabledReason: terminating ? terminatingReason : resumeBlockedReason,
         pending: isPending('resume'),
         divider: true,
       })
@@ -2007,7 +2026,7 @@ export function normalizeArgoApplication(resource: any): GitOpsRow {
     destinationNamespace: resource.spec?.destination?.namespace ?? '',
     createdAt: resource.metadata?.creationTimestamp ?? '',
     lastSync: argoLastSync ?? '',
-    autoSync: Boolean(resource.spec?.syncPolicy?.automated),
+    autoSync: isArgoAutoSyncEnabled(resource),
     terminating: isTerminating(resource),
     terminationStartedAt: terminationStartedAt(resource),
     raw: resource,

package/src/components/gitops/RollbackDialog.test.tsx

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { RollbackDialog } from './RollbackDialog'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+let root: Root | undefined
+
+afterEach(async () => {
+  if (root) await act(async () => root?.unmount())
+  root = undefined
+  document.body.replaceChildren()
+})
+
+describe('RollbackDialog confirmation', () => {
+  it('explains rollback risk and keeps dry-run copy distinct', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    root = createRoot(host)
+    const onConfirm = vi.fn()
+    await act(async () => root?.render(
+      <RollbackDialog open appLabel="argocd/demo" revision="abc123" historyId="0" onCancel={() => {}} onConfirm={onConfirm} />,
+    ))
+    const dialog = document.querySelector<HTMLElement>('[role="dialog"]')!
+    expect(dialog.textContent).toContain('Auto-sync is off. Later changes can still cause drift. Syncing or enabling auto-sync deploys the current revision and can undo the rollback.')
+    expect(dialog.textContent).toContain("Delete tracked resources that aren't in the rollback target")
+    expect(dialog.textContent).toContain("Off by default. The target's resources are still applied; other tracked resources are kept.")
+    expect(dialog.textContent).toContain("Uses the Application's current sync options. Sync hooks don't run.")
+    const dryRun = dialog.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')[1]
+    await act(async () => dryRun.click())
+    expect(dialog.textContent).toContain('Argo will preview syncing this application to a previous revision without applying changes.')
+    expect(dialog.textContent).not.toContain('Later changes can still cause drift.')
+    const confirm = [...dialog.querySelectorAll<HTMLButtonElement>('button')].find(button => button.textContent === 'Run dry-run')!
+    await act(async () => confirm.click())
+    expect(onConfirm).toHaveBeenCalledWith({ prune: false, dryRun: true })
+  })
+
+  it.each(['https://example.com/repo/very/long/path/to/guestbook', 'guestbook (+2 more)'])('shows the selected source with wrapping (%s)', async (source) => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    root = createRoot(host)
+    await act(async () => root?.render(
+      <RollbackDialog open appLabel="argocd/demo" revision="abc123" historyId="0" source={source} onCancel={() => {}} onConfirm={() => {}} />,
+    ))
+    const dialog = document.querySelector<HTMLElement>('[role="dialog"]')!
+    const label = [...dialog.querySelectorAll('dt')].find(dt => dt.textContent === 'Source')
+    expect(label).toBeDefined()
+    expect(label?.nextElementSibling?.textContent).toBe(source)
+    expect(label?.nextElementSibling?.classList.contains('break-words')).toBe(true)
+  })
+
+  it.each([true, false])('shows controller compatibility when either the current Application or entry uses multiple sources (%s)', async (multiSourceWarning) => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    root = createRoot(host)
+    await act(async () => root?.render(
+      <RollbackDialog open appLabel="argocd/demo" revision="aaa111, bbb222" multiSourceWarning={multiSourceWarning} onCancel={() => {}} onConfirm={() => {}} />,
+    ))
+    const dialog = document.querySelector<HTMLElement>('[role="dialog"]')!
+    const note = 'On Argo CD before 2.12, rolling back across a single-source/multi-source change or to a multi-source entry can deploy the wrong revisions or render nothing; with prune, it can delete resources.'
+    expect(dialog.textContent?.includes(note)).toBe(multiSourceWarning)
+  })
+
+})
+
+it('disables confirmation while support is being checked', async () => {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+  const confirm = vi.fn()
+  await act(async () => root?.render(<RollbackDialog open appLabel="argocd/demo" revision="old" blockedReason="Checking this cluster's Radar…" onCancel={() => {}} onConfirm={confirm} />))
+  const dialog = document.querySelector<HTMLElement>('[role="dialog"]')!
+  expect(dialog.textContent).toContain("Checking this cluster's Radar…")
+  const button = [...dialog.querySelectorAll<HTMLButtonElement>('button')].find(b => b.textContent === 'Roll back')!
+  expect(button.disabled).toBe(true)
+  await act(async () => button.click())
+  expect(confirm).not.toHaveBeenCalled()
+})

package/src/components/gitops/RollbackDialog.tsx

@@ -24,12 +24,16 @@ export interface RollbackDialogProps {
   appLabel: string
   revision: string
   historyId?: string
+  source?: string
+  // Either the current Application or the selected entry uses plural sources.
+  multiSourceWarning?: boolean
   pending?: boolean
+  blockedReason?: string
   onCancel: () => void
   onConfirm: (opts: { prune: boolean; dryRun: boolean }) => void
 }
 
-export function RollbackDialog({ open, appLabel, revision, historyId, pending, onCancel, onConfirm }: RollbackDialogProps) {
+export function RollbackDialog({ open, appLabel, revision, historyId, source, multiSourceWarning, pending, blockedReason, onCancel, onConfirm }: RollbackDialogProps) {
   const titleId = useId()
   const [prune, setPrune] = useState(false)
   const [dryRun, setDryRun] = useState(false)
@@ -49,8 +53,16 @@ export function RollbackDialog({ open, appLabel, revision, historyId, pending, o
       </div>
       <div className="space-y-4 px-4 py-4 text-sm">
         <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
-          Argo will sync this application to a previous revision. This is a write operation on the cluster.
+          {dryRun
+            ? 'Argo will preview syncing this application to a previous revision without applying changes.'
+            : 'Argo will sync this application to a previous revision. Auto-sync is off. Later changes can still cause drift. Syncing or enabling auto-sync deploys the current revision and can undo the rollback.'}
         </div>
+        {multiSourceWarning && (
+          <p className="text-xs text-warning-text">
+            On Argo CD before 2.12, rolling back across a single-source/multi-source change or to a multi-source entry can deploy the wrong revisions or render nothing; with prune, it can delete resources.
+          </p>
+        )}
+        {blockedReason && <p className="text-xs text-theme-text-secondary">{blockedReason}</p>}
         <dl className="grid grid-cols-[80px_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs">
           <dt className="text-theme-text-tertiary">Revision</dt>
           <dd className="min-w-0">
@@ -58,6 +70,12 @@ export function RollbackDialog({ open, appLabel, revision, historyId, pending, o
               <span className="block truncate font-mono text-theme-text-primary">{revision || '-'}</span>
             </Tooltip>
           </dd>
+          {source && (
+            <>
+              <dt className="text-theme-text-tertiary">Source</dt>
+              <dd className="min-w-0 break-words text-theme-text-primary">{source}</dd>
+            </>
+          )}
           {historyId && (
             <>
               <dt className="text-theme-text-tertiary">History ID</dt>
@@ -66,6 +84,7 @@ export function RollbackDialog({ open, appLabel, revision, historyId, pending, o
           )}
         </dl>
         <div className="space-y-2">
+          <p className="text-xs text-theme-text-tertiary">Uses the Application's current sync options. Sync hooks don't run.</p>
           <label className="flex items-start gap-2">
             <input
               type="checkbox"
@@ -75,8 +94,8 @@ export function RollbackDialog({ open, appLabel, revision, historyId, pending, o
               className="mt-0.5 h-3.5 w-3.5 cursor-pointer accent-sky-500 disabled:cursor-not-allowed"
             />
             <div className="min-w-0">
-              <div className="text-xs text-theme-text-primary">Prune resources added since this revision</div>
-              <div className="text-[11px] text-theme-text-tertiary">Off by default — leaves any resources created after this revision untouched.</div>
+              <div className="text-xs text-theme-text-primary">Delete tracked resources that aren't in the rollback target</div>
+              <div className="text-[11px] text-theme-text-tertiary">Off by default. The target's resources are still applied; other tracked resources are kept.</div>
             </div>
           </label>
           <label className="flex items-start gap-2">
@@ -105,8 +124,8 @@ export function RollbackDialog({ open, appLabel, revision, historyId, pending, o
         </button>
         <button
           type="button"
-          onClick={() => onConfirm({ prune, dryRun })}
-          disabled={pending}
+          onClick={() => !blockedReason && onConfirm({ prune, dryRun })}
+          disabled={pending || !!blockedReason}
           className="inline-flex items-center gap-1.5 rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:text-amber-400"
         >
           {pending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <History className="h-3.5 w-3.5" />}