@skyhook-io/radar-app 1.1.0 → 1.1.2

package/src/components/compare/useCompareCandidates.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import type { CompareResourceRef } from '@skyhook-io/k8s-ui'
+import { useResources } from '../../api/client'
+
+/**
+ * Fetch candidates for the compare picker — same kind as the source.
+ * Pass `enabled=false` when the picker is closed to avoid hitting the API.
+ */
+export function useCompareCandidates(kind: string, group: string | undefined, enabled: boolean) {
+  const query = useResources<{ metadata?: { name?: string; namespace?: string } }>(
+    enabled ? kind : '',
+    undefined,
+    group,
+  )
+  const candidates: CompareResourceRef[] = useMemo(() => {
+    if (!query.data) return []
+    return query.data
+      .filter(r => r?.metadata?.name)
+      .map(r => ({
+        kind,
+        namespace: r.metadata?.namespace ?? '',
+        name: r.metadata!.name!,
+        group,
+      }))
+  }, [query.data, kind, group])
+  return { candidates, isPending: query.isPending, error: query.error }
+}

package/src/components/compare/useCompareLauncher.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { CompareResourcePicker, refToParam, type CompareResourceRef } from '@skyhook-io/k8s-ui'
+import { useCompareCandidates } from './useCompareCandidates'
+import { useNavCustomization } from '../../context/NavCustomization'
+
+interface UseCompareLauncherArgs {
+  /** API plural kind (e.g. "deployments") — must match the route segment used by `/api/resources/{kind}`. */
+  kind: string
+  namespace: string
+  name: string
+  /** API group for the resource — required for CRDs that collide with core kinds. */
+  group?: string
+}
+
+interface CompareLauncher {
+  /** Wire this to ResourceActionsBar's `onCompareTo` prop. */
+  onCompareTo: () => void
+  /**
+   * Wire this to ResourceActionsBar's `onCompareAcrossClusters` prop. Undefined
+   * when the host (NavCustomization.crossClusterCompareHref) hasn't opted in
+   * — keeps the standalone Radar experience identical.
+   */
+  onCompareAcrossClusters?: () => void
+  /** Render this anywhere in the same tree to surface the picker dialog. */
+  picker: React.ReactNode
+}
+
+export function useCompareLauncher({ kind, namespace, name, group }: UseCompareLauncherArgs): CompareLauncher {
+  const navigate = useNavigate()
+  const [open, setOpen] = useState(false)
+  const kindLower = kind.toLowerCase()
+  const { candidates, isPending, error } = useCompareCandidates(kindLower, group, open)
+  const { crossClusterCompareHref } = useNavCustomization()
+
+  const onCompareTo = useCallback(() => setOpen(true), [])
+
+  const onCompareAcrossClusters = useCallback(() => {
+    if (!crossClusterCompareHref) return
+    const href = crossClusterCompareHref({ kind: kindLower, namespace, name, group })
+    window.location.assign(href)
+  }, [crossClusterCompareHref, kindLower, namespace, name, group])
+
+  const handlePick = useCallback(
+    (picked: CompareResourceRef) => {
+      setOpen(false)
+      const params = new URLSearchParams()
+      params.set('kind', kindLower)
+      if (group) params.set('apiGroup', group)
+      params.set('a', refToParam({ namespace, name }))
+      params.set('b', refToParam({ namespace: picked.namespace, name: picked.name }))
+      navigate({ pathname: '/compare', search: params.toString() })
+    },
+    [navigate, kindLower, group, namespace, name],
+  )
+
+  const source: CompareResourceRef = { kind: kindLower, namespace, name, group }
+
+  const picker = (
+    <CompareResourcePicker
+      open={open}
+      onClose={() => setOpen(false)}
+      source={source}
+      candidates={candidates}
+      loading={open && isPending}
+      error={open ? error : null}
+      onPick={handlePick}
+    />
+  )
+
+  return {
+    onCompareTo,
+    onCompareAcrossClusters: crossClusterCompareHref ? onCompareAcrossClusters : undefined,
+    picker,
+  }
+}

package/src/components/cost/CostView.tsx

@@ -417,7 +417,7 @@ function CostHelpDialog({ onClose }: { onClose: () => void }) {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative dialog max-w-lg w-full mx-4 max-h-[80vh] overflow-y-auto">
+      <div className="relative dialog max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-theme-border sticky top-0 bg-theme-surface rounded-t-lg">
           <div className="flex items-center gap-2">