mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Pamela Chia
4c10f65de7
## Summary The `compute_badge_upgrade_clicked` event had zero fires since Apr 1 because the PostHog tracking call was never wired up on the "Upgrade compute" button in the compute badge hover card. This adds the missing `useTrack` call using the existing event definition in `telemetry-constants.ts`. ## Changes - Add `useTrack` hook and `onClick` handler to the upgrade button in `ComputeBadgeWrapper.tsx` - Fires `compute_badge_upgrade_clicked` with `computeSize`, `planId`, and `upgradeType` properties - Preserves existing `asChild` + `<Link>` navigation pattern ## Testing Tested on Vercel preview: - [x] Hover compute badge on a project with non-max compute, click "Upgrade compute", verify `compute_badge_upgrade_clicked` event appears in PostHog live events with correct properties - [x] Verify navigation to compute settings page still works (client-side, no full reload) - [x] Test with paid-plan nano project: `upgradeType` should be `free_micro_upgrade` - [x] Test with paid-plan non-nano project: `upgradeType` should be `compute_upgrade` ## Linear - fixes GROWTH-751 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Added analytics tracking for compute upgrade button clicks to record upgrade type (free micro vs. paid), selected compute size (with fallback), and plan identifier. This ensures upgrade interactions are captured for product insights without changing visible UI behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}
export default ComponentA