@skyhook-io/radar-app 1.15.0 → 1.16.0

package/src/components/settings/LocalConfigurationDetails.tsx

@@ -0,0 +1,389 @@
+import { useEffect, useRef, useState } from 'react'
+import { Badge, ConfirmDialog, Disclosure } from '@skyhook-io/k8s-ui'
+import {
+  apiUrl,
+  getApiBase,
+  getAuthHeaders,
+  getCredentialsMode,
+} from '../../api/config'
+import {
+  integrationNames,
+  type ConnectionResponse,
+  type IntegrationProfiles,
+  type StoredConnection,
+} from './LocalConnectionSettings'
+import type { SettingsSectionId } from './settings-state'
+
+// Dismissal reports only that the global notice flag is set; replacing the
+// profiles from a late response could overwrite a newer context's settings.
+export function PreviousIntegrationSettingsNotice({ profiles, onNavigate, onDismissed }: {
+  profiles: IntegrationProfiles
+  onNavigate: (section: SettingsSectionId) => void
+  onDismissed: () => void
+}) {
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const available = (['metrics', 'argocd', 'cost'] as const).filter(kind => {
+    const legacy = profiles[kind].legacy
+    return profiles[kind].state === 'auto' && legacy && !legacy.error && !legacy.noticeDismissed
+  })
+  if (available.length === 0) return null
+  const dismiss = async () => {
+    setBusy(true)
+    setError('')
+    try {
+      const response = await fetch(apiUrl('/integrations/connections'), {
+        method: 'PUT',
+        credentials: getCredentialsMode(),
+        headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+        body: JSON.stringify({ action: 'dismiss_previous_notice' }),
+      })
+      const data = (await response.json().catch(() => ({}))) as ConnectionResponse
+      if (!response.ok) throw new Error(data.error || `Settings request failed (${response.status})`)
+      onDismissed()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    } finally {
+      setBusy(false)
+    }
+  }
+  return (
+    <section aria-label="Previous integration settings" className="mt-3 rounded-lg border border-theme-border bg-accent-muted p-3">
+      <h4 className="text-sm font-medium text-theme-text-primary">Integration settings are now saved per cluster</h4>
+      <p className="mt-1 text-xs text-theme-text-secondary">
+        Your previous global settings no longer apply automatically. To use them for this cluster, choose{' '}
+        <span className="font-medium">Copy settings from… → Previous global settings</span> in its tab.
+      </p>
+      <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2">
+        {available.map(kind => (
+          <button key={kind} type="button" className="text-xs text-accent-text hover:underline"
+            onClick={() => onNavigate(kind === 'metrics' ? 'prometheus' : kind)}>
+            Review {integrationNames[kind]}
+          </button>
+        ))}
+        <button type="button" disabled={busy} className="text-xs text-theme-text-secondary hover:underline disabled:opacity-50"
+          onClick={() => void dismiss()}>
+          Don’t show again
+        </button>
+      </div>
+      {error && <p role="alert" className="mt-2 text-xs text-warning-text">{error}</p>}
+    </section>
+  )
+}
+
+export const integrationSettingsByClusterId = 'integration-settings-by-cluster'
+
+export function LocalConfigurationDetails({ onNavigate }: { onNavigate: (section: SettingsSectionId) => void }) {
+  return (
+    <div className="mt-5 border-t border-theme-border pt-4">
+      <Disclosure
+        summary="Configuration files"
+        summaryClassName="text-sm font-medium text-theme-text-primary"
+      >
+        <div className="space-y-3 pt-2 text-xs text-theme-text-secondary">
+          <p>
+            CLI and Desktop share these files in <code>~/.radar/</code> on this
+            machine.
+          </p>
+          <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2">
+            <dt className="font-mono text-theme-text-primary">config.json</dt>
+            <dd>
+              Startup defaults, such as browser, port and timeline storage.
+              Flags take precedence.
+            </dd>
+            <dt className="font-mono text-theme-text-primary">settings.json</dt>
+            <dd>Local preferences, audit settings and OCI registry sources.</dd>
+            <dt className="font-mono text-theme-text-primary">clusters.json</dt>
+            <dd>
+              Metrics, Argo CD and Cost connections and credentials, saved per
+              kubeconfig entry.{' '}
+              <button
+                type="button"
+                className="text-accent-text hover:underline"
+                onClick={() => {
+                  onNavigate('connection')
+                  requestAnimationFrame(() => document.getElementById(integrationSettingsByClusterId)?.focus())
+                }}
+              >
+                Review integration settings by cluster
+              </button>
+            </dd>
+          </dl>
+          <p className="text-theme-text-tertiary">
+            Credentials are permission-protected plaintext, not encrypted.
+            Connection edits from another process apply on the next integration
+            operation.
+          </p>
+        </div>
+      </Disclosure>
+    </div>
+  )
+}
+
+export function SavedClusterConnections({
+  active,
+  profiles,
+  onChange,
+  onBusyChange,
+}: {
+  active: boolean
+  profiles: IntegrationProfiles
+  onChange: (profiles: IntegrationProfiles) => void
+  onBusyChange: (busy: boolean) => void
+}) {
+  const [uses, setUses] = useState<StoredConnection[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [version, setVersion] = useState(0)
+  const [selected, setSelected] = useState<StoredConnection | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [message, setMessage] = useState('')
+  const request = useRef<AbortController | null>(null)
+  const summary = useRef<HTMLHeadingElement>(null)
+  const confirmationError = useRef<HTMLParagraphElement>(null)
+  // The removed entry's button is gone, so the dialog cannot return focus to it.
+  const focusSummary = useRef(false)
+
+  useEffect(() => {
+    if (selected || busy || !focusSummary.current) return
+    focusSummary.current = false
+    summary.current?.focus()
+  }, [selected, busy])
+
+  useEffect(() => {
+    if (selected && error && !busy) confirmationError.current?.focus()
+  }, [selected, error, busy])
+
+  useEffect(() => {
+    if (!active) return
+    const controller = new AbortController()
+    const base = getApiBase()
+    setLoading(true)
+    setError('')
+    void fetch(apiUrl('/integrations/connections'), {
+      signal: controller.signal,
+      credentials: getCredentialsMode(),
+      headers: getAuthHeaders(),
+    })
+      .then(async (response) => {
+        const data = (await response.json().catch(() => ({}))) as ConnectionResponse
+        if (!response.ok)
+          throw new Error(data.error || 'Could not load saved connections.')
+        if (controller.signal.aborted || getApiBase() !== base) return
+        setUses(data.connections)
+      })
+      .catch((error) => {
+        if (!controller.signal.aborted)
+          setError(error instanceof Error ? error.message : String(error))
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setLoading(false)
+      })
+    return () => controller.abort()
+  }, [active, version])
+
+  useEffect(
+    () => () => {
+      request.current?.abort()
+      onBusyChange(false)
+    },
+    [onBusyChange],
+  )
+
+  const remove = async () => {
+    if (!selected || request.current) return
+    const controller = new AbortController()
+    request.current = controller
+    const base = getApiBase()
+    setBusy(true)
+    onBusyChange(true)
+    setError('')
+    try {
+      const response = await fetch(apiUrl('/integrations/connections'), {
+        method: 'PUT',
+        signal: controller.signal,
+        credentials: getCredentialsMode(),
+        headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+        body: JSON.stringify({
+          action: 'forget',
+          kind: selected.integration,
+          binding: selected.binding,
+          sourceRevision: selected.revision,
+          confirmRemoval: true,
+        }),
+      })
+      const data = (await response.json().catch(() => ({}))) as ConnectionResponse
+      if (controller.signal.aborted || getApiBase() !== base) return
+      if (!response.ok)
+        throw new Error(data.error || 'Could not remove the saved connection.')
+      setUses(data.connections)
+      setMessage(
+        `Removed the saved ${integrationNames[selected.integration]} connection for ${selected.context}.`,
+      )
+      focusSummary.current = true
+      setSelected(null)
+      onChange(data.profiles)
+    } catch (error) {
+      if (!controller.signal.aborted)
+        setError(error instanceof Error ? error.message : String(error))
+    } finally {
+      if (!controller.signal.aborted) {
+        setBusy(false)
+        onBusyChange(false)
+      }
+      if (request.current === controller) request.current = null
+    }
+  }
+
+  const clusters = new Map<string, StoredConnection[]>()
+  for (const use of uses) {
+    const entries = clusters.get(use.binding) ?? []
+    entries.push(use)
+    clusters.set(use.binding, entries)
+  }
+  return (
+    <section
+      className="mt-5 space-y-3 border-t border-theme-border pt-4"
+    >
+      <h4
+        ref={summary}
+        id={integrationSettingsByClusterId}
+        tabIndex={-1}
+        className="text-sm font-semibold text-theme-text-primary outline-none"
+      >
+        Integration settings by cluster
+      </h4>
+      <div className="space-y-3 pt-2">
+        <p className="text-xs text-theme-text-secondary">
+          Metrics, Argo CD and Cost settings saved for each kubeconfig entry.
+          Edit the current cluster’s in its own tab. Removing an entry applies
+          immediately and changes nothing in Kubernetes or the backend.
+        </p>
+        {loading && (
+          <p role="status" className="text-xs text-theme-text-tertiary">
+            Loading saved connections…
+          </p>
+        )}
+        {!loading && !error && clusters.size === 0 && (
+          <p className="text-xs text-theme-text-tertiary">
+            No saved connections yet.
+          </p>
+        )}
+        {!loading &&
+          Array.from(clusters, ([binding, entries]) => {
+            const entry = entries[0]
+            const current = Object.values(profiles).some(
+              (profile) => profile.target.binding === binding,
+            )
+            return (
+              <div key={binding} className="card-inner-lg space-y-2 text-xs">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="font-medium text-theme-text-primary">
+                    {entry.context}
+                  </span>
+                  {current ? (
+                    <Badge tone="note" size="sm">
+                      Current cluster
+                    </Badge>
+                  ) : entry.availability === 'removed' ? (
+                    <Badge tone="note" size="sm">
+                      Not in kubeconfig
+                    </Badge>
+                  ) : entry.availability === 'unavailable' ? (
+                    <Badge tone="note" size="sm">
+                      Kubeconfig not loaded
+                    </Badge>
+                  ) : null}
+                </div>
+                <p className="break-all text-theme-text-tertiary">
+                  {entry.source} · {entry.inFileName}
+                </p>
+                {!current && entry.availability === 'removed' && (
+                  <p className="text-theme-text-secondary">
+                    This kubeconfig entry is gone, but its connections are still
+                    saved. To reuse one, select the new context and choose “Copy
+                    settings from…” in that integration’s settings.
+                  </p>
+                )}
+                {(current ||
+                  entries.every((use) => use.availability === 'available')) && (
+                  <p className="text-theme-text-secondary">
+                    Saved:{' '}
+                    {entries
+                      .map((use) => integrationNames[use.integration])
+                      .join(' · ')}
+                  </p>
+                )}
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+                  {entries
+                    .filter(
+                      (use) => !current && use.availability !== 'available',
+                    )
+                    .map((use) => (
+                      <div key={use.integration} className="flex items-center">
+                        <button
+                          type="button"
+                          disabled={busy}
+                          className="text-accent-text hover:underline disabled:opacity-50"
+                          aria-label={`Remove saved ${integrationNames[use.integration]} connection for ${use.context}`}
+                          onClick={() => {
+                            setSelected(use)
+                            setError('')
+                            setMessage('')
+                          }}
+                        >
+                          Remove {integrationNames[use.integration]}
+                        </button>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            )
+          })}
+        {message && (
+          <p role="status" className="text-xs text-theme-text-secondary">
+            {message}
+          </p>
+        )}
+        {error && !selected && (
+          <p role="alert" className="text-xs text-warning-text">
+            {error}{' '}
+            <button
+              type="button"
+              className="underline"
+              onClick={() => setVersion((value) => value + 1)}
+            >
+              Reload saved connections
+            </button>
+          </p>
+        )}
+      </div>
+      <ConfirmDialog
+        open={!!selected}
+        onClose={() => setSelected(null)}
+        onConfirm={() => void remove()}
+        title="Remove saved connection?"
+        message={
+          selected
+            ? `Remove the saved ${integrationNames[selected.integration]} connection and credentials for ${selected.context}? Other saved connections are unchanged. Nothing is deleted from Kubernetes or the backend.${selected.availability === 'unavailable' ? ' This entry may still exist in another kubeconfig; removal also affects any CLI or Desktop using that entry.' : ''}`
+            : ''
+        }
+        confirmLabel="Remove connection"
+        isLoading={busy}
+        confirmDisabled={!!error}
+        showWarning={false}
+      >
+        {error && (
+          <p
+            ref={confirmationError}
+            tabIndex={-1}
+            role="alert"
+            className="text-sm text-warning-text"
+          >
+            {error} Cancel and reload saved connections before trying again.
+          </p>
+        )}
+      </ConfirmDialog>
+    </section>
+  )
+}

package/src/components/settings/LocalConnectionSettings.test.tsx

@@ -0,0 +1,189 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import {
+  LocalConnectionSettings,
+  type IntegrationProfile,
+  type IntegrationProfiles
+} from './LocalConnectionSettings'
+import { PreviousIntegrationSettingsNotice } from './LocalConfigurationDetails'
+
+const profile: IntegrationProfile = {
+  target: {
+    binding: 'opaque',
+    context: 'development',
+    source: '/configs/team',
+    inFileName: 'dev',
+    fingerprint: 'target',
+    clientGeneration: 1,
+    operationGeneration: 1,
+    identity: {
+      server: 'https://kubernetes',
+      user: 'developer',
+      trust: 'trust',
+      insecureTls: false
+    }
+  },
+  revision: 'revision',
+  state: 'auto',
+  mode: 'auto',
+  url: '',
+  headerKeys: [],
+  envHeaderKeys: [],
+  headersManaged: false,
+  secretSet: false,
+  insecureTls: false,
+  clusterId: ''
+}
+const render = (
+  changes: Partial<IntegrationProfile>,
+  kind: keyof IntegrationProfiles = 'metrics'
+) => {
+  const profiles: IntegrationProfiles = {
+    metrics: profile,
+    argocd: profile,
+    cost: profile,
+    [kind]: { ...profile, ...changes }
+  }
+  return renderToStaticMarkup(
+    <LocalConnectionSettings
+      kind={kind}
+      profiles={profiles}
+      onChange={vi.fn()}
+      onDirtyChange={vi.fn()}
+    />
+  )
+}
+const savedProfile: Partial<IntegrationProfile> = {
+  state: 'saved',
+  url: 'https://metrics',
+  headerKeys: ['Authorization', 'X-Scope-OrgID'],
+  target: { ...profile.target, binding: 'development' }
+}
+
+describe('Local saved connections', () => {
+  it('only advertises previous settings for unconfigured integrations', () => {
+    const legacy = { url: 'https://previous', headerKeys: [], envHeaderKeys: [], secretSet: false, insecureTls: false, mode: 'auto', clusterId: '', revision: 'previous', omitted: [], noticeDismissed: false }
+    const profiles: IntegrationProfiles = {
+      metrics: { ...profile, legacy },
+      argocd: { ...profile, state: 'saved', legacy },
+      cost: { ...profile, state: 'launch', legacy },
+    }
+    const notice = () => renderToStaticMarkup(<PreviousIntegrationSettingsNotice profiles={profiles} onNavigate={vi.fn()} onDismissed={vi.fn()} />)
+    const html = notice()
+    expect(html).toContain('now saved per cluster')
+    expect(html).toContain('Review Metrics')
+    expect(html).not.toContain('Review Argo CD')
+    expect(html).not.toContain('Review Cost')
+    profiles.metrics.legacy = { ...legacy, noticeDismissed: true }
+    expect(notice()).toBe('')
+    delete profiles.metrics.legacy
+    expect(notice()).toBe('')
+  })
+  it.each(['metrics', 'argocd', 'cost'] as const)(
+    'does not show a routine reload action for %s',
+    (kind) => {
+      for (const state of [
+        'auto',
+        'saved',
+        'launch',
+        'target_changed'
+      ] as const) {
+        expect(render({ state }, kind)).not.toContain('Reload')
+      }
+    }
+  )
+  it('keeps first setup a form, with no mandatory name or assignment step', () => {
+    const html = render({})
+    expect(html).toContain('Save changes')
+    expect(html).toContain('Add header')
+    expect(html).not.toContain('Copy settings from')
+    expect(html).toContain('Cluster settings identity')
+  })
+  it('names common compatible backends without claiming an exhaustive list', () => {
+    const html = render({ headerKeys: ['Authorization', 'X-Scope-OrgID'] })
+    expect(html).toContain(
+      'such as Prometheus, VictoriaMetrics, Thanos or Grafana Mimir'
+    )
+    expect(html).toContain('Authentication headers')
+    expect(html).toContain('Authorization value')
+    expect(html).toContain('X-Scope-OrgID value')
+    expect(html).toContain('Saved value')
+    expect(html).not.toContain('Edit headers')
+    expect(html).not.toContain('<select')
+  })
+  it('offers previous settings as a copy source and never activates them by default', () => {
+    const html = render({
+      legacy: {
+        url: 'https://legacy',
+        headerKeys: ['Authorization'],
+        envHeaderKeys: [],
+        insecureTls: false,
+        mode: 'connection',
+        clusterId: '',
+        secretSet: true,
+        revision: 'legacy',
+        omitted: [],
+        noticeDismissed: true
+      }
+    })
+    expect(html).toContain('Copy settings from…')
+    expect(html).not.toContain('https://legacy')
+  })
+  it('keeps launch overrides read-only with a way to change their source', () => {
+    const html = render({
+      state: 'launch',
+      url: 'https://temporary',
+      headerKeys: ['Authorization']
+    })
+    expect(html).toContain('Set for this launch')
+    expect(html).toContain(
+      'Restart without its startup flags or environment configuration'
+    )
+    expect(html).not.toContain('Save changes')
+  })
+  it('requires review for changed cluster identity', () => {
+    const html = render({
+      state: 'target_changed',
+      url: 'https://saved',
+      error: 'Review the changed cluster connection'
+    })
+    expect(html).toContain('Review changes')
+    expect(html).not.toContain('Save changes')
+  })
+  it.each(['argocd', 'cost'] as const)(
+    'lets paused discovery credentials be replaced without accepting them for %s',
+    (kind) => {
+      const html = render(
+        { state: 'target_changed', url: '', secretSet: true, error: 'The cluster behind this context changed' },
+        kind
+      )
+      expect(html).toContain('Review changes')
+      expect(html).toContain('Use a different connection')
+    }
+  )
+  it.each(['metrics', 'argocd', 'cost'] as const)(
+    'offers contextual recovery rather than overwriting a malformed file for %s',
+    (kind) => {
+      const html = render(
+        { state: 'error', error: 'Repair clusters.json' },
+        kind
+      )
+      expect(html).toContain('Repair clusters.json')
+      expect(html).toContain('Reload latest settings')
+      expect(html).not.toContain('Save changes')
+    }
+  )
+  it.each(['metrics', 'argocd', 'cost'] as const)(
+    'edits only this cluster for %s',
+    (kind) => {
+      const html = render({ ...savedProfile, secretSet: true }, kind)
+      expect(html).toContain('Save changes')
+      expect(html).not.toContain('Copy settings from')
+      expect(html).not.toContain('Reload')
+    }
+  )
+  it('keeps file details and saved-entry cleanup out of integration tabs', () => {
+    const html = render(savedProfile)
+    expect(html).not.toContain('clusters.json')
+  })
+})