Files
supabase/packages/dev-tools/index.ts
Jordi Enric 1545df1fe6 feat(dev-tools): add resource warnings tab to dev toolbar (#44857)
## Problem

There was no way to trigger resource warning banners in the dev toolbar,
making it hard to test different warning states (warn/critical,
read-only mode) without manually mocking API responses or waiting for
real exhaustion events.

## Fix

- Adds an ExtraTab extension point to DevToolbar so Studio can inject
custom tabs without coupling the package to app-specific hooks
- Adds a ResourceWarningsTab in Studio with per-type off/warn/crit
toggles for disk IO, CPU, memory, disk space, and auth rate limit
warnings, plus a read-only mode toggle
- Auth rate limit only exposes warn (no crit) since critical is not a
valid API return value
- The tab component is dynamically imported so it stays out of
production bundles, controlled by the same NEXT_PUBLIC_ENVIRONMENT guard
used by the toolbar

## How to test

1. Run Studio locally or open a Vercel preview deployment
2. Open the browser console and run window.devTelemetry() to enable the
toolbar
3. Click the toolbar trigger to open the panel
4. Switch to the "Warnings" tab
5. Toggle any warning type to "Warn" or "Crit" and confirm the banner
appears at the top of the page
6. Toggle read-only mode on and confirm the read-only banner appears
7. Click "Reset to real data" and confirm banners return to their actual
state
8. Confirm the Auth Rate Limit row only has Off and Warn buttons (no
Crit)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* New "Warnings" tab in the developer toolbar (enabled in local and
staging) for managing resource warning banners.
* Per-resource severity overrides (Off / Warning / Critical) with
immediate preview in the toolbar.
  * Local "read-only" toggle to simulate read-only mode.
* "Reset to real data" clears overrides, disables the local toggle, and
refreshes server state.
* Tab loads lazily and shows a disabled/loading state if org/project
context is unavailable.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-15 11:09:47 +02:00

43 lines
1.6 KiB
TypeScript

import type { ReactNode } from 'react'
import * as DevToolbarModule from './DevToolbar'
import * as DevToolbarContextModule from './DevToolbarContext'
import * as DevToolbarTriggerModule from './DevToolbarTrigger'
import type { DevTelemetryToolbarContextType } from './types'
// Tree-shaking pattern: conditionally export stubs outside local/staging.
// The bundler replaces NEXT_PUBLIC_ENVIRONMENT at build time, making the
// ternary static. In production builds (env === 'prod'), the implementation
// modules are eliminated from the bundle.
// Duplicated for tree-shaking — bundler must see literal process.env reference.
// Keep in sync: DevToolbarContext.tsx, DevToolbar.tsx, DevToolbarTrigger.tsx, feature-flags.tsx
const env = process.env.NEXT_PUBLIC_ENVIRONMENT
const isToolbarEnabled = env === 'local' || env === 'staging'
const noopContext: DevTelemetryToolbarContextType = {
isEnabled: false,
isOpen: false,
setIsOpen: () => {},
events: [],
setEvents: () => {},
dismissToolbar: () => {},
}
export const DevToolbarProvider = !isToolbarEnabled
? ({ children }: { children: ReactNode; apiUrl?: string }) => children
: DevToolbarContextModule.DevToolbarProvider
export const useDevToolbar = !isToolbarEnabled
? () => noopContext
: DevToolbarContextModule.useDevToolbar
export const DevToolbar = !isToolbarEnabled
? (_props: { extraTabs?: import('./types').ExtraTab[] }) => null
: DevToolbarModule.DevToolbar
export const DevToolbarTrigger = !isToolbarEnabled
? () => null
: DevToolbarTriggerModule.DevToolbarTrigger
export type { DevTelemetryEvent, DevToolbarConfig, ExtraTab } from './types'