@skyhook-io/k8s-ui 1.19.0 → 1.20.0

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" />}

package/src/components/gitops/SyncOptionsDialog.render.test.tsx

@@ -0,0 +1,374 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { SyncOptionsDialog, type ArgoSyncOpts } from './SyncOptionsDialog'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+const APP_OPTIONS = ['CreateNamespace=true', 'ServerSideApply=true']
+const STALE_OPTIONS_NOTICE = "The Application's sync options changed while this dialog was open. This sync uses the options shown here. Cancel and reopen to load the latest."
+let host: HTMLDivElement
+let root: ReturnType<typeof createRoot>
+let confirmed: ArgoSyncOpts[]
+let validated: ArgoSyncOpts[]
+
+beforeEach(() => {
+  confirmed = []
+  validated = []
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  host.remove()
+  document.body.innerHTML = ''
+})
+
+async function render(props: Partial<Parameters<typeof SyncOptionsDialog>[0]> = {}) {
+  await act(async () => root.render(
+    <SyncOptionsDialog
+      open
+      appLabel="argocd/guestbook"
+      applicationSyncOptions={APP_OPTIONS}
+      onCancel={() => {}}
+      onConfirm={(opts) => confirmed.push(opts)}
+      {...props}
+    />,
+  ))
+}
+
+// A sync using Replace or Force is labelled "Sync with replace" etc.; tests
+// about other behavior find it by its plain label.
+const button = (label: string) => [...document.querySelectorAll('button')].find((b) => {
+  const text = b.textContent?.trim() ?? ''
+  return text === label || text.startsWith(`${label === 'Sync now' ? 'Sync' : label} with `)
+})!
+const toggle = (label: string) => [...document.querySelectorAll('label')].find((l) => l.textContent?.startsWith(label))!.querySelector('input')!
+const click = async (el: HTMLElement) => { await act(async () => el.click()) }
+
+it('starts with prune off and submits nothing for the options, so the Application keeps its own', async () => {
+  await render()
+  expect(toggle('Prune').checked).toBe(false)
+  expect(toggle('Server-side apply').checked).toBe(true)
+  expect(toggle('Server-side apply').disabled).toBe(false)
+  expect(toggle('Replace').checked).toBe(false)
+  expect(toggle('Replace').disabled).toBe(false)
+  expect(document.body.textContent).not.toContain(STALE_OPTIONS_NOTICE)
+  await click(button('Sync now'))
+  expect(confirmed).toEqual([{ revision: undefined, prune: false, dryRun: false, force: false, applyOnly: false }])
+})
+
+it('hides the revision for multi-source Applications and explains comparison pinning', async () => {
+  await render({ multiSource: true, pinsComparedRevision: true })
+  expect(document.body.textContent).not.toContain('Revision (optional)')
+  expect(document.body.textContent).toContain('Syncs each source at the revision Argo last compared.')
+  await click(button('Sync now'))
+  expect(confirmed[0].revision).toBeUndefined()
+})
+
+// A Radar without argoSyncInheritance resolves the target when the sync runs,
+// so the dialog must not promise the compared revision.
+it('promises no compared revision when the serving Radar does not pin it', async () => {
+  await render({ comparedRevision: 'abcdef0123456789abcdef0123456789abcdef01' })
+  expect(document.body.textContent).toContain('Leave empty for the target revision, resolved when the sync runs.')
+  expect(document.body.textContent).not.toContain('last compared')
+  await render({ multiSource: true })
+  expect(document.body.textContent).toContain("Syncs each source's target revision, resolved when the sync runs.")
+  await render({ resource: { kind: 'Deployment', group: 'apps', namespace: 'guestbook', name: 'web' } })
+  expect(document.body.textContent).toContain('Uses the target revision, resolved when the sync runs.')
+  expect(document.body.textContent).not.toContain('last compared')
+})
+
+it('omits an entered revision if the Application becomes multi-source while open', async () => {
+  await render()
+  const revision = document.querySelector('input:not([type="checkbox"])') as HTMLInputElement
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(revision, 'release-1')
+    revision.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  await render({ multiSource: true })
+  await click(button('Sync now'))
+  expect(confirmed[0].revision).toBeUndefined()
+})
+
+it('explains selective sync hooks, dependencies and namespace management without denying wave ordering', async () => {
+  await render({ resource: { kind: 'Deployment', group: 'apps', namespace: 'guestbook', name: 'web' }, pinsComparedRevision: true })
+  expect(document.body.textContent).toContain("Syncs only this resource, without hooks. Resources it depends on aren't synced; namespace creation still applies. Uses the revision Argo last compared.")
+  expect(document.body.textContent).not.toContain('Only this resource will be applied')
+  expect(document.body.textContent).not.toContain('bypasses hooks and normal sync-wave ordering')
+})
+
+it('disables unknown sync options and omits them when confirming', async () => {
+  await render({ applicationSyncOptions: undefined })
+  expect(toggle('Replace').disabled).toBe(true)
+  expect(toggle('Server-side apply').disabled).toBe(true)
+  expect(document.body.textContent).toContain("This view can't show or change the Application's sync options, so Replace and Server-side apply are unavailable here.")
+  await click(toggle('Replace'))
+  await click(toggle('Server-side apply'))
+  await click(toggle('Prune'))
+  await click(button('Sync now'))
+  expect(confirmed).toEqual([{ revision: undefined, prune: true, dryRun: false, force: false, applyOnly: false }])
+})
+
+it('omits unknown sync options for selective sync and its dry-run, even after earlier edits', async () => {
+  const props = {
+    resource: { kind: 'Deployment', group: 'apps', namespace: 'guestbook', name: 'web' },
+    onValidate: (opts: ArgoSyncOpts) => validated.push(opts),
+  }
+  await render(props)
+  await click(toggle('Replace'))
+  await render({ ...props, applicationSyncOptions: undefined })
+  expect(toggle('Replace').disabled).toBe(true)
+  expect(toggle('Server-side apply').disabled).toBe(true)
+  await click(button('Dry-run'))
+  await click(button('Sync resource'))
+  expect(validated).toEqual([{ revision: undefined, prune: false, dryRun: true, force: false, applyOnly: false }])
+  expect(confirmed).toEqual([{ revision: undefined, prune: false, dryRun: false, force: false, applyOnly: false }])
+})
+
+it('keeps toggles editable when the Application has an explicitly empty option list', async () => {
+  await render({ applicationSyncOptions: [] })
+  expect(toggle('Replace').disabled).toBe(false)
+  expect(toggle('Replace').checked).toBe(false)
+  expect(toggle('Server-side apply').disabled).toBe(false)
+  expect(toggle('Server-side apply').checked).toBe(false)
+  expect(document.body.textContent).not.toContain("This view can't show or change")
+  await click(button('Sync now'))
+  expect(confirmed[0]).not.toHaveProperty('syncOptions')
+  await click(toggle('Replace'))
+  await click(toggle('Server-side apply'))
+  await click(button('Sync now'))
+  expect(confirmed[1].syncOptions).toEqual(['Replace=true', 'ServerSideApply=true'])
+  await click(toggle('Replace'))
+  await click(toggle('Server-side apply'))
+  await click(button('Sync now'))
+  expect(confirmed[2]).not.toHaveProperty('syncOptions')
+})
+
+it("sends the Application's options with one edit when a toggle changes", async () => {
+  await render()
+  await click(toggle('Server-side apply'))
+  await click(toggle('Prune'))
+  await click(button('Sync now'))
+  expect(confirmed[0]).toMatchObject({ prune: true, syncOptions: ['CreateNamespace=true'] })
+})
+
+it('lists all other options read-only and preserves them when either toggle changes', async () => {
+  const otherOptions = ['CreateNamespace=true', 'FailOnSharedResource=true', 'PrunePropagationPolicy=orphan', 'Validate=false', 'Custom=opaque']
+  await render({ applicationSyncOptions: [...otherOptions, 'Replace=false', 'ServerSideApply=true'] })
+  expect(document.body.textContent).toContain('Also used for this sync')
+  expect([...document.querySelectorAll('li')].map((li) => li.textContent)).toEqual(otherOptions)
+  expect(document.body.textContent).not.toContain("Keep the Application's other sync options")
+  expect(document.querySelectorAll('input[type="checkbox"]')).toHaveLength(6)
+  await click(button('Sync now'))
+  expect(confirmed[0]).not.toHaveProperty('syncOptions')
+  await click(toggle('Replace'))
+  await click(button('Sync now'))
+  expect(confirmed[1].syncOptions).toEqual([...otherOptions, 'Replace=true', 'ServerSideApply=true'])
+  await click(toggle('Server-side apply'))
+  await click(button('Sync now'))
+  expect(confirmed[2].syncOptions).toEqual([...otherOptions, 'Replace=true'])
+})
+
+it('builds the selective sync and its dry-run from the same options', async () => {
+  await render({
+    resource: { kind: 'Deployment', group: 'apps', namespace: 'guestbook', name: 'web' },
+    onValidate: (opts) => validated.push(opts),
+  })
+  await click(button('Dry-run'))
+  await click(button('Sync resource'))
+  expect(validated).toEqual([{ revision: undefined, prune: false, dryRun: true, force: false, applyOnly: false }])
+  expect(confirmed).toEqual([{ revision: undefined, prune: false, dryRun: false, force: false, applyOnly: false }])
+
+  await click(toggle('Replace'))
+  await click(button('Dry-run'))
+  await click(button('Sync resource'))
+  expect(validated[1].syncOptions).toEqual(['CreateNamespace=true', 'Replace=true', 'ServerSideApply=true'])
+  expect(confirmed[1].syncOptions).toEqual(['CreateNamespace=true', 'Replace=true', 'ServerSideApply=true'])
+})
+
+it('reopening resets edits to the Application’s options', async () => {
+  await render()
+  await click(toggle('Server-side apply'))
+  await render({ open: false })
+  await render()
+  expect(toggle('Server-side apply').checked).toBe(true)
+  await click(button('Sync now'))
+  expect(confirmed[0]).not.toHaveProperty('syncOptions')
+})
+
+it("keeps the user's dry-run and revision when the Application's options change while open", async () => {
+  const onValidationReset = vi.fn()
+  await render({ onValidationReset })
+  await click(toggle('Dry run'))
+  const revision = document.querySelector('input:not([type="checkbox"])') as HTMLInputElement
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(revision, 'release-1')
+    revision.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  await render({ onValidationReset, applicationSyncOptions: ['CreateNamespace=true'] })
+  expect(toggle('Dry run').checked).toBe(true)
+  expect(toggle('Server-side apply').checked).toBe(false)
+  expect(onValidationReset).toHaveBeenCalledTimes(1)
+  expect(document.body.textContent).not.toContain(STALE_OPTIONS_NOTICE)
+  expect(document.body.textContent).toContain('Also used for this sync')
+  await click(button('Run dry-run'))
+  expect(confirmed[0]).toEqual({ revision: 'release-1', prune: false, dryRun: true, force: false, applyOnly: false })
+})
+
+it("keeps the user's option edits when the Application's options change while open", async () => {
+  await render()
+  await click(toggle('Replace'))
+  expect(document.body.textContent).not.toContain(STALE_OPTIONS_NOTICE)
+  await render({ applicationSyncOptions: [...APP_OPTIONS] })
+  expect(document.body.textContent).not.toContain(STALE_OPTIONS_NOTICE)
+  await render({ applicationSyncOptions: ['PruneLast=true'] })
+  expect(document.body.textContent).toContain(STALE_OPTIONS_NOTICE)
+  expect([...document.querySelectorAll('li')].map((li) => li.textContent)).toEqual(['CreateNamespace=true'])
+  expect(document.body.textContent).not.toContain("Keep the Application's other sync options")
+  expect(toggle('Replace').checked).toBe(true)
+  expect(toggle('Server-side apply').checked).toBe(true)
+  await click(button('Sync now'))
+  expect(confirmed[0].syncOptions).toEqual(['CreateNamespace=true', 'Replace=true', 'ServerSideApply=true'])
+})
+
+it('sends the options it shows once they are no longer the Application’s current ones', async () => {
+  const onValidationReset = vi.fn()
+  await render({ onValidationReset })
+  await click(toggle('Replace'))
+  await click(toggle('Replace'))
+  await render({ onValidationReset, applicationSyncOptions: [] })
+  expect(toggle('Server-side apply').checked).toBe(true)
+  await click(button('Sync now'))
+  expect(confirmed[0].syncOptions).toEqual(APP_OPTIONS)
+})
+
+it('clears the stale-options notice when live options match again or the dialog reopens', async () => {
+  await render()
+  await click(toggle('Replace'))
+  await render({ applicationSyncOptions: [] })
+  expect(document.body.textContent).toContain(STALE_OPTIONS_NOTICE)
+  await render()
+  expect(document.body.textContent).not.toContain(STALE_OPTIONS_NOTICE)
+  expect(document.body.textContent).toContain('Also used for this sync')
+  await render({ applicationSyncOptions: ['PruneLast=true'] })
+  expect(document.body.textContent).toContain(STALE_OPTIONS_NOTICE)
+  await render({ open: false, applicationSyncOptions: ['PruneLast=true'] })
+  await render({ applicationSyncOptions: ['PruneLast=true'] })
+  expect(document.body.textContent).not.toContain(STALE_OPTIONS_NOTICE)
+  expect(toggle('Replace').checked).toBe(false)
+  expect(document.body.textContent).toContain('Also used for this sync')
+  await click(button('Sync now'))
+  expect(confirmed[0]).not.toHaveProperty('syncOptions')
+})
+
+it('shows the stale-options notice even when the snapshot has no other options', async () => {
+  await render({ applicationSyncOptions: [] })
+  await click(toggle('Replace'))
+  await render({ applicationSyncOptions: ['PruneLast=true'] })
+  expect(document.body.textContent).toContain(STALE_OPTIONS_NOTICE)
+  expect(document.body.textContent).not.toContain('Also used for this sync')
+  await click(button('Sync now'))
+  expect(confirmed[0].syncOptions).toEqual(['Replace=true'])
+})
+
+it('allows revision previews with auto-sync enabled and omits the override for a real sync', async () => {
+  await render({ autoSyncEnabled: true })
+  const revision = document.querySelector('input:not([type="checkbox"])') as HTMLInputElement
+  expect(revision.disabled).toBe(true)
+  expect(document.body.textContent).toContain('Turn off auto-sync to deploy another revision; a dry run can preview one.')
+  await click(toggle('Dry run'))
+  expect(revision.disabled).toBe(false)
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(revision, 'old-sha')
+    revision.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  await click(button('Run dry-run'))
+  expect(confirmed[0]).toMatchObject({ revision: 'old-sha', dryRun: true })
+  await click(toggle('Dry run'))
+  expect(revision.disabled).toBe(true)
+  // The override no longer applies, so it isn't left on screen while the sync deploys something else.
+  expect(revision.value).toBe('')
+  await click(button('Sync now'))
+  expect(confirmed[1].revision).toBeUndefined()
+})
+
+it('omits a previously entered revision when auto-sync becomes enabled while open', async () => {
+  await render()
+  const revision = document.querySelector('input:not([type="checkbox"])') as HTMLInputElement
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(revision, 'old-sha')
+    revision.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+  await render({ autoSyncEnabled: true })
+  expect(revision.disabled).toBe(true)
+  expect(revision.value).toBe('')
+  await click(button('Sync now'))
+  expect(confirmed[0].revision).toBeUndefined()
+})
+
+it.each([
+  { comparedRevision: 'abcdef0123456789abcdef0123456789abcdef01', label: ' (abcdef0)' },
+  { comparedRevision: 'chart-version-1.2.3', label: ' (chart-version-1.2.3)' },
+  { comparedRevision: undefined, label: '' },
+])('explains empty revision pinning with comparison $comparedRevision', async ({ comparedRevision, label }) => {
+  await render({ comparedRevision, pinsComparedRevision: true })
+  expect(document.body.textContent).toContain(`Leave empty for the revision Argo last compared${label}.`)
+  await click(button('Sync now'))
+  expect(confirmed[0].revision).toBeUndefined()
+})
+
+// The backend pins the validation dry-run like the sync, so one target is named.
+it('names one compared target for selective validation and sync', async () => {
+  await render({
+    resource: { kind: 'Deployment', group: 'apps', namespace: 'guestbook', name: 'web' },
+    comparedRevision: 'abcdef0123456789abcdef0123456789abcdef01',
+    pinsComparedRevision: true,
+    onValidate: (opts) => validated.push(opts),
+  })
+  expect(document.body.textContent).toContain('Uses the revision Argo last compared (abcdef0).')
+  expect(document.body.textContent).not.toContain('latest revision')
+  await click(button('Dry-run'))
+  await click(button('Sync resource'))
+  expect(validated[0].revision).toBeUndefined()
+  expect(confirmed[0].revision).toBeUndefined()
+})
+
+// Argo CD's sync panel confirms Replace and Force. Here a real sync using
+// either names it on the button, with one line saying what it can do.
+describe('disruptive sync modes', () => {
+  const primary = () => document.querySelector('button.bg-amber-600, button.btn-brand:last-child')?.textContent?.trim()
+
+  it('says nothing extra for an ordinary sync', async () => {
+    await render()
+    expect(document.body.textContent).not.toContain('can cause downtime')
+    expect(button('Sync now').textContent?.trim()).toBe('Sync now')
+  })
+
+  it('names Replace inherited from the Application before the sync', async () => {
+    await render({ applicationSyncOptions: ['Replace=true'] })
+    expect(document.body.textContent).toContain('Replace deletes and recreates resources instead of updating them, which can cause downtime.')
+    expect(primary()).toBe('Sync with replace')
+  })
+
+  it('names Force and both modes together, and drops the warning for a dry run', async () => {
+    await render()
+    await click(toggle('Force'))
+    expect(document.body.textContent).toContain('Force removes resources immediately, skipping graceful deletion, which can lose data.')
+    expect(primary()).toBe('Sync with force')
+    await click(toggle('Replace'))
+    expect(primary()).toBe('Sync with replace and force')
+    await click(toggle('Dry run'))
+    expect(document.body.textContent).not.toContain('can lose data')
+    expect(primary()).toBe('Run dry-run')
+  })
+
+  it('labels a selective sync the same way', async () => {
+    await render({ resource: { kind: 'Deployment', group: 'apps', namespace: 'guestbook', name: 'web' } })
+    await click(toggle('Force'))
+    expect(primary()).toBe('Sync resource with force')
+  })
+})

package/src/components/gitops/SyncOptionsDialog.test.ts

@@ -1,5 +1,7 @@
 import { describe, expect, it } from 'vitest'
-import { buildArgoSyncOpts } from './SyncOptionsDialog'
+import { argoSyncOptionsForRequest, buildArgoSyncOpts } from './SyncOptionsDialog'
+
+const base = { revision: '', prune: false, dryRun: false, force: false, applyOnly: false, replace: false, serverSideApply: false }
 
 describe('buildArgoSyncOpts', () => {
   it('keeps full application sync controls', () => {
@@ -45,4 +47,55 @@ describe('buildArgoSyncOpts', () => {
       syncOptions: ['ServerSideApply=true'],
     })
   })
+
+  it('sends no options when the toggles match the Application, so its own apply', () => {
+    const opts = buildArgoSyncOpts({ ...base, resourceMode: false, serverSideApply: true, applicationSyncOptions: ['CreateNamespace=true', 'ServerSideApply=true'] })
+    expect(opts).not.toHaveProperty('syncOptions')
+    expect(buildArgoSyncOpts({ ...base, resourceMode: false })).not.toHaveProperty('syncOptions')
+  })
+
+  it("applies a toggle as an edit on top of the Application's options", () => {
+    const applicationSyncOptions = ['CreateNamespace=true', 'ServerSideApply=true', 'PruneLast=true']
+    expect(buildArgoSyncOpts({ ...base, resourceMode: false, replace: true, serverSideApply: true, applicationSyncOptions }).syncOptions)
+      .toEqual(['CreateNamespace=true', 'PruneLast=true', 'Replace=true', 'ServerSideApply=true'])
+    expect(buildArgoSyncOpts({ ...base, resourceMode: false, applicationSyncOptions }).syncOptions)
+      .toEqual(['CreateNamespace=true', 'PruneLast=true'])
+  })
+
+  it("turning on an option the Application sets to false replaces that entry", () => {
+    expect(buildArgoSyncOpts({ ...base, resourceMode: true, serverSideApply: true, applicationSyncOptions: ['ServerSideApply=false', 'Validate=false'] }).syncOptions)
+      .toEqual(['Validate=false', 'ServerSideApply=true'])
+  })
+
+  it('preserves every other option string when editing either owned key', () => {
+    const applicationSyncOptions = ['FailOnSharedResource=true', 'PrunePropagationPolicy=orphan', 'Validate=false', 'Custom=opaque', 'Custom=opaque', 'Replace=false', 'ServerSideApply=false']
+    const otherOptions = applicationSyncOptions.slice(0, -2)
+    expect(buildArgoSyncOpts({ ...base, resourceMode: false, replace: true, applicationSyncOptions }).syncOptions)
+      .toEqual([...otherOptions, 'Replace=true'])
+    expect(buildArgoSyncOpts({ ...base, resourceMode: false, serverSideApply: true, applicationSyncOptions }).syncOptions)
+      .toEqual([...otherOptions, 'ServerSideApply=true'])
+  })
+})
+
+describe('argoSyncOptionsForRequest', () => {
+  const app = ['CreateNamespace=true']
+  it('omits the options for a Radar that inherits them', () => {
+    expect(argoSyncOptionsForRequest(undefined, app, true)).toBeUndefined()
+  })
+  it("sends the Application's options to an older Radar, which would drop them", () => {
+    expect(argoSyncOptionsForRequest(undefined, app, false)).toEqual(app)
+    expect(argoSyncOptionsForRequest(undefined, [], false)).toBeUndefined()
+    expect(argoSyncOptionsForRequest(undefined, undefined, false)).toBeUndefined()
+  })
+  it('sends explicit options unchanged either way', () => {
+    expect(argoSyncOptionsForRequest([], app, false)).toEqual([])
+    expect(argoSyncOptionsForRequest(['Replace=true'], app, true)).toEqual(['Replace=true'])
+  })
+})
+
+describe('buildArgoSyncOpts with options that are no longer current', () => {
+  it('sends the unchanged list instead of omitting it', () => {
+    expect(buildArgoSyncOpts({ ...base, resourceMode: false, serverSideApply: true, applicationSyncOptions: ['ServerSideApply=true'], sendUnchanged: true }).syncOptions)
+      .toEqual(['ServerSideApply=true'])
+  })
 })