@skyhook-io/k8s-ui 1.19.0 → 1.20.0

package/src/components/gitops/argo-radar-upgrade.test.tsx

@@ -0,0 +1,369 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToString } from 'react-dom/server'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { RadarUpgradeRequirement } from '../../types/fetch-error'
+import { GitOpsDetailLayout, type ArgoActionHandlers, type GitOpsDetailStatus } from './GitOpsDetailLayout'
+import { buildRowActionItems, normalizeArgoApplication } from './GitOpsTableView'
+import { ResourceActionsBar } from '../shared/ResourceActionsBar'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+// SSR splits interpolated text with <!-- --> markers; strip so assertions read as prose.
+const html = (node: Parameters<typeof renderToString>[0]) => renderToString(node).replace(/<!-- -->/g, '')
+
+// The attributes of the button labelled `label`.
+function buttonAttrs(markup: string, label: string): string {
+  const chunk = markup.split('<button').find((part) => part.includes(`${label}</button>`))
+  if (chunk === undefined) throw new Error(`no ${label} button rendered`)
+  return chunk.slice(0, chunk.indexOf('>'))
+}
+
+const upgrade: RadarUpgradeRequirement = {
+  feature: 'Auto-sync controls for Applications with automated.enabled: false',
+  currentVersion: 'v1.16.3',
+  latestVersion: 'v1.17.0',
+}
+const NOTE = 'Auto-sync controls for Applications with automated.enabled: false need the latest Radar (v1.17) on this cluster. It runs v1.16.3.'
+// RadarUpgradeNote sets the feature in its own <span>.
+const NOTE_MARKUP = 'Auto-sync controls for Applications with automated.enabled: false</span> need the latest Radar (v1.17) on this cluster. It runs v1.16.3.'
+
+function app(automated: Record<string, unknown> | undefined, annotations?: Record<string, string>) {
+  return {
+    apiVersion: 'argoproj.io/v1alpha1',
+    metadata: { name: 'guestbook', namespace: 'argocd', annotations },
+    spec: { project: 'default', source: {}, destination: {}, syncPolicy: automated ? { automated } : {} },
+    status: {},
+  }
+}
+
+function argo(overrides: Partial<ArgoActionHandlers> = {}): ArgoActionHandlers {
+  const noop = () => {}
+  return {
+    onSyncRequested: noop, onRefresh: noop, onTerminate: noop, onSuspend: noop, onResume: noop,
+    syncing: false, refreshing: false, refreshingKind: 'normal', terminating: false, suspending: false, resuming: false,
+    autoSyncEnabled: false, isRunning: false,
+    ...overrides,
+  }
+}
+
+function layout(handlers: ArgoActionHandlers, status: GitOpsDetailStatus | null = null) {
+  return (
+    <GitOpsDetailLayout
+      identity={{ kind: 'applications', group: 'argoproj.io', namespace: 'argocd', name: 'guestbook', toolLabel: 'ArgoCD', kindLabel: 'Application' }}
+      status={status}
+      terminating={false}
+      terminatingChipTooltip=""
+      terminatingActionTooltip=""
+      detail={{ project: 'default' }}
+      insight={null}
+      insightLoading={false}
+      isArgoApp
+      isFlux={false}
+      isFluxWorkload={false}
+      argo={handlers}
+      activeTab="activity"
+      onTabChange={() => {}}
+      fullscreen={false}
+      onToggleFullscreen={() => {}}
+      renderTabBody={() => null}
+      onNavigateRoot={() => {}}
+    />
+  )
+}
+
+const enableAutoSync = (markup: string) => buttonAttrs(markup, 'Enable auto-sync')
+
+describe('Enable auto-sync on the GitOps detail page', () => {
+  it('is disabled with the upgrade note when the Radar cannot clear enabled: false', () => {
+    const markup = html(layout(argo({ resumeUpgrade: upgrade })))
+    expect(enableAutoSync(markup)).toMatch(/\sdisabled=""/)
+    expect(markup).toContain(NOTE_MARKUP)
+  })
+
+  it('is enabled, with no note, when the Radar advertises the behavior', () => {
+    const markup = html(layout(argo({ resumeUpgrade: null })))
+    expect(enableAutoSync(markup)).not.toMatch(/\sdisabled=""/)
+    expect(markup).not.toContain('need the latest Radar')
+  })
+
+  // Disable auto-sync works on every Radar; only the way back on is gated.
+  it('leaves Disable auto-sync alone', () => {
+    const markup = html(layout(argo({ autoSyncEnabled: true, resumeUpgrade: upgrade })))
+    expect(markup).toContain('Disable auto-sync')
+    expect(markup).not.toContain('need the latest Radar')
+  })
+
+  describe('tooltip', () => {
+    afterEach(() => { vi.useRealTimers() })
+
+    it.each([
+      { name: 'saved settings', status: { sync: 'OutOfSync', health: 'Healthy', suspended: true } as GitOpsDetailStatus, settings: undefined, copy: 'Turn auto-sync back on with its current or saved settings.' },
+      { name: 'first-time enable', status: { sync: 'OutOfSync', health: 'Healthy', suspended: false } as GitOpsDetailStatus, settings: { prune: false, selfHeal: true }, copy: 'Argo applies new commits and reverts live edits (self-heal). Resources removed from Git are kept (prune off).' },
+      { name: 'first-time enable on a Radar that starts self-heal off', status: { sync: 'OutOfSync', health: 'Healthy', suspended: false } as GitOpsDetailStatus, settings: { prune: false, selfHeal: false }, copy: 'Argo applies new commits. Resources removed from Git are kept (prune off).' },
+      { name: 'a block switched off in place with prune on', status: { sync: 'OutOfSync', health: 'Healthy', suspended: false } as GitOpsDetailStatus, settings: { prune: true, selfHeal: false }, copy: 'Argo applies new commits. Resources removed from Git are deleted (prune on).' },
+      { name: 'unknown settings', status: null, settings: null, copy: 'Turn on automated sync, so Argo applies new commits from Git.' },
+    ])('explains $name', async ({ status, settings, copy }) => {
+      vi.useFakeTimers()
+      const element = document.createElement('div')
+      document.body.appendChild(element)
+      const root = createRoot(element)
+      try {
+        await act(async () => { root.render(layout(argo({ resumeSettings: settings }), status)) })
+        const button = [...element.querySelectorAll('button')].find((b) => b.textContent === 'Enable auto-sync')!
+        await act(async () => {
+          button.parentElement!.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }))
+          vi.advanceTimersByTime(1000)
+        })
+        expect(document.body.querySelector('[role="tooltip"]')?.textContent).toBe(copy)
+      } finally {
+        await act(async () => root.unmount())
+        element.remove()
+      }
+    })
+
+    it.each([
+      { name: 'Sync is available', copy: 'Stop Argo from automatically syncing Git changes. Manual Sync still works.' },
+      { name: 'an operation holds Sync', running: true, copy: 'Stop Argo from automatically syncing Git changes.' },
+      { name: 'the Application is suspended', suspended: true, copy: 'Stop Argo from automatically syncing Git changes.' },
+      { name: 'an ApplicationSet owns it', controller: { kind: 'ApplicationSet' as const, name: 'clusters' }, copy: "Stop Argo from automatically syncing Git changes. Manual Sync still works. ApplicationSet clusters can turn it back on; to keep it off, change the ApplicationSet's template." },
+      { name: 'a parent Application manages it', controller: { kind: 'Application' as const, name: 'apps' }, copy: 'Stop Argo from automatically syncing Git changes. Manual Sync still works. Application apps manages this one from Git and can turn it back on when it syncs; to keep it off, change it in Git.' },
+      { name: 'an operation holds Sync on an ApplicationSet-owned app', running: true, controller: { kind: 'ApplicationSet' as const, name: 'clusters' }, copy: "Stop Argo from automatically syncing Git changes. ApplicationSet clusters can turn it back on; to keep it off, change the ApplicationSet's template." },
+    ] as Array<{ name: string; running?: boolean; suspended?: boolean; controller?: ArgoActionHandlers['autoSyncController']; copy: string }>)('describes Disable auto-sync when $name', async ({ running = false, suspended, controller, copy }) => {
+      vi.useFakeTimers()
+      const element = document.createElement('div')
+      document.body.appendChild(element)
+      const root = createRoot(element)
+      try {
+        await act(async () => { root.render(layout(argo({ autoSyncEnabled: true, isRunning: running, autoSyncController: controller }), suspended ? { sync: 'Synced', health: 'Suspended', suspended: true } as GitOpsDetailStatus : null)) })
+        const button = [...element.querySelectorAll('button')].find((b) => b.textContent === 'Disable auto-sync')!
+        await act(async () => {
+          button.parentElement!.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }))
+          vi.advanceTimersByTime(1000)
+        })
+        expect(document.body.querySelector('[role="tooltip"]')?.textContent).toBe(copy)
+      } finally {
+        await act(async () => root.unmount())
+        element.remove()
+      }
+    })
+
+    it('explains the disabled button with the note copy', async () => {
+      vi.useFakeTimers()
+      const element = document.createElement('div')
+      document.body.appendChild(element)
+      const root = createRoot(element)
+      await act(async () => { root.render(layout(argo({ resumeUpgrade: upgrade }))) })
+      const button = [...element.querySelectorAll('button')].find((b) => b.textContent === 'Enable auto-sync')!
+      await act(async () => {
+        button.parentElement!.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }))
+        vi.advanceTimersByTime(1000)
+      })
+      expect(document.body.querySelector('[role="tooltip"]')?.textContent).toBe(NOTE)
+      await act(async () => root.unmount())
+      element.remove()
+    })
+  })
+})
+
+describe('Resume in the GitOps table row menu', () => {
+  const resume = (raw: ReturnType<typeof app>, gate: RadarUpgradeRequirement | null) =>
+    buildRowActionItems(normalizeArgoApplication(raw), () => {}, undefined, gate).find((item) => item.key === 'resume')
+  const suspended = { 'radarhq.io/suspended-prune': 'true' }
+
+  it('is disabled with the note copy for a suspended app whose automated block says enabled: false', () => {
+    const item = resume(app({ enabled: false, prune: true }, suspended), upgrade)
+    expect(item).toMatchObject({ disabled: true, disabledReason: NOTE })
+  })
+
+  it('stays enabled when the Radar advertises the behavior', () => {
+    expect(resume(app({ enabled: false, prune: true }, suspended), null)).toMatchObject({ disabled: false, disabledReason: undefined })
+  })
+
+  // A Radar-suspended app has no automated block; every Radar resumes it.
+  it('stays enabled for a suspended app without enabled: false', () => {
+    expect(resume(app(undefined, suspended), upgrade)).toMatchObject({ disabled: false, disabledReason: undefined })
+  })
+})
+
+describe('Enable Auto-Sync in the resource actions bar', () => {
+  function bar(data: ReturnType<typeof app>, gate: RadarUpgradeRequirement | null) {
+    const markup = html(
+      <ResourceActionsBar
+        resource={{ kind: 'applications', group: 'argoproj.io', namespace: 'argocd', name: 'guestbook' }}
+        data={data}
+        onArgoResume={() => {}}
+        argoResumeUpgrade={gate}
+      />,
+    )
+    return buttonAttrs(markup, 'Enable Auto-Sync')
+  }
+
+  it('is disabled for an app with enabled: false on a Radar without the behavior', () => {
+    expect(bar(app({ enabled: false, prune: true }), upgrade)).toMatch(/\sdisabled=""/)
+  })
+
+  it('is enabled when the Radar advertises the behavior', () => {
+    expect(bar(app({ enabled: false, prune: true }), null)).not.toMatch(/\sdisabled=""/)
+  })
+
+  // A Manual app without an automated block resumes correctly on every Radar.
+  it('is enabled for a Manual app without an automated block', () => {
+    expect(bar(app(undefined), upgrade)).not.toMatch(/\sdisabled=""/)
+  })
+})
+
+describe("the drawer's one-click Sync", () => {
+  it("hands the Application's sync options to the caller", async () => {
+    const onArgoSync = vi.fn()
+    const host = document.createElement('div')
+    document.body.append(host)
+    const root = createRoot(host)
+    const application = { ...app(undefined), spec: { project: 'default', source: {}, destination: {}, syncPolicy: { syncOptions: ['CreateNamespace=true'] } } }
+    await act(async () => root.render(
+      <ResourceActionsBar
+        resource={{ kind: 'applications', namespace: 'argocd', name: 'guestbook', group: 'argoproj.io' }}
+        data={application}
+        onArgoSync={onArgoSync}
+      />,
+    ))
+    const sync = [...host.querySelectorAll('button')].find((b) => b.textContent?.trim() === 'Sync')!
+    await act(async () => sync.click())
+    expect(onArgoSync).toHaveBeenCalledWith({ namespace: 'argocd', name: 'guestbook', applicationSyncOptions: ['CreateNamespace=true'] })
+    await act(async () => root.unmount())
+    host.remove()
+  })
+})
+
+describe("the drawer's Sync with an options dialog", () => {
+  const source = { repoURL: 'https://example.com/app.git', path: 'app', targetRevision: 'main' }
+  const application = { ...app(undefined), status: { sync: { revision: 'abc1234def', comparedTo: { source } } }, spec: { project: 'default', source, destination: {}, syncPolicy: { syncOptions: ['CreateNamespace=true'] } } }
+  type OnArgoSync = (params: object) => void | Promise<unknown>
+  const bar = (name: string, onArgoSync: OnArgoSync) => (
+    <ResourceActionsBar
+      resource={{ kind: 'applications', namespace: 'argocd', name, group: 'argoproj.io' }}
+      data={{ ...application, metadata: { ...application.metadata, name } }}
+      onArgoSync={onArgoSync}
+      argoSyncDialog={{ pinsComparedRevision: true }}
+    />
+  )
+  async function open(onArgoSync: OnArgoSync) {
+    const host = document.createElement('div')
+    document.body.append(host)
+    const root = createRoot(host)
+    await act(async () => root.render(bar('guestbook', onArgoSync)))
+    const sync = [...host.querySelectorAll('button')].find((b) => b.textContent?.trim() === 'Sync…')!
+    await act(async () => sync.click())
+    return {
+      rerender: async (name: string) => { await act(async () => root.render(bar(name, onArgoSync))) },
+      close: async () => { await act(async () => root.unmount()); host.remove() },
+    }
+  }
+  // A closed dialog's portal stays briefly for its exit animation; use the newest.
+  const dialog = () => [...document.querySelectorAll('[role="dialog"]')].at(-1)!
+  const dialogButton = (label: string) => [...dialog().querySelectorAll<HTMLButtonElement>('button')].find((b) => b.textContent?.trim() === label)!
+
+  it('opens the dialog instead of syncing, and syncs nothing on Cancel', async () => {
+    const onArgoSync = vi.fn<OnArgoSync>()
+    const { close } = await open(onArgoSync)
+    expect(dialog().textContent).toContain('Leave empty for the revision Argo last compared (abc1234def).')
+    expect(onArgoSync).not.toHaveBeenCalled()
+    await act(async () => dialogButton('Cancel').click())
+    expect(onArgoSync).not.toHaveBeenCalled()
+    await close()
+  })
+
+  it('stays open with its choices when the sync fails, and closes once one succeeds', async () => {
+    let fail = true
+    const onArgoSync = vi.fn<OnArgoSync>(() => (fail ? Promise.reject(new Error('denied')) : Promise.resolve()))
+    const { close } = await open(onArgoSync)
+    const prune = () => [...dialog().querySelectorAll('label')].find((l) => l.textContent?.startsWith('Prune'))!.querySelector('input')!
+    await act(async () => prune().click())
+    await act(async () => dialogButton('Sync now').click())
+    expect(onArgoSync).toHaveBeenCalledTimes(1)
+    expect(dialog().textContent).toContain('Sync now')
+    expect(dialog().querySelector('[role="alert"]')?.textContent).toBe('Sync failed: denied')
+    expect(prune().checked).toBe(true)
+    fail = false
+    await act(async () => dialogButton('Sync now').click())
+    expect(onArgoSync.mock.calls[1][0]).toMatchObject({ prune: true })
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 600)) })
+    expect(document.body.textContent).not.toContain('Sync now')
+    await close()
+  })
+
+  it('is disabled while an Argo operation runs, instead of opening a dialog that can do nothing', async () => {
+    const host = document.createElement('div')
+    document.body.append(host)
+    const root = createRoot(host)
+    const running = { ...application, status: { ...application.status, operationState: { phase: 'Running' } } }
+    await act(async () => root.render(
+      <ResourceActionsBar
+        resource={{ kind: 'applications', namespace: 'argocd', name: 'guestbook', group: 'argoproj.io' }}
+        data={running}
+        onArgoSync={vi.fn<OnArgoSync>()}
+        argoSyncDialog={{ pinsComparedRevision: true }}
+      />,
+    ))
+    const sync = [...host.querySelectorAll('button')].find((b) => b.textContent?.trim() === 'Sync…')!
+    expect(sync.disabled).toBe(true)
+    await act(async () => root.unmount())
+    host.remove()
+  })
+
+  it('closes, dropping its choices, when the drawer switches to another Application', async () => {
+    const onArgoSync = vi.fn<OnArgoSync>()
+    const { rerender, close } = await open(onArgoSync)
+    const prune = [...dialog().querySelectorAll('label')].find((l) => l.textContent?.startsWith('Prune'))!.querySelector('input')!
+    await act(async () => prune.click())
+    await rerender('other')
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 600)) })
+    expect(document.body.textContent).not.toContain('Sync now')
+    await rerender('guestbook')
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 600)) })
+    expect(document.body.textContent).not.toContain('Sync now')
+    await rerender('other')
+    const reopen = [...document.querySelectorAll('button')].find((b) => b.textContent?.trim() === 'Sync…')!
+    await act(async () => reopen.click())
+    const prunedAgain = [...dialog().querySelectorAll('label')].find((l) => l.textContent?.startsWith('Prune'))!.querySelector('input')!
+    expect(prunedAgain.checked).toBe(false)
+    await act(async () => dialogButton('Sync now').click())
+    expect(onArgoSync.mock.calls[0][0]).toMatchObject({ name: 'other', prune: false })
+    await close()
+  })
+
+  it("syncs with the dialog's choices and the Application's options", async () => {
+    const onArgoSync = vi.fn<OnArgoSync>()
+    const { close } = await open(onArgoSync)
+    const prune = [...dialog().querySelectorAll('label')].find((l) => l.textContent?.startsWith('Prune'))!.querySelector('input')!
+    await act(async () => prune.click())
+    const confirm = dialogButton('Sync now')
+    expect(confirm.disabled).toBe(false)
+    await act(async () => confirm.click())
+    expect(onArgoSync).toHaveBeenCalledTimes(1)
+    expect(onArgoSync.mock.calls[0][0]).toMatchObject({ namespace: 'argocd', name: 'guestbook', applicationSyncOptions: ['CreateNamespace=true'], prune: true, dryRun: false })
+    expect(onArgoSync.mock.calls[0][0]).not.toHaveProperty('syncOptions')
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 600)) })
+    expect(document.body.textContent).not.toContain('Sync now')
+    await close()
+  })
+})
+
+describe('auto-sync support pending or unavailable', () => {
+  it.each(["Checking this cluster's Radar…", "Couldn't check this cluster's Radar support. Refresh to try again."])('disables each affected control with its reason: %s', reason => {
+    const markup = html(layout(argo({ resumeBlockedReason: reason })))
+    expect(enableAutoSync(markup)).toMatch(/\sdisabled=""/)
+    expect(markup).toContain(reason.replace(/'/g, '&#x27;'))
+    const raw = app({ enabled: false }, { 'radarhq.io/suspended-prune': 'true' })
+    const onAction = vi.fn()
+    const item = buildRowActionItems(normalizeArgoApplication(raw), onAction, undefined, null, reason).find(i => i.key === 'resume')!
+    expect(item).toMatchObject({ disabled: true, disabledReason: reason })
+    item.onClick()
+    expect(onAction).not.toHaveBeenCalled()
+    const bar = html(<ResourceActionsBar resource={{ kind: 'applications', group: 'argoproj.io', namespace: 'argocd', name: 'guestbook' }} data={raw} onArgoResume={() => {}} argoResumeBlockedReason={reason} />)
+    expect(buttonAttrs(bar, 'Enable Auto-Sync')).toMatch(/\sdisabled=""/)
+    const ordinary = buildRowActionItems(normalizeArgoApplication(app(undefined, { 'radarhq.io/suspended-prune': 'true' })), onAction, undefined, null, reason).find(i => i.key === 'resume')!
+    expect(ordinary.disabled).toBe(false)
+  })
+})

package/src/components/gitops/detail-helpers.test.ts

@@ -20,8 +20,9 @@ describe('parseArgoRollbackID', () => {
   test('empty string returns null (would be Number("") === 0)', () => {
     expect(parseArgoRollbackID('')).toBeNull()
   })
-  test('"0" returns null (non-positive, Argo history starts at 1)', () => {
-    expect(parseArgoRollbackID('0')).toBeNull()
+  // Argo numbers history from 0, so the first deploy is a rollback target.
+  test('"0" is the first history entry', () => {
+    expect(parseArgoRollbackID('0')).toBe(0)
   })
   test('negative numbers return null', () => {
     expect(parseArgoRollbackID('-5')).toBeNull()
@@ -29,6 +30,11 @@ describe('parseArgoRollbackID', () => {
   test('Flux condition type string returns null', () => {
     expect(parseArgoRollbackID('Ready')).toBeNull()
   })
+  // Number() reads each of these as a number; with 0 now valid, a blank id
+  // would otherwise target the first deploy.
+  test.each([' ', '0x1f', '1e3', '1.5', '+1', ' 1'])('%j returns null', (id) => {
+    expect(parseArgoRollbackID(id)).toBeNull()
+  })
   test('positive integer returns the number', () => {
     expect(parseArgoRollbackID('42')).toBe(42)
   })

package/src/components/gitops/detail-helpers.ts

@@ -52,19 +52,17 @@ export function gitOpsInsightChangeKey(ref: { kind: string; namespace?: string;
 }
 
 // parseArgoRollbackID parses an Argo HistoryItem.id into the int64 the
-// rollback API needs. Returns null when:
-//   - id is missing
-//   - id is non-numeric (Flux condition rows reuse the same slot for
-//     condition.type, which we never want to interpret as a rollback id)
-//   - id is non-positive ("0" and negative strings parse fine via
-//     Number() but aren't valid Argo history ids — Argo's id sequence
-//     starts at 1; rolling back to id 0 would unhelpfully target the
-//     first revision).
+// rollback API needs. Argo's controller numbers history from 0, so "0" is
+// the first deploy and a valid target. Returns null when:
+//   - id is missing or empty
+//   - id is not a plain non-negative integer: Flux condition rows reuse the
+//     same slot for condition.type, and Number() would also read "", " ",
+//     "0x1f" or "1e3" as a number and route the rollback to a wrong entry
+//   - id is negative
 export function parseArgoRollbackID(id: string | undefined): number | null {
-  if (!id) return null
+  if (!id || !/^\d+$/.test(id)) return null
   const n = Number(id)
-  if (!Number.isFinite(n) || n <= 0) return null
-  return n
+  return Number.isSafeInteger(n) ? n : null
 }
 
 // describeGitOpsTerminating renders the two tooltip strings the detail

package/src/components/gitops/index.ts

@@ -44,7 +44,7 @@ export {
   gitOpsDetailGroup,
   isDestinationRef,
 } from './detail-helpers'
-export { SyncOptionsDialog } from './SyncOptionsDialog'
+export { SyncOptionsDialog, argoSyncOptionsForRequest } from './SyncOptionsDialog'
 export type { SyncOptionsDialogProps, ArgoSyncOpts } from './SyncOptionsDialog'
 export { RollbackDialog } from './RollbackDialog'
 export type { RollbackDialogProps } from './RollbackDialog'

package/src/components/gitops/insights/GitOpsActivityInsightView.test.tsx

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import type { GitOpsInsight } from '../../../types'
+import type { RadarUpgradeRequirement } from '../../../types/fetch-error'
+import { GitOpsActivityInsightView } from './GitOpsInsightViews'
+
+function render(insight: GitOpsInsight, rollbackUpgrade?: RadarUpgradeRequirement | null): string {
+  return renderToString(<GitOpsActivityInsightView insight={insight} onRollback={() => {}} rollbackUpgrade={rollbackUpgrade} />).replace(/<!-- -->/g, '')
+}
+
+function rollbackButtons(insight: GitOpsInsight, rollbackUpgrade?: RadarUpgradeRequirement | null): { disabled: boolean }[] {
+  const html = render(insight, rollbackUpgrade)
+  return [...html.matchAll(/<button([^>]*)>Rollback<\/button>/g)].map((m) => ({ disabled: /\sdisabled=""/.test(m[1]) }))
+}
+
+function insight(autoSyncMode: string): GitOpsInsight {
+  return {
+    summary: { tool: 'argocd', kind: 'Application', namespace: 'argocd', name: 'guestbook', autoSyncMode },
+    capabilities: { sync: true, refresh: true, terminate: true, suspend: true, resume: true, syncWithSource: false, selectiveSync: true, rollback: true },
+    history: [
+      { phase: 'Succeeded', revision: 'eee555' },
+      { id: '2', revision: 'ccc333', rollbackable: true },
+      { id: '1', revision: 'bbb222', rollbackable: false },
+      { id: '0', revision: 'aaa111' },
+    ],
+  }
+}
+
+describe('GitOpsActivityInsightView rollback', () => {
+  // The rollback API refuses an entry with no source, so its button is
+  // disabled; the operation row has no id and gets no button.
+  it('disables Rollback only on entries the backend marks not rollbackable', () => {
+    expect(rollbackButtons(insight('Manual'))).toEqual([{ disabled: false }, { disabled: true }, { disabled: false }])
+  })
+
+  it('disables every Rollback while auto-sync is on', () => {
+    expect(rollbackButtons(insight('Auto · prune'))).toEqual([{ disabled: true }, { disabled: true }, { disabled: true }])
+  })
+
+  // An older Radar writes a rollback the API server drops (and refuses id 0),
+  // so a newer UI disables every entry and says which Radar it needs.
+  describe('on a Radar without argoRollbackSync', () => {
+    const upgrade = { feature: 'Argo CD rollbacks', currentVersion: 'v1.16.3', latestVersion: 'v1.17.0' }
+
+    it('disables every Rollback and shows the upgrade note', () => {
+      expect(rollbackButtons(insight('Manual'), upgrade)).toEqual([{ disabled: true }, { disabled: true }, { disabled: true }])
+      // RadarUpgradeNote sets the feature in its own <span>.
+      expect(render(insight('Manual'), upgrade)).toContain('Argo CD rollbacks</span> need the latest Radar (v1.17) on this cluster. It runs v1.16.3.')
+    })
+
+    it('shows no note when the Radar advertises the behavior', () => {
+      expect(render(insight('Manual'), null)).not.toContain('Argo CD rollbacks need')
+    })
+  })
+})

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -9,6 +9,8 @@ import { radarHealthNote } from '../health-provenance'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '../../../utils/badge-colors'
 import { formatRelativeAgeTime } from '../../../utils/format'
 import { Tooltip } from '../../ui/Tooltip'
+import { RadarUpgradeNote, radarUpgradeNoteText } from '../../ui/RadarUpgradeNote'
+import type { RadarUpgradeRequirement } from '../../../types/fetch-error'
 import { SearchBox } from '../../ui/SearchBox'
 import { FilterPill, type FilterPillTone } from '../../ui/FilterPill'
 import { Collapse, CollapseChevron } from '../../ui/Collapse'
@@ -22,6 +24,7 @@ import {
   entryTone,
   gitopsToSeverity,
   healthStatusRank,
+  historyRollbackBlockedReason,
   isArgoResourceSyncEligible,
   messageToPhase,
   missingResourceMessage,
@@ -604,6 +607,7 @@ function GitOpsCompactIssueStack({ issues, onSelectIssue }: { issues: GitOpsIssu
   const [expanded, setExpanded] = useState(false)
   if (issues.length === 0) return null
   const headline = issues[0]!
+  const wrapHeadline = headline.reason === 'RolledBack' || headline.reason === 'RollbackRevisionMismatch' || headline.reason === 'SyncWindowBlocked'
   const remaining = issues.length - 1
   const tone = severityTone(headline.severity)
   const headlineRef = headline.refs?.[0]
@@ -631,7 +635,7 @@ function GitOpsCompactIssueStack({ issues, onSelectIssue }: { issues: GitOpsIssu
         <div className="flex w-full items-center gap-2">
           {tone.icon}
           <span className={clsx('shrink-0 font-semibold', tone.text)}>{headline.reason}</span>
-          <span className="min-w-0 flex-1 truncate text-theme-text-secondary">{headline.message}</span>
+          <span className={clsx('min-w-0 flex-1 text-theme-text-secondary', wrapHeadline ? 'whitespace-normal break-words' : 'truncate')}>{headline.message}</span>
           {/* Inline count when there are more issues behind the headline.
               Lightweight text — pairs with the chevron as a single disclosure
               unit instead of a separator-bordered count button. */}
@@ -902,6 +906,7 @@ export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResour
   // to a muted placeholder and explain the cause once. Health stays — it's a
   // live signal that's still knowable and still worth reading.
   const syncUnavailable = isArgoRoot && (insight.summary.sync ?? '').toLowerCase() === 'unknown'
+  const rolledBack = !!insight.summary.rollbackRevision
   const toggleFacet = (facet: ResourceStatusFacet) => {
     setStatusFilters((prev) => {
       const next = new Set(prev)
@@ -1123,9 +1128,9 @@ export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResour
                 const rowKey = refKey(change.ref)
                 const focused = focusKey === rowKey
                 const explanation = change.missing
-                  ? missingResourceMessage(change.sync, { hazard: syncHazard })
+                  ? missingResourceMessage(change.sync, { hazard: syncHazard, rolledBack })
                   : !change.syncError && !change.message
-                    ? explainChangeStatus(change.sync, change.health, insight.summary, { hazard: syncHazard })
+                    ? explainChangeStatus(change.sync, change.health, insight.summary, { hazard: syncHazard, rolledBack })
                     : ''
                 const hasInlineDetail = !!(
                   (change.drift && change.drift.entries.length > 0) ||
@@ -1317,6 +1322,7 @@ function explainChangeStatus(
   if (sync === 'OutOfSync') {
     if (parentFailed) return 'Sync failed for this resource — see the operation error above for the cause.'
     if (inFlight) return 'Live state differs from Git. A sync is in progress — wait for it to finish.'
+    if (context?.rolledBack) return 'Live state differs from Git after a rollback. Sync applies the desired state and can undo the rollback.'
     if (isAuto) return 'Live state differs from Git. Auto-sync should reconcile this within a few minutes; click Sync to force it.'
     return 'Live state differs from Git. Click Sync to apply the desired state.'
   }
@@ -1636,12 +1642,17 @@ interface GitOpsActivityInsightViewProps {
   // with the target entry. The consumer is responsible for the confirmation
   // dialog + the actual mutation.
   onRollback?: (item: GitOpsHistoryItem) => void
+  // Set when the connected Radar is too old to roll back: every Rollback
+  // renders disabled, with the upgrade note above the history.
+  rollbackUpgrade?: RadarUpgradeRequirement | null
+  rollbackBlockedReason?: string
 }
 
-export function GitOpsActivityInsightView({ insight, error, onRollback }: GitOpsActivityInsightViewProps) {
+export function GitOpsActivityInsightView({ insight, error, onRollback, rollbackUpgrade, rollbackBlockedReason }: GitOpsActivityInsightViewProps) {
   if (error && !insight) return <InsightErrorState error={error} />
   if (!insight) return <PaneLoader label="Loading GitOps activity…" className="h-full" />
   const canRollback = !!insight.capabilities?.rollback && !!onRollback
+  const upgrade = canRollback ? rollbackUpgrade ?? null : null
   // Auto-sync makes rollback futile — the controller would re-sync to HEAD
   // immediately. Argo's own Web UI disables the button in this state. Detect
   // by autoSyncMode prefix so "Auto · prune", "Auto · self-heal", etc. all match.
@@ -1655,12 +1666,18 @@ export function GitOpsActivityInsightView({ insight, error, onRollback }: GitOps
         <SectionHeader
           icon={Clock3}
           title="History"
-          hint={canRollback ? 'Each revision can be rolled back to.' : undefined}
+          hint={canRollback && !upgrade && !rollbackBlockedReason ? 'Each revision can be rolled back to.' : undefined}
         />
+        {upgrade && <RadarUpgradeNote requirement={upgrade} className="border-b border-theme-border px-4 py-2.5" />}
+        {canRollback && rollbackBlockedReason && <p className="border-b border-theme-border px-4 py-2.5 text-xs text-theme-text-secondary">{rollbackBlockedReason}</p>}
         <HistoryRows
           items={insight.history ?? []}
           canRollback={canRollback}
-          rollbackBlockedReason={autoSyncBlocksRollback ? 'Auto-sync is enabled. Disable it to enable rollback — otherwise the controller will sync forward to HEAD again.' : undefined}
+          rollbackBlockedReason={rollbackBlockedReason || (upgrade
+            ? radarUpgradeNoteText(upgrade)
+            : autoSyncBlocksRollback
+              ? 'Auto-sync is enabled. Disable it to enable rollback — otherwise the controller will sync forward to HEAD again.'
+              : undefined)}
           onRollback={onRollback}
         />
       </section>
@@ -1700,6 +1717,7 @@ function HistoryRows({
         // the in-flight current operation row has no ID and rolling "back"
         // to it is meaningless.
         const showRollback = canRollback && !!item.id && !!onRollback
+        const blockedReason = historyRollbackBlockedReason(item, rollbackBlockedReason)
         return (
           // `group` enables the Rollback button's hover-reveal; baseline
           // opacity-40 keeps it touch-discoverable.
@@ -1720,22 +1738,22 @@ function HistoryRows({
                 )}
                 {showRollback && (
                   <Tooltip
-                    content={rollbackBlockedReason || `Roll back to revision ${item.revision || `#${item.id}`}`}
+                    content={blockedReason || `Roll back to revision ${item.revision || `#${item.id}`}`}
                     delay={200}
                     wrapperClassName="ml-auto"
                   >
                     {/* Two visually distinct states:
                         - Enabled: low-emphasis baseline (opacity-40), brightens on row hover
-                        - Disabled (auto-sync on): full opacity but desaturated, cursor-not-allowed,
+                        - Disabled (auto-sync on, or an entry with no source): full opacity but desaturated, cursor-not-allowed,
                           no hover affordance — reads unambiguously as "not actionable, here's why" */}
                     <button
                       type="button"
-                      onClick={() => !rollbackBlockedReason && onRollback?.(item)}
-                      disabled={!!rollbackBlockedReason}
-                      aria-disabled={!!rollbackBlockedReason}
+                      onClick={() => !blockedReason && onRollback?.(item)}
+                      disabled={!!blockedReason}
+                      aria-disabled={!!blockedReason}
                       className={clsx(
                         'rounded border px-1.5 py-0.5 text-[10px] transition-opacity',
-                        rollbackBlockedReason
+                        blockedReason
                           ? 'cursor-not-allowed border-theme-border bg-theme-base text-theme-text-tertiary'
                           : 'border-theme-border bg-theme-elevated text-theme-text-secondary opacity-40 hover:bg-theme-hover hover:text-theme-text-primary hover:opacity-100 focus-visible:opacity-100 group-hover:opacity-100'
                       )}