mirror of
https://github.com/supabase/supabase.git
synced 2026-06-20 22:06:04 +08:00
6bbe2c3297
## Problem We need a local-only UI to inspect client and server telemetry events and override flags during development without touching non-local env behavior. This work is intended to be shared across Studio, Docs, and WWW. ## Changes - Introduced a shared `dev-tools` package with the Dev Telemetry Toolbar UI, trigger, and provider. - Wired the toolbar into Studio, Docs, and WWW app shells (local-only gating). - Added a local-only `devTelemetry()` opt-in with storage gating and SSE subscription. - Wired client PostHog events into a local listener and re-exported types. - Added local flag override cookie support in the UI and CODEOWNERS for the new package. - Added unit tests covering local/non-local behavior and flag utilities. ## Testing Manual (local only): - Start each app locally: `pnpm dev:studio`, `pnpm dev:docs`, `pnpm dev:www` - Open the app, run `devTelemetry()` in the browser console - Click around and confirm both client and server events appear (client will be page views only) - Verify feature flag overrides (PostHog + ConfigCat) persist and restore correctly - Confirm dismissing the toolbar clears local storage and hides the trigger Unblocked by https://github.com/supabase/platform/pull/29172 Resolves GROWTH-591 Demo: [github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b](https://github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b) Screenshots: <img width="1368" height="972" alt="1" src="https://github.com/user-attachments/assets/d2f20a0c-191f-4118-bb5e-15b25f5a54a9" /> <img width="1423" height="790" alt="2" src="https://github.com/user-attachments/assets/115598e2-7287-49bf-9ed7-71ecc679dee3" /> <img width="1433" height="882" alt="3" src="https://github.com/user-attachments/assets/51f666f2-9efc-410f-baec-378bdee9dbfe" /> <img width="608" height="483" alt="4" src="https://github.com/user-attachments/assets/584d6cf5-1b2f-4cee-9e6a-d55ce2e3bae5" /> <img width="628" height="305" alt="5" src="https://github.com/user-attachments/assets/991a9b39-578a-4565-b110-537a02040a53" /> <img width="659" height="447" alt="6" src="https://github.com/user-attachments/assets/95ef405c-fffa-44af-bf6a-f974b780e3fc" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Developer Toolbar (local only): view client/server telemetry, inspect events, and manage/override feature flags with persistent overrides, filtering, and clear/reload. * Client-side telemetry hooks: surface structured events to dev tooling for realtime inspection. * **Bug Fixes** * Fixed end-of-file newline in shared code. * **Chores** * Added dev-tools package, integrated provider and trigger across Studio, Docs, and marketing sites, and added CODEOWNERS entry. * **Tests** * Added comprehensive tests and test setup for the DevToolbar. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
26 lines
650 B
TypeScript
26 lines
650 B
TypeScript
/// <reference types="@testing-library/jest-dom" />
|
|
|
|
import '@testing-library/jest-dom/vitest'
|
|
import { cleanup } from '@testing-library/react'
|
|
import { afterEach, vi } from 'vitest'
|
|
|
|
Object.defineProperty(window, 'matchMedia', {
|
|
writable: true,
|
|
value: vi.fn().mockImplementation((query) => ({
|
|
matches: false,
|
|
media: query,
|
|
onchange: null,
|
|
addListener: vi.fn(), // deprecated
|
|
removeListener: vi.fn(), // deprecated
|
|
addEventListener: vi.fn(),
|
|
removeEventListener: vi.fn(),
|
|
dispatchEvent: vi.fn(),
|
|
})),
|
|
})
|
|
|
|
vi.mock('next/navigation', () => require('next-router-mock/navigation'))
|
|
|
|
afterEach(() => {
|
|
cleanup()
|
|
})
|