@skyhook-io/radar-app 1.14.6 → 1.15.0

package/src/components/usage-data/UsageDataAsk.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useRef, useState } from 'react'
+import { BarChart3, Check } from 'lucide-react'
+import { useMarkUsagePromptShown, useSetUsageData, type UsageDataStatus } from '../../api/usage-data'
+
+// One wording for every place Radar asks, so the question can't drift.
+export function UsageDataBlurb({ onReadMore }: { onReadMore: () => void }) {
+  return (
+    <>
+      <p className="text-sm font-medium text-theme-text-primary">Help improve Radar</p>
+      <p className="mt-0.5 text-xs text-theme-text-secondary leading-relaxed">
+        Anonymous, with no third-party trackers.{' '}
+        <button
+          type="button"
+          onClick={onReadMore}
+          className="whitespace-nowrap text-theme-text-primary underline underline-offset-2 hover:text-accent-text"
+        >
+          See what's sent
+        </button>
+      </p>
+    </>
+  )
+}
+
+// Shown in place of the question once answered, so it doesn't vanish under
+// the cursor.
+export function UsageDataAnswered({ answer }: { answer: boolean }) {
+  return (
+    <>
+      <Check className="w-3.5 h-3.5 shrink-0 text-accent" aria-hidden />
+      {answer
+        ? 'Thanks. Change this any time in Settings > Privacy.'
+        : 'Nothing will be sent. Change this any time in Settings > Privacy.'}
+    </>
+  )
+}
+
+// The usage-data question, asked inside What's New when the server says to:
+// someone who closed it without answering is asked again only months later,
+// and a "no" is never asked again. A shared Radar, or one set by its
+// configuration, never asks.
+export function UsageDataAsk({ usageData, onReadMore }: {
+  usageData: UsageDataStatus | undefined
+  onReadMore: () => void
+}) {
+  const setUsageData = useSetUsageData()
+  const markUsagePromptShown = useMarkUsagePromptShown()
+  const [answer, setAnswer] = useState<boolean | null>(null)
+  // Latched: recording the showing stops the server offering the question,
+  // and the block must not vanish while the dialog is open.
+  const [offered, setOffered] = useState(!!usageData?.ask)
+  const recorded = useRef(false)
+
+  useEffect(() => {
+    if (usageData?.ask) setOffered(true)
+  }, [usageData?.ask])
+  useEffect(() => {
+    if (offered && !recorded.current) {
+      recorded.current = true
+      markUsagePromptShown()
+    }
+  }, [offered, markUsagePromptShown])
+
+  const undecided = offered && usageData?.state === 'undecided' && usageData.canChange
+  if (!undecided && answer === null) return null
+
+  if (answer !== null) {
+    return (
+      <div className="flex items-center gap-2 px-6 py-3 border-t border-theme-border text-xs text-theme-text-secondary">
+        <UsageDataAnswered answer={answer} />
+      </div>
+    )
+  }
+
+  const choose = (enabled: boolean) => setUsageData.mutate(enabled, { onSuccess: () => setAnswer(enabled) })
+
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center gap-3 px-6 py-3.5 border-t border-theme-border">
+      <div className="flex gap-3 min-w-0 flex-1">
+        <span className="flex items-center justify-center w-8 h-8 shrink-0 rounded-lg bg-accent-muted text-accent">
+          <BarChart3 className="w-4 h-4" aria-hidden />
+        </span>
+        <div className="min-w-0">
+          <UsageDataBlurb onReadMore={onReadMore} />
+        </div>
+      </div>
+      <div className="flex items-center gap-2 shrink-0 pl-11 sm:pl-0">
+        <button
+          type="button"
+          disabled={setUsageData.isPending}
+          onClick={() => choose(true)}
+          className="px-3 py-1.5 text-xs font-medium rounded-lg border border-theme-border bg-theme-surface text-theme-text-primary hover:bg-theme-hover disabled:opacity-50"
+        >
+          Send usage stats
+        </button>
+        <button
+          type="button"
+          disabled={setUsageData.isPending}
+          onClick={() => choose(false)}
+          className="px-3 py-1.5 text-xs font-medium rounded-lg text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated disabled:opacity-50"
+        >
+          No thanks
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/usage-data/UsageDataPrompt.test.ts

@@ -0,0 +1,53 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { UsageDataStatus } from '../../api/usage-data'
+
+vi.mock('../../api/client', () => ({ useVersionCheck: () => ({ data: undefined }) }))
+vi.mock('../../api/usage-data', () => ({ useSetUsageData: () => ({ mutate: vi.fn(), isPending: false }), useMarkUsagePromptShown: () => vi.fn() }))
+
+import { cardStillAsking, shouldShowFirstRunPrompt, updateNoticeVisible } from './UsageDataPrompt'
+
+const status = (firstRunPrompt: boolean) => ({ firstRunPrompt } as UsageDataStatus)
+
+describe('shouldShowFirstRunPrompt', () => {
+  it('shows only when the server offers it, after the delay, with the corner free', () => {
+    expect(shouldShowFirstRunPrompt({ status: status(true), ready: true, updateNoticeShowing: false })).toBe(true)
+    expect(shouldShowFirstRunPrompt({ status: status(false), ready: true, updateNoticeShowing: false })).toBe(false)
+    expect(shouldShowFirstRunPrompt({ status: status(true), ready: false, updateNoticeShowing: false })).toBe(false)
+    expect(shouldShowFirstRunPrompt({ status: status(true), ready: true, updateNoticeShowing: true })).toBe(false)
+    expect(shouldShowFirstRunPrompt({ status: undefined, ready: true, updateNoticeShowing: false })).toBe(false)
+  })
+})
+
+describe('updateNoticeVisible', () => {
+  const store = new Map<string, string>()
+  vi.stubGlobal('localStorage', {
+    getItem: (k: string) => store.get(k) ?? null,
+    setItem: (k: string, v: string) => void store.set(k, v),
+  })
+  afterEach(() => store.clear())
+
+  it('is visible until that version is dismissed', () => {
+    expect(updateNoticeVisible('1.16.0', true)).toBe(true)
+    store.set('radar-update-dismissed', '1.16.0')
+    expect(updateNoticeVisible('1.16.0', true)).toBe(false)
+    expect(updateNoticeVisible('1.16.0', false)).toBe(false)
+  })
+})
+
+describe('cardStillAsking', () => {
+  const st = (state: UsageDataStatus['state'], canChange = true) => ({ state, canChange } as UsageDataStatus)
+
+  it('keeps asking while the choice is still open', () => {
+    expect(cardStillAsking(st('undecided'), null)).toBe(true)
+  })
+
+  it('stops asking once the choice was made elsewhere', () => {
+    expect(cardStillAsking(st('off'), null)).toBe(false)
+    expect(cardStillAsking(st('on'), null)).toBe(false)
+    expect(cardStillAsking(st('undecided', false), null)).toBe(false)
+  })
+
+  it('keeps its own answer on screen', () => {
+    expect(cardStillAsking(st('off'), false)).toBe(true)
+  })
+})

package/src/components/usage-data/UsageDataPrompt.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useRef, useState } from 'react'
+import { clsx } from 'clsx'
+import { BarChart3, X } from 'lucide-react'
+import { useMarkUsagePromptShown, useSetUsageData, type UsageDataStatus } from '../../api/usage-data'
+import { useVersionCheck } from '../../api/client'
+import { isUpdateDismissed } from '../ui/UpdateNotification'
+import { UsageDataAnswered, UsageDataBlurb } from './UsageDataAsk'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_MENU, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
+
+// Long enough that the first thing a new user sees is their cluster, not a
+// question about it.
+export const FIRST_RUN_PROMPT_DELAY_MS = 15_000
+const THANKS_MS = 4_000
+
+// The update notice uses the same corner. One nudge at a time.
+export function updateNoticeVisible(latest: string | undefined, updateAvailable: boolean | undefined): boolean {
+  return !!updateAvailable && !!latest && !isUpdateDismissed(latest)
+}
+
+export function shouldShowFirstRunPrompt(opts: {
+  status: UsageDataStatus | undefined
+  ready: boolean
+  updateNoticeShowing: boolean
+}): boolean {
+  return !!opts.status?.firstRunPrompt && opts.ready && !opts.updateNoticeShowing
+}
+
+// Once shown, the card stays until answered or closed, unless the choice was
+// made elsewhere (another tab, Settings) while it sat unanswered.
+export function cardStillAsking(status: UsageDataStatus | undefined, answer: boolean | null): boolean {
+  return answer !== null || (status?.state === 'undecided' && !!status?.canChange)
+}
+
+// Shown once per machine, after the first install. Upgrading installs are
+// asked in What's New instead. The server records the showing, so a reload,
+// another browser or the Desktop app on the same machine won't show it again.
+export function UsageDataPrompt({ status }: { status: UsageDataStatus | undefined }) {
+  const setUsageData = useSetUsageData()
+  const markUsagePromptShown = useMarkUsagePromptShown()
+  const { data: versionInfo } = useVersionCheck()
+  const [ready, setReady] = useState(false)
+  const [, setTick] = useState(0)
+  // Latched once shown: the server stops offering the prompt the moment it is
+  // recorded, and the card must not disappear because of that.
+  const [latched, setLatched] = useState(false)
+  const [dismissed, setDismissed] = useState(false)
+  const [answer, setAnswer] = useState<boolean | null>(null)
+  const recorded = useRef(false)
+
+  const offered = !!status?.firstRunPrompt
+  useEffect(() => {
+    if (!offered) return
+    const delay = window.setTimeout(() => setReady(true), FIRST_RUN_PROMPT_DELAY_MS)
+    // Dismissing the update notice only touches localStorage, which does not
+    // notify this tab, so look again now and then.
+    const poll = window.setInterval(() => setTick((t) => t + 1), 5_000)
+    return () => {
+      window.clearTimeout(delay)
+      window.clearInterval(poll)
+    }
+  }, [offered])
+
+  const eligible = shouldShowFirstRunPrompt({
+    status,
+    ready,
+    updateNoticeShowing: updateNoticeVisible(versionInfo?.latestVersion, versionInfo?.updateAvailable),
+  })
+  useEffect(() => {
+    if (eligible && !recorded.current) {
+      recorded.current = true
+      setLatched(true)
+      markUsagePromptShown()
+    }
+  }, [eligible, markUsagePromptShown])
+
+  useEffect(() => {
+    if (answer === null) return
+    const t = window.setTimeout(() => setDismissed(true), THANKS_MS)
+    return () => window.clearTimeout(t)
+  }, [answer])
+
+  const show = latched && !dismissed && cardStillAsking(status, answer)
+  const { shouldRender, isOpen } = useAnimatedUnmount(show, overlayExitMs('menu'))
+  if (!shouldRender) return null
+
+  const readMore = () => {
+    setDismissed(true)
+    window.dispatchEvent(new CustomEvent('radar:open-settings', { detail: { section: 'privacy' } }))
+  }
+  const choose = (enabled: boolean) => setUsageData.mutate(enabled, { onSuccess: () => setAnswer(enabled) })
+
+  return (
+    <div
+      role="dialog"
+      aria-label="Help improve Radar"
+      inert={!show || undefined}
+      className={clsx(
+        'fixed bottom-4 right-4 z-40 w-[21rem] max-w-[calc(100vw-2rem)] rounded-xl border border-theme-border bg-theme-surface shadow-theme-lg overflow-hidden origin-bottom-right',
+        TRANSITION_MENU,
+        isOpen ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-1 scale-[0.97]',
+        !show && 'pointer-events-none',
+      )}
+      style={overlayTransitionStyle(isOpen, 'menu')}
+    >
+      {answer === null ? (
+        <div className="relative flex gap-3 p-3.5 pr-9">
+          <button
+            type="button"
+            onClick={() => setDismissed(true)}
+            aria-label="Close"
+            className="absolute top-2.5 right-2.5 p-1 rounded text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated"
+          >
+            <X className="w-3.5 h-3.5" />
+          </button>
+          <span className="flex items-center justify-center w-8 h-8 shrink-0 rounded-lg bg-accent-muted text-accent">
+            <BarChart3 className="w-4 h-4" aria-hidden />
+          </span>
+          <div className="min-w-0">
+            <UsageDataBlurb onReadMore={readMore} />
+            <div className="flex items-center gap-2 mt-2.5">
+              <button
+                type="button"
+                disabled={setUsageData.isPending}
+                onClick={() => choose(true)}
+                className="btn-brand px-3 py-1 text-xs font-medium rounded-md whitespace-nowrap disabled:opacity-50"
+              >
+                Send usage stats
+              </button>
+              <button
+                type="button"
+                disabled={setUsageData.isPending}
+                onClick={() => choose(false)}
+                className="px-3 py-1 text-xs font-medium rounded-md text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated disabled:opacity-50"
+              >
+                No thanks
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex items-center gap-2 px-4 py-3 text-xs text-theme-text-secondary">
+          <UsageDataAnswered answer={answer} />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/whats-new/WhatsNew.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest'
+import { Megaphone } from 'lucide-react'
+import { nextSeenVersion, whatsNewToShow } from './WhatsNew'
+import { latestReleaseNotesFor, releaseLine, RELEASE_NOTES, releaseNotesFor, type ReleaseNotes } from './releaseNotes'
+import { compareVersions } from '../../utils/version'
+
+const entry = (version: string): ReleaseNotes => ({
+  version,
+  releaseUrl: 'https://github.com/skyhook-io/radar/releases',
+  highlights: [{ id: 'x', icon: Megaphone, title: 'X', description: 'Y' }],
+  improvements: [],
+})
+
+const catalog = [entry('v1.15.0'), entry('v2.0.0')]
+
+const show = (current: string, lastSeen: string | null, prior = true) =>
+  whatsNewToShow(current, lastSeen, prior, catalog)?.version ?? null
+
+describe('whatsNewToShow', () => {
+  it('shows when the notes are newer than the last version seen', () => {
+    expect(show('v2.0.0', 'v1.15.0')).toBe('v2.0.0')
+    expect(show('v2.0.0', 'v2.0.0')).toBeNull()
+    expect(show('2.0.0', 'v2.0.0')).toBeNull()
+  })
+
+  it('shows the newest earlier notes when the running release has none of its own', () => {
+    expect(show('v1.15.1', 'v1.14.1')).toBe('v1.15.0')
+    expect(show('v2.3.4', 'v1.15.2')).toBe('v2.0.0')
+  })
+
+  it('stays closed once a later release was seen, including after a downgrade', () => {
+    expect(show('v1.15.2', 'v1.15.1')).toBeNull()
+    expect(show('v1.15.0', 'v2.0.0')).toBeNull()
+  })
+
+  it('stays closed on a fresh install, and shows for installs that predate the seen record', () => {
+    expect(show('v2.0.0', null, false)).toBeNull()
+    expect(show('v2.0.0', null, true)).toBe('v2.0.0')
+  })
+
+  it('treats a record that is not a version as an install with nothing seen', () => {
+    expect(show('v2.0.0', 'vdev', false)).toBe('v2.0.0')
+  })
+
+  it('stays closed when no notes exist at or below the running version', () => {
+    expect(show('v1.14.9', 'v1.14.0')).toBeNull()
+    expect(show('dev', 'v1.14.1')).toBeNull()
+  })
+})
+
+describe('nextSeenVersion', () => {
+  it('only moves forward', () => {
+    expect(nextSeenVersion('v2.0.0', 'v1.15.0')).toBe('v2.0.0')
+    expect(nextSeenVersion('2.0.1', null)).toBe('v2.0.1')
+    expect(nextSeenVersion('1.15.0', 'v2.0.0')).toBeNull()
+    expect(nextSeenVersion('v2.0.0', 'v2.0.0')).toBeNull()
+  })
+
+  it('never records a development build, and replaces a record that is not a version', () => {
+    expect(nextSeenVersion('dev', null)).toBeNull()
+    expect(nextSeenVersion('dev', 'v2.0.0')).toBeNull()
+    expect(nextSeenVersion('v2.0.0', 'vdev')).toBe('v2.0.0')
+  })
+})
+
+describe('release notes lookup', () => {
+  it('matches an exact version with or without the v prefix', () => {
+    expect(releaseNotesFor('2.0.0', catalog)?.version).toBe('v2.0.0')
+    expect(releaseNotesFor(undefined, catalog)).toBeUndefined()
+  })
+
+  it('picks the newest entry at or below a version, whatever the catalog order', () => {
+    expect(latestReleaseNotesFor('v2.1.0', [entry('v2.0.0'), entry('v1.15.0')])?.version).toBe('v2.0.0')
+    expect(latestReleaseNotesFor('v1.99.0', catalog)?.version).toBe('v1.15.0')
+    expect(latestReleaseNotesFor('v1.0.0', catalog)).toBeUndefined()
+  })
+})
+
+describe('compareVersions', () => {
+  it('orders by semver, with a prerelease before its release', () => {
+    expect(compareVersions('v1.10.0', 'v1.9.9')).toBeGreaterThan(0)
+    expect(compareVersions('1.2.3', 'v1.2.3')).toBe(0)
+    expect(compareVersions('v1.2.3-rc.1', 'v1.2.3')).toBeLessThan(0)
+    expect(compareVersions('dev', 'v1.2.3')).toBeNull()
+  })
+})
+
+describe('the shipped catalog', () => {
+  it('has one well-formed entry per release', () => {
+    const versions = RELEASE_NOTES.map(n => n.version)
+    expect(new Set(versions).size).toBe(versions.length)
+    for (const notes of RELEASE_NOTES) {
+      expect(notes.version, notes.version).toMatch(/^v\d+\.\d+\.\d+$/)
+      expect(notes.highlights.length, `${notes.version} needs a lead highlight`).toBeGreaterThan(0)
+      expect(new Set(notes.highlights.map(h => h.id)).size, `${notes.version} highlight ids`).toBe(notes.highlights.length)
+      for (const h of notes.highlights) {
+        expect(!!h.path === !!h.cta, `${notes.version}/${h.id}: path and cta go together`).toBe(true)
+        if (h.path) expect(h.path, `${notes.version}/${h.id}`).toMatch(/^\//)
+      }
+      expect(notes.releaseUrl, notes.version).toMatch(/^https:\/\//)
+    }
+  })
+})
+
+describe('releaseLine', () => {
+  it('names the minor line, since its patches show the same notes', () => {
+    expect(releaseLine('v1.15.0')).toBe('v1.15')
+    expect(releaseLine('v2.0.0')).toBe('v2.0')
+  })
+})