@skyhook-io/radar-app 1.15.0 → 1.16.0

package/README.md

@@ -41,6 +41,8 @@ When `navSlots.embedded` is true, Radar sizes itself to the host container (`hei
 
 Embedded mode renders only the active view. Radar Hub owns the sidebar, top bar, cluster selector, and navigation. `onClusterLoadStateChange` supplies the loading status for Hub's top bar.
 
+The package can be newer than the Radar it talks to. Features that need a newer Radar show an inline "needs Radar vX or newer" note instead of an error. Radar decides this from the `features` block of `/api/capabilities`, or from the Radar's version when it predates a flag. Pass `radarVersion` so Radar can skip those calls before `/api/version-check` answers. Pass `onRequestRadarUpgrade` to run your own upgrade flow from the note's "Upgrade Radar" button. Without it, the note links to the upgrade instructions.
+
 ## Tailwind
 
 Radar uses Tailwind v4 classes throughout. Your app's Tailwind config must scan Radar's source:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -25,6 +25,7 @@
     "tsc": "node ../node_modules/typescript-7/bin/tsc --noEmit",
     "tsc:ts6": "tsc --noEmit",
     "test": "vitest run src",
+    "test:e2e:settings": "playwright test --config playwright.settings.config.ts",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "lint": "eslint src && node scripts/check-no-native-title.mjs"
   },
@@ -41,7 +42,7 @@
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.14.8",
+    "@skyhook-io/k8s-ui": ">=1.16.0",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",
@@ -66,11 +67,11 @@
     "@xyflow/react": "^12.11.2",
     "clsx": "^2.1.1",
     "elkjs": "^0.11.1",
-    "eslint": "^10.10.0",
+    "eslint": "^10.11.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
     "globals": "^17.11.0",
-    "lucide-react": "^1.37.0",
+    "lucide-react": "^1.48.0",
     "postcss": "^8.5.28",
     "prettier": "^3.9.8",
     "react": "^19.3.0",
@@ -80,7 +81,7 @@
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.70.0",
-    "vite": "^8.2.2"
+    "vite": "^8.3.1"
   },
   "sideEffects": [
     "*.css"

package/src/App.tsx

@@ -46,6 +46,7 @@ import { ConnectionProvider, useConnection } from './context/ConnectionContext'
 import { ConnectionErrorView } from './components/ConnectionErrorView'
 import { SyncProgressPanel } from './components/SyncProgressPanel'
 import { CapabilitiesProvider, useCapabilitiesContext } from './contexts/CapabilitiesContext'
+import { RadarUpgradeProvider } from './context/RadarUpgrade'
 import { UserMenu } from './components/UserMenu'
 import { ErrorBoundary } from './components/ui/ErrorBoundary'
 import { UpdateNotification } from './components/ui/UpdateNotification'
@@ -2533,17 +2534,19 @@ function App({ manageDocumentTitle = false, documentTitleSuffix, onClusterLoadSt
   return (
     <ConnectionProvider>
       <CapabilitiesProvider>
-        <ContextSwitchProvider>
-          <DockProvider>
-            <KeyboardShortcutProvider>
-              <AppInner
-                manageDocumentTitle={manageDocumentTitle}
-                documentTitleSuffix={documentTitleSuffix}
-                onClusterLoadStateChange={onClusterLoadStateChange}
-              />
-            </KeyboardShortcutProvider>
-          </DockProvider>
-        </ContextSwitchProvider>
+        <RadarUpgradeProvider>
+          <ContextSwitchProvider>
+            <DockProvider>
+              <KeyboardShortcutProvider>
+                <AppInner
+                  manageDocumentTitle={manageDocumentTitle}
+                  documentTitleSuffix={documentTitleSuffix}
+                  onClusterLoadStateChange={onClusterLoadStateChange}
+                />
+              </KeyboardShortcutProvider>
+            </DockProvider>
+          </ContextSwitchProvider>
+        </RadarUpgradeProvider>
       </CapabilitiesProvider>
     </ConnectionProvider>
   )

package/src/RadarApp.tsx

@@ -33,9 +33,15 @@ import {
   showApiSuccess,
 } from "./components/ui/Toast";
 import { setApiBase, setBasename } from "./api/config";
+import { shouldRetryRadarQuery } from "./api/radarFeatures";
 import { NavCustomizationProvider } from "./context/NavCustomization";
 import { FilterLocationBridge } from "./filter/FilterLocationBridge";
 import type { NavCustomization } from "./context/NavCustomization";
+import { RadarUpgradeHostProvider } from "./context/RadarUpgradeHost";
+import type {
+  RadarUpgradeHost,
+  RadarUpgradeRequest,
+} from "./context/RadarUpgradeHost";
 import type { ClusterLoadState } from "./types/clusterLoadState";
 import { TimelineSourceProvider } from "./context/TimelineSource";
 import type { TimelineSourceConfig } from "./api/timelineSource";
@@ -65,6 +71,21 @@ declare module "@tanstack/react-query" {
 export interface RadarAppProps {
   /** API base URL (REST + SSE + WS). Defaults to '/api' (same-origin). */
   apiBase?: string;
+  /**
+   * The version of the Radar behind `apiBase`, as the host knows it (Radar
+   * Cloud: the cluster's `radar_version`). Radar prefers that Radar's own
+   * /version-check answer and uses this only until it arrives or when it
+   * fails, to decide up front that a feature needs a newer Radar instead of
+   * probing for it.
+   */
+  radarVersion?: string;
+  /**
+   * Called when the user asks to upgrade from an inline "needs a newer Radar"
+   * note next to a feature the connected Radar is too old to serve. The host
+   * runs its own upgrade flow (Radar Cloud: one-click for owners, "ask an
+   * owner" otherwise). Omitted → the note links to the upgrade instructions.
+   */
+  onRequestRadarUpgrade?: (request: RadarUpgradeRequest) => void;
   /** React Router basename. Defaults to '' (mounted at root). */
   basename?: string;
   /**
@@ -163,7 +184,7 @@ function makeDefaultQueryClient(): QueryClient {
     defaultOptions: {
       queries: {
         refetchOnWindowFocus: false,
-        retry: 1,
+        retry: shouldRetryRadarQuery,
       },
     },
     mutationCache: new MutationCache({
@@ -193,6 +214,8 @@ function makeDefaultQueryClient(): QueryClient {
 
 export function RadarApp({
   apiBase,
+  radarVersion,
+  onRequestRadarUpgrade,
   basename,
   router = "browser",
   queryClient,
@@ -223,32 +246,39 @@ export function RadarApp({
     [queryClient],
   );
 
+  const upgradeHost = React.useMemo<RadarUpgradeHost>(
+    () => ({ radarVersion, onRequestRadarUpgrade }),
+    [radarVersion, onRequestRadarUpgrade],
+  );
+
   const inner = (
     <ThemeProvider>
       <QueryClientProvider client={client}>
         <ToastProvider>
           <NavCustomizationProvider value={navSlots}>
-            <FilterLocationBridge>
-              <TimelineSourceProvider config={timelineSource}>
-                <DiagnoseCustomizationProvider
-                  value={renderDiagnoseAction ?? defaultDiagnoseAction}
-                  consentCopy={diagnoseConsent}
-                  renderRunActions={renderInvestigationRunActions}
-                >
-                  <DiagnoseProvider
-                    browserURLState={router !== "memory"}
-                    forceRouterURLState={router === "memory"}
-                    onFocusedRun={onInvestigationFocus}
+            <RadarUpgradeHostProvider value={upgradeHost}>
+              <FilterLocationBridge>
+                <TimelineSourceProvider config={timelineSource}>
+                  <DiagnoseCustomizationProvider
+                    value={renderDiagnoseAction ?? defaultDiagnoseAction}
+                    consentCopy={diagnoseConsent}
+                    renderRunActions={renderInvestigationRunActions}
                   >
-                    <App
-                      manageDocumentTitle={manageDocumentTitle}
-                      documentTitleSuffix={documentTitleSuffix}
-                      onClusterLoadStateChange={onClusterLoadStateChange}
-                    />
-                  </DiagnoseProvider>
-                </DiagnoseCustomizationProvider>
-              </TimelineSourceProvider>
-            </FilterLocationBridge>
+                    <DiagnoseProvider
+                      browserURLState={router !== "memory"}
+                      forceRouterURLState={router === "memory"}
+                      onFocusedRun={onInvestigationFocus}
+                    >
+                      <App
+                        manageDocumentTitle={manageDocumentTitle}
+                        documentTitleSuffix={documentTitleSuffix}
+                        onClusterLoadStateChange={onClusterLoadStateChange}
+                      />
+                    </DiagnoseProvider>
+                  </DiagnoseCustomizationProvider>
+                </TimelineSourceProvider>
+              </FilterLocationBridge>
+            </RadarUpgradeHostProvider>
           </NavCustomizationProvider>
         </ToastProvider>
       </QueryClientProvider>

package/src/api/apiResources.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest'
-import { hasKarpenterNodePools } from './apiResources'
+import { hasKarpenterNodePools, hasPolicyReports } from './apiResources'
+import type { APIResource } from '../types'
 
 describe('hasKarpenterNodePools', () => {
   it('uses exact API discovery rather than top-CRD counts or kind name alone', () => {
@@ -9,3 +10,20 @@ describe('hasKarpenterNodePools', () => {
     expect(hasKarpenterNodePools(undefined)).toBe(false)
   })
 })
+
+describe('hasPolicyReports', () => {
+  const resource = (name: string, group: string) => ({ name, group }) as APIResource
+
+  it('recognizes each report family by the resource names it actually serves', () => {
+    expect(hasPolicyReports([resource('policyreports', 'wgpolicyk8s.io')])).toBe(true)
+    expect(hasPolicyReports([resource('clusterpolicyreports', 'wgpolicyk8s.io')])).toBe(true)
+    expect(hasPolicyReports([resource('reports', 'openreports.io')])).toBe(true)
+    expect(hasPolicyReports([resource('clusterreports', 'openreports.io')])).toBe(true)
+    expect(hasPolicyReports([resource('policyreports', 'openreports.io')])).toBe(false)
+  })
+
+  it('reads a cluster without them as having no policy engine', () => {
+    expect(hasPolicyReports([resource('pods', ''), resource('policyreports', 'example.com')])).toBe(false)
+    expect(hasPolicyReports(undefined)).toBe(false)
+  })
+})

package/src/api/apiResources.ts

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import type { APIResource } from "../types";
 import { apiUrl, getAuthHeaders, getCredentialsMode } from "./config";
+import { readErrorBody } from "./httpErrors";
 
 // Re-export pure functions from package
 export {
@@ -20,9 +21,7 @@ async function fetchJSON<T>(path: string): Promise<T> {
     headers: getAuthHeaders(),
   });
   if (!response.ok) {
-    const error = await response
-      .json()
-      .catch(() => ({ error: "Unknown error" }));
+    const error = await readErrorBody(response);
     throw new Error(error.error || `HTTP ${response.status}`);
   }
   return response.json();
@@ -37,6 +36,22 @@ export function useAPIResources() {
   });
 }
 
+// The report families the server watches (reportGroups in
+// internal/k8s/policy_reports.go): the wgpolicyk8s.io working-group API and
+// its openreports.io successor, which names the same resources differently.
+const POLICY_REPORT_RESOURCES: Record<string, readonly string[]> = {
+  "wgpolicyk8s.io": ["policyreports", "clusterpolicyreports"],
+  "openreports.io": ["reports", "clusterreports"],
+};
+
+export function hasPolicyReports(resources: APIResource[] | undefined): boolean {
+  return (
+    resources?.some((resource) =>
+      POLICY_REPORT_RESOURCES[resource.group]?.includes(resource.name),
+    ) ?? false
+  );
+}
+
 export function hasKarpenterNodePools(
   resources: APIResource[] | undefined,
 ): boolean {

package/src/api/client.capacity.test.ts

@@ -5,6 +5,7 @@ import {
   isCapacityCursorInvalidError,
   shouldRetryCapacityQuery,
 } from "./client";
+import { RadarFeatureUnsupportedError } from "./radarFeatures";
 
 describe("isCapacityCursorInvalidError", () => {
   it("uses the structured capacity error code", () => {
@@ -42,6 +43,12 @@ describe("shouldRetryCapacityQuery", () => {
     );
   });
 
+  it("never retries a feature the connected Radar predates", () => {
+    expect(
+      shouldRetryCapacityQuery(0, new RadarFeatureUnsupportedError("capacity", {})),
+    ).toBe(false);
+  });
+
   it("bounds retries for transient failures", () => {
     expect(shouldRetryCapacityQuery(0, new ApiError("unavailable", 503))).toBe(
       true,
@@ -63,6 +70,14 @@ describe("capacityRefetchInterval", () => {
     ).toBe(false);
   });
 
+  it("stops polling a Radar that predates Capacity", () => {
+    expect(
+      capacityRefetchInterval(undefined, true)({
+        state: { error: new RadarFeatureUnsupportedError("capacity", {}) },
+      }),
+    ).toBe(false);
+  });
+
   it("polls fast while the server reports syncing", () => {
     expect(
       capacityRefetchInterval(undefined, true)(withData({ state: "syncing" })),

package/src/api/client.trace.test.ts

@@ -25,9 +25,17 @@ describe('runInClusterMerged error surfacing', () => {
     await expect(runInClusterMerged('Service', 'prod', 'web')).rejects.toThrow('no eligible routes')
   })
 
+  // The banner around this message already says the in-cluster test couldn't run.
   it('rejects a non-JSON gateway failure with the status, not a parse error', async () => {
     respond(504, '<html>Gateway Timeout</html>', 'text/html')
-    await expect(runInClusterMerged('Service', 'prod', 'web')).rejects.toThrow('In-cluster test failed (504)')
+    await expect(runInClusterMerged('Service', 'prod', 'web')).rejects.toThrow('HTTP 504 (Gateway Timeout)')
+  })
+
+  it("keeps a proxy's plain-text reason", async () => {
+    respond(503, 'cluster "prod" not connected\n', 'text/plain; charset=utf-8')
+    await expect(runInClusterMerged('Service', 'prod', 'web')).rejects.toThrow(
+      'cluster "prod" not connected (HTTP 503)',
+    )
   })
 
   it('resolves a clean run with the finalized payload', async () => {