@skyhook-io/k8s-ui 1.18.2 → 1.20.0

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'])
+  })
 })