@skyhook-io/radar-app 1.14.5 → 1.15.0

package/src/api/usage-data.ts

@@ -0,0 +1,165 @@
+import { useCallback, useEffect } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { fetchJSON } from './client'
+import { apiUrl, getApiBase, getAuthHeaders, getCredentialsMode } from './config'
+
+export type UsageDataState = 'undecided' | 'on' | 'off'
+export type UsageDataSource = 'default' | 'user' | 'env' | 'deployment'
+
+export interface ClusterShape {
+  kubernetesVersion: string
+  platform: string
+  nodes: string
+  integrations: string[]
+}
+
+export interface UsageReport {
+  schema: number
+  version: string
+  os: string
+  arch: string
+  installMethod: string
+  mode: string
+  periodStart: string
+  periodEnd: string
+  setup: {
+    authMode: string
+    timelineStorage: string
+    mcpEnabled: boolean
+    prometheus: string
+    costSource: string
+    browsers: string[]
+  }
+  engagement: { sessions: number; activeMinutes: string }
+  views: Record<string, number>
+  actions: Record<string, number>
+  mcpTools: Record<string, number>
+  uiEvents: Record<string, number>
+  errors: Record<string, number>
+  clusters: { contexts: string; used: number; shapes: ClusterShape[] }
+}
+
+export interface UsageDataStatus {
+  state: UsageDataState
+  source: UsageDataSource
+  canChange: boolean
+  developmentBuild: boolean
+  nextReportAt?: string
+  preview: UsageReport
+  firstRunPrompt: boolean
+  // What's New may ask: never asked, or asked and left unanswered long enough ago.
+  ask: boolean
+  // Several people use this Radar, so its configuration decides and nobody is asked.
+  shared: boolean
+}
+
+const usageDataKey = (apiBase: string) => ['usage-data', apiBase]
+
+// `fresh` is for the report preview: it must match what would be sent now, so
+// it refetches every time it is shown instead of reusing the app shell's copy.
+export function useUsageData(enabled = true, { fresh = false }: { fresh?: boolean } = {}) {
+  const apiBase = getApiBase()
+  return useQuery<UsageDataStatus>({
+    queryKey: usageDataKey(apiBase),
+    queryFn: () => fetchJSON<UsageDataStatus>('/usage-data'),
+    enabled,
+    staleTime: fresh ? 0 : 60_000,
+    refetchOnMount: fresh ? 'always' : true,
+    retry: false,
+  })
+}
+
+export function useSetUsageData() {
+  const queryClient = useQueryClient()
+  const apiBase = getApiBase()
+  return useMutation({
+    mutationFn: (enabled: boolean) =>
+      fetchJSON<UsageDataStatus>('/usage-data', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ enabled }),
+      }),
+    meta: { errorMessage: 'Failed to save usage data choice' },
+    // A status read still in flight predates the choice; it must not
+    // replace the answer the server just confirmed.
+    onSuccess: async (status) => {
+      const queryKey = usageDataKey(apiBase)
+      await queryClient.cancelQueries({ queryKey })
+      queryClient.setQueryData(queryKey, status)
+    },
+  })
+}
+
+// Records that the question was shown, answered or not, and stops this tab
+// offering it again from its cached status. Fire and forget: a failure only
+// means it might show once more.
+export function useMarkUsagePromptShown() {
+  const queryClient = useQueryClient()
+  const apiBase = getApiBase()
+  return useCallback(() => {
+    const queryKey = usageDataKey(apiBase)
+    void queryClient.cancelQueries({ queryKey })
+    queryClient.setQueryData<UsageDataStatus>(queryKey, (prev) => prev && { ...prev, firstRunPrompt: false, ask: false })
+    void fetch(apiUrl('/usage-data/prompt-shown'), {
+      method: 'POST',
+      headers: getAuthHeaders(),
+      credentials: getCredentialsMode(),
+    }).catch(() => {})
+  }, [queryClient, apiBase])
+}
+
+export function isRecording(status: UsageDataStatus | undefined): boolean {
+  return status?.state === 'on'
+}
+
+// Set from the status query so code without hook access (error boundaries,
+// event handlers) can skip the request entirely when usage data is off.
+let recording = false
+
+function setUsageRecording(on: boolean) {
+  recording = on
+}
+
+type UsageEvent =
+  | { type: 'view'; name: string }
+  | { type: 'ui'; name: string }
+  | { type: 'session' }
+  | { type: 'active'; minutes: number }
+
+// Fire and forget; the server drops anything outside its allow-list.
+export function recordUsageEvent(event: UsageEvent): void {
+  if (!recording) return
+  void fetch(apiUrl('/usage-data/event'), {
+    method: 'POST',
+    headers: { ...getAuthHeaders(), 'Content-Type': 'application/json' },
+    credentials: getCredentialsMode(),
+    body: JSON.stringify(event),
+    keepalive: true,
+  }).catch(() => {})
+}
+
+const ACTIVE_TICK_MINUTES = 5
+
+// Counts views, one session per page load, and visible time in five-minute
+// ticks. Nothing is sent unless usage data is on.
+export function useUsageRecording(view: string, status: UsageDataStatus | undefined) {
+  const on = isRecording(status)
+  useEffect(() => {
+    setUsageRecording(on)
+  }, [on])
+
+  useEffect(() => {
+    if (on) recordUsageEvent({ type: 'view', name: view })
+  }, [view, on])
+
+  useEffect(() => {
+    if (!on) return
+    recordUsageEvent({ type: 'session' })
+    const tick = window.setInterval(() => {
+      if (document.visibilityState === 'visible') {
+        recordUsageEvent({ type: 'active', minutes: ACTIVE_TICK_MINUTES })
+      }
+    }, ACTIVE_TICK_MINUTES * 60_000)
+    return () => window.clearInterval(tick)
+  }, [on])
+}

package/src/components/CloudFunnelButton.test.tsx

@@ -0,0 +1,155 @@
+// @vitest-environment jsdom
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { ConnectionStateType } from '../context/ConnectionContext'
+import { CloudFunnelButton } from './CloudFunnelButton'
+
+const connection = vi.hoisted(() => ({ state: 'connecting' as ConnectionStateType }))
+vi.mock('../context/ConnectionContext', () => ({ useConnection: () => ({ connection }) }))
+vi.mock('./ui/Tooltip', () => ({ Tooltip: ({ children }: { children: ReactNode }) => children }))
+vi.mock('./ui/Toast', () => ({ showApiError: vi.fn() }))
+vi.mock('./CloudConnectFlow', () => ({ CloudConnectFlow: () => <div>Install flow</div> }))
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+let root: Root
+let client: QueryClient
+let lane: 'driver' | 'wizard'
+let discovery: { connected: { namespace: string; deployment: string; clusterUrl: string }[] }
+let discoveryStatus: number
+let flowState: 'idle' | 'awaiting_approval'
+const requests: string[] = []
+
+beforeEach(() => {
+  connection.state = 'connecting'
+  lane = 'driver'
+  discovery = { connected: [] }
+  discoveryStatus = 200
+  flowState = 'idle'
+  requests.length = 0
+  client = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  const element = document.createElement('div')
+  document.body.appendChild(element)
+  root = createRoot(element)
+  vi.stubGlobal('fetch', vi.fn(async (input: string) => {
+    const url = new URL(input, 'http://localhost')
+    requests.push(url.pathname + url.search)
+    const bodies: Record<string, unknown> = {
+      '/api/capabilities': { cloudConnect: { lane, appUrl: 'https://cloud.example', apiUrl: 'https://cloud.example' }, deployment: { mode: 'local' } },
+      '/api/cluster-info': { context: 'test-cluster' },
+      '/api/cloud/install/status': { state: flowState },
+      '/api/cloud/install/discover': discoveryStatus === 200 ? discovery : { error: 'Discovery failed' },
+      '/api/cloud/install/prepare': { error: 'Not connected to cluster' },
+      '/api/connect/info': {},
+    }
+    if (!(url.pathname in bodies)) throw new Error(`Unexpected request: ${input}`)
+    const status = url.pathname.endsWith('/prepare') ? 503 : url.pathname.endsWith('/discover') ? discoveryStatus : 200
+    return new Response(JSON.stringify(bodies[url.pathname]), { status })
+  }))
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  client.clear()
+  document.body.replaceChildren()
+  vi.unstubAllGlobals()
+})
+
+async function render() {
+  await act(async () => {
+    root.render(<QueryClientProvider client={client}><CloudFunnelButton /></QueryClientProvider>)
+  })
+}
+
+async function until(assertion: () => void) {
+  await vi.waitFor(async () => {
+    await act(async () => { await new Promise(resolve => setTimeout(resolve, 0)) })
+    assertion()
+  })
+}
+
+function button(text: string) {
+  return Array.from(document.querySelectorAll('button')).find(element => element.textContent === text)
+}
+
+async function openDialog() {
+  await render()
+  await until(() => expect(document.querySelector('[aria-label="Radar Cloud"]')).not.toBeNull())
+  await act(async () => { (document.querySelector('[aria-label="Radar Cloud"]') as HTMLButtonElement).click() })
+}
+
+describe('Cloud dialog connection availability', () => {
+  it.each(['connecting', 'disconnected'] as const)('offers Cloud directly while %s without inspecting a cluster', async state => {
+    connection.state = state
+    await openDialog()
+    await until(() => expect(requests).toContain('/api/connect/info?lane=wizard&mode=local'))
+    const link = Array.from(document.querySelectorAll('a')).find(element => element.textContent === 'Continue in Radar Cloud')!
+    expect(link.href).toBe('https://cloud.example/signup?utm_source=radar-oss&utm_medium=app&utm_campaign=cloud-modal&utm_content=driver-footer-browser-link')
+    expect(button('Connect this cluster…')).toBeUndefined()
+    expect(button('Try again')).toBeUndefined()
+    expect(requests).not.toContain('/api/cloud/install/discover')
+    expect(requests).not.toContain('/api/cloud/install/prepare')
+    await act(async () => { button('How it works and what it costs')!.click() })
+    expect(document.body.textContent).toContain('Radar runs in your cluster and tunnels outward to Radar Cloud')
+    expect(document.body.textContent).not.toContain('Setup runs here in the app')
+    expect(document.body.textContent).not.toContain('see what gets installed')
+  })
+
+  it('restores cluster discovery and Connect in the open dialog when the connection recovers', async () => {
+    await openDialog()
+    connection.state = 'connected'
+    await render()
+    await until(() => expect(button('Connect this cluster…')?.disabled).toBe(false))
+    expect(requests).toContain('/api/cloud/install/discover')
+    expect(requests).toContain('/api/connect/info?lane=driver&mode=local')
+    connection.state = 'disconnected'
+    await render()
+    expect(button('Connect this cluster…')).toBeUndefined()
+    expect(document.body.textContent).toContain('Continue in Radar Cloud')
+    connection.state = 'connected'
+    await render()
+    await until(() => expect(button('Connect this cluster…')?.disabled).toBe(false))
+    expect(requests.filter(path => path === '/api/cloud/install/discover')).toHaveLength(2)
+  })
+
+  it('keeps the existing already-connected destination after discovery', async () => {
+    connection.state = 'connected'
+    discovery.connected = [{ namespace: 'radar', deployment: 'radar', clusterUrl: 'https://cloud.example/clusters/one' }]
+    await openDialog()
+    await until(() => expect(document.body.textContent).toContain('This cluster is already connected to Radar Cloud.'))
+    expect(document.querySelector('a[href="https://cloud.example/clusters/one"]')?.textContent).toBe('Open in Radar Cloud')
+    expect(button('Connect this cluster…')).toBeUndefined()
+    connection.state = 'disconnected'
+    await render()
+    expect(document.body.textContent).not.toContain('This cluster is already connected to Radar Cloud.')
+    expect(document.body.textContent).toContain('Continue in Radar Cloud')
+  })
+
+  it('still allows inspection after discovery fails and preserves 503 handoff attribution', async () => {
+    connection.state = 'connected'
+    discoveryStatus = 500
+    await openDialog()
+    await until(() => expect(button('Connect this cluster…')?.disabled).toBe(false))
+    await act(async () => { button('Connect this cluster…')!.click() })
+    await until(() => expect(button('Try again')).toBeDefined())
+    expect(document.querySelector('a[href*="driver-footer-browser-link"]')?.getAttribute('href')).toContain('radar_outcome=radar_not_connected_to_cluster')
+    expect(document.body.textContent).toContain('Not connected to cluster')
+  })
+
+  it('keeps wizard-only deployments on their existing signup path', async () => {
+    lane = 'wizard'
+    await openDialog()
+    expect(document.querySelector('a[href*="wizard-signup-button"]')?.textContent).toBe('Try Cloud free')
+    expect(document.body.textContent).not.toContain('Continue in Radar Cloud')
+    expect(requests).not.toContain('/api/cloud/install/discover')
+  })
+
+  it('keeps an active server-owned install visible even while disconnected', async () => {
+    connection.state = 'disconnected'
+    flowState = 'awaiting_approval'
+    await openDialog()
+    await until(() => expect(document.body.textContent).toContain('Install flow'))
+    expect(document.body.textContent).not.toContain('Continue in Radar Cloud')
+  })
+})