@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/helm/TrackChartSourceDialog.tsx

@@ -1,204 +1,181 @@
-import { useState, useId } from 'react'
+import { useId, useState, type FormEvent } from 'react'
 import { DialogPortal } from '@skyhook-io/k8s-ui/components/ui/DialogPortal'
-import { X, Plus, Trash2, Link2, AlertTriangle } from 'lucide-react'
-import { clsx } from 'clsx'
-import { useHelmOCISources, useAddOCISource, useRemoveOCISource, useClusterInfo, useCapabilities, useCloudRole } from '../../api/client'
-import { OperatorManagedNotice } from '../settings/OperatorManagedNotice'
+import { AlertTriangle, Link2, Plus, Trash2, X } from 'lucide-react'
 import { Input } from '@skyhook-io/k8s-ui'
-import type { UpgradeInfo } from '../../types'
+import { useAddHelmRepository, useAddOCISource, useCapabilities, useCloudRole, useClusterInfo, useHelmOCISources, useHelmRepositories, useHelmSourceStatus, useRemoveOCISource, useSetHelmSource } from '../../api/client'
+import { OperatorManagedNotice } from '../settings/OperatorManagedNotice'
+import type { ChartSourceStatus, HelmRepository, UpgradeInfo } from '../../types'
 
 interface TrackChartSourceDialogProps {
   open: boolean
   onClose: () => void
-  /** Chart name of the release this was opened from, for the example prompt. */
   chartName?: string
+  namespace: string
+  releaseName: string
   sourceIssue?: UpgradeInfo['sourceIssue']
   sourceError?: string
 }
 
-function getSourceIssueCopy(sourceIssue: UpgradeInfo['sourceIssue'], sourceError?: string, operatorManaged = false) {
+export function isValidHelmRepositoryURL(value: string) {
+  try {
+    const parsed = new URL(value.trim())
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
+export function sourceStateLabel(recorded: boolean, configured: boolean, available: boolean) {
+  if (!recorded) return 'Not recorded'
+  if (!configured) return 'Recorded · not configured here'
+  if (!available) return 'Recorded and configured · unavailable or version missing'
+  return 'Recorded · configured · available'
+}
+
+// What the dialog says about the release's recorded source. "Not recorded" is
+// a claim about the release, so it shows only once the read has succeeded.
+export function sourceStatusLine(status: ChartSourceStatus | undefined, error: unknown) {
+  if (status) return sourceStateLabel(Boolean(status.recorded), status.configured, status.available)
+  if (error) return `Could not read this release's source: ${error instanceof Error ? error.message : String(error)}`
+  return 'Checking the recorded source...'
+}
+
+// Short form of a repository URL for a button label: host and path, no scheme.
+export function repositoryDisplayURL(url: string) {
+  try {
+    const parsed = new URL(url)
+    return `${parsed.host}${parsed.pathname}`.replace(/\/+$/, '')
+  } catch {
+    return url
+  }
+}
+
+// Mirrors normalizedRepositoryName in internal/helm/chart_sources.go. The
+// server stores names in this form, so collisions are checked on it.
+const MAX_REPOSITORY_NAME_LENGTH = 40
+export function normalizedRepositoryName(name: string) {
+  const base = name.trim().toLowerCase().replace(/[^a-z0-9._-]+/g, '-').replace(/^[-._]+|[-._]+$/g, '')
+  return base.length > MAX_REPOSITORY_NAME_LENGTH ? base.slice(0, MAX_REPOSITORY_NAME_LENGTH).replace(/[-._]+$/, '') : base
+}
+
+// Name for re-adding the recorded repository on this machine. Reuses the
+// recorded alias when it is free here; otherwise the first free "<alias>-N",
+// so an alias that points at a different repository is never reused. The
+// server refuses a taken name, which covers a repository added meanwhile.
+// An empty result lets the server pick a name from the URL.
+export function recordedRepositoryName(alias: string, repositories: HelmRepository[]) {
+  const base = normalizedRepositoryName(alias)
+  if (!base) return ''
+  const taken = new Set(repositories.map(repository => normalizedRepositoryName(repository.name)))
+  if (!taken.has(base)) return base
+  for (let n = 2; ; n++) {
+    const suffix = `-${n}`
+    const name = base.slice(0, MAX_REPOSITORY_NAME_LENGTH - suffix.length).replace(/[-._]+$/, '') + suffix
+    if (!taken.has(name)) return name
+  }
+}
+
+export function getSourceIssueCopy(sourceIssue: UpgradeInfo['sourceIssue'], sourceError?: string) {
   switch (sourceIssue) {
-    case 'repo_index_error':
-      return {
-        title: 'A Helm repo index failed',
-        body: operatorManaged
-          ? 'Ask the operator to fix the Helm repo index, or add the chart’s OCI registry prefix to helm.ociSources if it came from OCI.'
-          : 'Fix, refresh, or remove the broken Helm repo index. If this release came from OCI, add its registry prefix and Radar will check OCI before reporting that repo error.',
-      }
+    case 'repo_index_error': return { title: 'A Helm repo index failed', body: 'Fix or refresh the repository before associating it.' }
     case 'ambiguous_repository':
-      return {
-        title: 'Multiple Helm repos match',
-        body: 'Radar will not guess between classic repos. Adding an OCI prefix will not enable direct upgrades while those repos remain ambiguous.',
-      }
-    case 'untracked':
-      return {
-        title: 'Source not tracked',
-        body: operatorManaged
-          ? 'Helm does not record the install source. Ask the operator to add the OCI prefix that contains this chart to helm.ociSources.'
-          : 'Helm does not record the install source. Add the OCI prefix that contains this chart.',
-      }
-    default:
-      return sourceError
-        ? { title: 'Source unresolved', body: sourceError }
-        : undefined
+    case 'ambiguous_source': return { title: 'Multiple chart sources match', body: 'Radar will not guess. Select the source that originally supplied this release.' }
+    case 'source_unavailable': return { title: 'Recorded source unavailable', body: 'The release provenance is preserved, but that source cannot currently be verified here.' }
+    case 'untracked': return { title: 'Source not recorded', body: 'Select an exact configured match, or add the original classic repository or OCI prefix.' }
+    default: return sourceError ? { title: 'Source unresolved', body: sourceError } : undefined
   }
 }
 
-// TrackChartSourceDialog lets the user register an OCI chart-source prefix — the
-// OCI analog of `helm repo add`. Helm doesn't persist the ref a release was
-// installed from, so for charts published to an OCI registry (and not managed by
-// GitOps) Radar can only track upgrades once the user declares where they live.
-// Registering a registry/org prefix lets Radar probe "<prefix>/<chartName>".
-export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue, sourceError }: TrackChartSourceDialogProps) {
-  const titleId = useId()
-  const [value, setValue] = useState('')
-  const { data: sources } = useHelmOCISources()
+export function TrackChartSourceDialog({ open, onClose, chartName, namespace, releaseName, sourceIssue, sourceError }: TrackChartSourceDialogProps) {
+  const [ociPrefix, setOCIPrefix] = useState('')
+  const [repositoryName, setRepositoryName] = useState('')
+  const [repositoryURL, setRepositoryURL] = useState('')
+  const { data: status, error: statusError, refetch: refetchStatus } = useHelmSourceStatus(namespace, releaseName, open)
+  const { data: ociSources } = useHelmOCISources()
   const { data: clusterInfo } = useClusterInfo()
-  const addSource = useAddOCISource()
-  const removeSource = useRemoveOCISource()
   const { data: capabilities } = useCapabilities()
-  const operatorManaged = capabilities?.configManagement === 'operator'
+  const addOCI = useAddOCISource()
+  const removeOCI = useRemoveOCISource()
+  const addRepository = useAddHelmRepository()
+  const setSource = useSetHelmSource(namespace, releaseName)
+  const issueCopy = getSourceIssueCopy(sourceIssue, sourceError)
+  const recorded = status?.recorded
+  const configManaged = capabilities?.configManagement === 'operator'
   // Chart sources are shared configuration that every user's upgrades resolve
   // against, so in Radar Cloud only owners change them (the server enforces it).
   const ownerOnly = !useCloudRole().canAtLeast('owner')
-  const canEdit = capabilities != null && !operatorManaged && !ownerOnly
-
-  // In-cluster Radar has no `helm registry login` store (the pod's HELM_CONFIG_HOME
-  // points at an empty /tmp), so private registries can't authenticate — only
-  // public charts can be tracked. Be honest about it rather than silently failing.
-  const inCluster = clusterInfo?.inCluster ?? false
-
-  const trimmed = value.trim()
-  const invalid = trimmed !== '' && !trimmed.startsWith('oci://')
-  const normalizedInput = trimmed.replace(/\/+$/, '')
-  const normalizedChartName = chartName?.trim().replace(/^\/+|\/+$/g, '') ?? ''
-  const probedRef = normalizedInput && normalizedChartName ? `${normalizedInput}/${normalizedChartName}` : ''
-  const looksLikeFullChartRef = Boolean(normalizedInput && normalizedChartName && normalizedInput.endsWith(`/${normalizedChartName}`))
-  const sourceIssueCopy = getSourceIssueCopy(sourceIssue, sourceError, operatorManaged)
+  const canEditSources = capabilities != null && !configManaged && !ownerOnly
+  const titleId = useId()
+  // The release says which repository it came from, but this machine has no
+  // repository with that URL: offer to add exactly that one.
+  const missingRecordedRepository = status && !status.configured && recorded?.type === 'repository' && recorded.url ? recorded : undefined
+  const { data: repositories, isLoading: repositoriesLoading } = useHelmRepositories()
+  const recordedName = missingRecordedRepository ? recordedRepositoryName(missingRecordedRepository.reference, repositories ?? []) : undefined
 
-  const handleAdd = () => {
-    if (!trimmed || invalid) return
-    addSource.mutate(trimmed, { onSuccess: () => setValue('') })
+  const addRecordedRepository = () => {
+    if (!missingRecordedRepository || recordedName === undefined) return
+    addRepository.mutate({ name: recordedName, url: missingRecordedRepository.url, namespace, releaseName }, { onSuccess: onClose })
   }
 
-  return (
-    <DialogPortal ariaLabelledBy={titleId} open={open} onClose={onClose} className="max-w-lg w-full">
-      <div className="flex items-start gap-3 p-4 border-b border-theme-border">
-        <div className="flex items-center justify-center w-10 h-10 rounded-full shrink-0 bg-theme-hover">
-          <Link2 className="w-5 h-5 text-theme-text-secondary" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <h3 id={titleId} className="text-lg font-semibold text-theme-text-primary">Track chart source</h3>
-          <p className="text-sm text-theme-text-secondary mt-1">
-            Helm doesn&apos;t record where a chart was installed from. Radar checks registered OCI
-            prefixes for newer versions of your charts.
-          </p>
-        </div>
-        <button
-          onClick={onClose}
-          aria-label="Close"
-          className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
-        >
-          <X className="w-5 h-5" />
-        </button>
-      </div>
-
-      <div className="p-4 space-y-4">
-        {operatorManaged && <OperatorManagedNotice helmValue="helm.ociSources" />}
-        {!operatorManaged && ownerOnly && (
-          <p className="text-sm text-theme-text-secondary">
-            Only organization owners can add or remove chart sources.
-          </p>
-        )}
-        {sourceIssueCopy && (
-          <div className="flex items-start gap-2 rounded-lg border border-theme-border bg-theme-elevated px-3 py-2 text-sm">
-            <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5 text-theme-text-secondary" />
-            <div>
-              <p className="font-medium text-theme-text-primary">{sourceIssueCopy.title}</p>
-              <p className="text-theme-text-secondary">{sourceIssueCopy.body}</p>
-            </div>
-          </div>
-        )}
-
-        {canEdit && <div>
-          <label className="block text-sm font-medium text-theme-text-secondary mb-2">
-            OCI registry prefix
-          </label>
-          <div className="flex gap-2">
-            <Input
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-              onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
-              placeholder="oci://ghcr.io/myorg/charts"
-              aria-invalid={invalid ? true : undefined}
-              className={clsx(
-                'flex-1 px-3 py-2 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
-                invalid ? 'border-red-500/60 focus:ring-red-500' : 'border-theme-border-light focus:ring-accent',
-              )}
-            />
-            <button
-              onClick={handleAdd}
-              disabled={!trimmed || invalid || addSource.isPending}
-              className="btn-brand px-3 py-2 text-sm inline-flex items-center gap-1 disabled:opacity-50 disabled:pointer-events-none"
-            >
-              <Plus className="w-4 h-4" />
-              Add
-            </button>
-          </div>
-          <p className="mt-1 text-xs text-theme-text-tertiary">
-            {invalid
-              ? 'Must be an oci:// reference.'
-              : looksLikeFullChartRef
-                ? `This looks like a full chart ref. Radar would probe "${probedRef}"; remove the final "/${normalizedChartName}" if "${normalizedChartName}" is the chart name.`
-              : chartName
-                ? `Radar will probe "${probedRef || `<prefix>/${normalizedChartName}`}".`
-                : 'Radar probes <prefix>/<chartName> for each untracked release.'}
-          </p>
-        </div>}
+  const addRepositoryAndAssociate = (event: FormEvent) => {
+    event.preventDefault()
+    const name = repositoryName.trim()
+    const url = repositoryURL.trim()
+    if (!name || !isValidHelmRepositoryURL(url)) return
+    addRepository.mutate({ name, url, namespace, releaseName }, { onSuccess: onClose })
+  }
 
-        {sources && sources.length > 0 && (
-          <div>
-            <p className="text-xs font-medium text-theme-text-tertiary uppercase tracking-wide mb-2">
-              Registered sources
-            </p>
-            <ul className="space-y-1">
-              {sources.map((src) => (
-                <li
-                  key={src}
-                  className="flex items-center justify-between gap-2 px-3 py-2 bg-theme-elevated rounded-lg"
-                >
-                  <span className="text-sm text-theme-text-primary font-mono truncate">{src}</span>
-                  {canEdit && <button
-                    onClick={() => removeSource.mutate(src)}
-                    disabled={removeSource.isPending}
-                    className="p-1 text-theme-text-secondary hover:text-red-400 hover:bg-red-500/10 rounded disabled:opacity-50"
-                    aria-label={`Remove ${src}`}
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </button>}
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
+  const addOCIPrefix = async (event: FormEvent) => {
+    event.preventDefault()
+    if (!ociPrefix.trim().startsWith('oci://')) return
+    await addOCI.mutateAsync(ociPrefix.trim())
+    setOCIPrefix('')
+    await refetchStatus()
+  }
 
-        {inCluster ? (
-          <div className="flex items-start gap-2 rounded-lg border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
-            <AlertTriangle className="w-4 h-4 shrink-0 mt-px" />
-            <span>
-              Radar is running in-cluster, where it has no{' '}
-              <span className="font-mono">helm registry login</span> credentials — only{' '}
-              <strong>public</strong> charts can be tracked. Private-registry support for in-cluster
-              Radar isn&apos;t available yet.
-            </span>
-          </div>
-        ) : (
-          <p className="text-xs text-theme-text-tertiary">
-            Credentials are reused from your <span className="font-mono">helm registry login</span>.
-            Radar stores no registry secrets.
-          </p>
-        )}
+  return <DialogPortal ariaLabelledBy={titleId} open={open} onClose={onClose} className="max-w-2xl w-full">
+    <div className="flex items-start gap-3 p-4 border-b border-theme-border">
+      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-theme-hover"><Link2 className="w-5 h-5" /></div>
+      <div className="flex-1 min-w-0"><h3 id={titleId} className="text-lg font-semibold">Track chart source</h3><p className="text-sm text-theme-text-secondary mt-1">Tell Radar which repository or OCI source this release was installed from. Upgrades then come only from that source.</p></div>
+      <button onClick={onClose} aria-label="Close" className="p-1 rounded hover:bg-theme-elevated"><X className="w-5 h-5" /></button>
+    </div>
+    <div className="p-4 space-y-4">
+	  {configManaged && <OperatorManagedNotice helmValue="helm.ociSources" />}
+      {!configManaged && ownerOnly && <p className="text-sm text-theme-text-secondary">Only organization owners can add or remove chart sources.</p>}
+      {issueCopy && <div className="flex gap-2 rounded-lg border border-theme-border bg-theme-elevated px-3 py-2 text-sm"><AlertTriangle className="w-4 h-4 mt-0.5 shrink-0" /><div><p className="font-medium">{issueCopy.title}</p><p className="text-theme-text-secondary">{issueCopy.body}</p></div></div>}
+      <div className="rounded-lg border border-theme-border px-3 py-2">
+        <p className="text-xs uppercase tracking-wide text-theme-text-tertiary">Release source state</p>
+        <p className="text-sm font-medium mt-1 break-all">{sourceStatusLine(status, statusError)}</p>
+        {!status && statusError && <button type="button" onClick={() => refetchStatus()} className="mt-2 px-3 py-1.5 text-sm text-theme-text-primary border border-theme-border rounded-lg hover:bg-theme-elevated transition-colors">Retry</button>}
+        {recorded && <p className="font-mono text-xs text-theme-text-secondary mt-1 break-all">{recorded.url ?? recorded.reference}</p>}
       </div>
-    </DialogPortal>
-  )
+      {missingRecordedRepository && recordedName !== undefined && <div className="space-y-1">
+        <button type="button" onClick={addRecordedRepository} disabled={!canEditSources || repositoriesLoading || addRepository.isPending} className="btn-brand inline-flex items-center gap-1 px-3 py-2 max-w-full"><Plus className="w-4 h-4 shrink-0" /><span className="truncate">Add {repositoryDisplayURL(missingRecordedRepository.url)} and use it</span></button>
+        <p className="text-xs text-theme-text-tertiary">{!recordedName
+          ? 'Radar picks a name for it in Helm.'
+          : recordedName === missingRecordedRepository.reference
+            ? <>Saved in Helm as <span className="font-mono">{recordedName}</span>, the name it was recorded under.</>
+            : recordedName === normalizedRepositoryName(missingRecordedRepository.reference)
+              ? <>Saved in Helm as <span className="font-mono">{recordedName}</span>.</>
+              : <>Saved in Helm as <span className="font-mono">{recordedName}</span>. The name <span className="font-mono">{missingRecordedRepository.reference}</span> already points to a different repository here.</>}</p>
+      </div>}
+      {status?.candidates && status.candidates.length > 0 && <div>
+        <p className="text-xs uppercase tracking-wide text-theme-text-tertiary mb-2">Configured sources that publish {chartName || 'this chart'} at the installed version</p>
+        <div className="space-y-2">{status.candidates.map(candidate => <button key={`${candidate.type}:${candidate.url ?? candidate.reference}`} onClick={() => setSource.mutate(candidate, { onSuccess: onClose })} disabled={setSource.isPending} className="w-full text-left rounded-lg border border-theme-border px-3 py-2 hover:border-accent disabled:opacity-50"><span className="text-xs uppercase text-theme-text-tertiary">{candidate.type}</span><span className="block font-mono text-sm break-all">{candidate.url ?? candidate.reference}</span></button>)}</div>
+        {status.candidates.length > 1 && <p className="text-xs text-amber-600 mt-2">Multiple sources publish this exact chart and version. Choose explicitly; Radar will not auto-associate one.</p>}
+      </div>}
+      <form onSubmit={addRepositoryAndAssociate} className="space-y-2">
+        <p className="text-xs uppercase tracking-wide text-theme-text-tertiary">Add classic repository and associate</p>
+		<div className="grid grid-cols-1 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.8fr)_auto] gap-2"><Input value={repositoryName} onChange={event => setRepositoryName(event.target.value)} placeholder="Repository name" disabled={!canEditSources} /><Input value={repositoryURL} onChange={event => setRepositoryURL(event.target.value)} placeholder="https://charts.example.com" disabled={!canEditSources} /><button type="submit" disabled={!canEditSources || !repositoryName.trim() || !isValidHelmRepositoryURL(repositoryURL) || addRepository.isPending} className="btn-brand inline-flex items-center justify-center gap-1 px-3 py-2"><Plus className="w-4 h-4" /> Add</button></div>
+        <p className="text-xs text-theme-text-tertiary">Association succeeds only if the repository publishes {chartName || 'the installed chart'} at the exact installed version.</p>
+      </form>
+      <form onSubmit={addOCIPrefix} className="space-y-2">
+        <p className="text-xs uppercase tracking-wide text-theme-text-tertiary">Register OCI prefix</p>
+		<div className="flex gap-2"><Input value={ociPrefix} onChange={event => setOCIPrefix(event.target.value)} placeholder="oci://registry.example.com/charts" disabled={!canEditSources} /><button type="submit" disabled={!canEditSources || !ociPrefix.trim().startsWith('oci://') || addOCI.isPending} className="btn-brand px-3 py-2">Add</button></div>
+        <p className="text-xs text-theme-text-tertiary">After registration, select it in the list above. Credentials are reused from Helm and are never recorded in release provenance.</p>
+      </form>
+	  {ociSources && ociSources.length > 0 && <ul className="space-y-1">{ociSources.map(source => <li key={source} className="flex items-center justify-between gap-2 rounded-lg bg-theme-elevated px-3 py-2"><span className="font-mono text-sm truncate">{source}</span>{canEditSources && <button onClick={() => removeOCI.mutate(source)} disabled={removeOCI.isPending} aria-label={`Remove ${source}`} className="p-1 hover:text-red-400 disabled:opacity-50"><Trash2 className="w-4 h-4" /></button>}</li>)}</ul>}
+      {clusterInfo?.inCluster && <p className="text-xs text-amber-600 flex items-start gap-2"><AlertTriangle className="w-4 h-4 shrink-0" />Private OCI sources require credentials available to the in-cluster Radar process.</p>}
+    </div>
+  </DialogPortal>
 }