Files
supabase/apps/studio/components/layouts/Navigation/LayoutHeader/HomeIcon.tsx
Mert YEREKAPAN da81b2f14d feat(studio): add click tracking for top bar buttons (#45414)
## Summary

Adds PostHog click/open tracking for every interactive element in the
Studio top bar. Previously only 5 of ~16 surfaces were tracked.

### New events (16)

| Event | Surface |
|---|---|
| `home_logo_clicked` | Supabase logo |
| `header_back_to_dashboard_clicked` | Mobile back chevron |
| `header_exceeding_usage_badge_clicked` | "Exceeding usage limits"
badge |
| `organization_dropdown_opened` | Org dropdown trigger |
| `project_dropdown_opened` | Project dropdown trigger |
| `branch_dropdown_opened` | Branch dropdown trigger |
| `merge_request_button_clicked` | MR trigger (separate from existing
success event) |
| `connect_button_clicked` | Connect CTA |
| `feedback_dropdown_opened` | Feedback dropdown trigger |
| `advisor_button_clicked` | Advisor toggle |
| `inline_editor_button_clicked` | SQL editor toggle |
| `assistant_button_clicked` | AI Assistant toggle |
| `user_dropdown_opened` | Account dropdown |
| `local_dropdown_opened` | Local-dev settings dropdown |
| `local_version_popover_opened` | CLI version popover |

### Notes
- Uses `useTrack` (per `telemetry-standards`), all event names use
approved `_clicked` / `_opened` verbs.
- Dropdown `onOpenChange` handlers guard against Radix's double-fire by
only tracking when `open === true`.
- `merge_request_button_clicked` fires on the trigger click; the
existing `branch_create_merge_request_button_clicked` continues to fire
on successful MR creation.
- Pre-existing tracked surfaces (`command_menu_opened`,
`help_button_clicked`, `header_upgrade_cta_clicked`,
`send_feedback_button_clicked`) are unchanged.

## Test plan

- [x] Spot-check each event fires once per interaction in PostHog Live
Events
- [x] Verify no double-fire on dropdown close

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

* **Chores**
* Added telemetry tracking for many header/navigation interactions
(logo, back-to-dashboard, usage badge,
connect/merge/advisor/assistant/inline-editor buttons, and multiple
dropdowns/popovers).
* **Tests**
* Updated tests to stub telemetry calls so UI tests remain stable and
deterministic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-05 16:12:51 +00:00

49 lines
1.7 KiB
TypeScript

import { LOCAL_STORAGE_KEYS } from 'common'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { cn } from 'ui'
import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { IS_PLATFORM } from '@/lib/constants'
import { useTrack } from '@/lib/telemetry/track'
export const HomeIcon = ({ className }: { className?: string }) => {
const { data: selectedOrganization } = useSelectedOrganizationQuery()
const { data: organizations } = useOrganizationsQuery()
const track = useTrack()
const largeLogo = useIsFeatureEnabled('branding:large_logo')
const router = useRouter()
const [lastVisitedOrganization] = useLocalStorageQuery(
LOCAL_STORAGE_KEYS.LAST_VISITED_ORGANIZATION,
''
)
const getDefaultOrgRedirect = () => {
if (lastVisitedOrganization) return `/org/${lastVisitedOrganization}`
if (selectedOrganization?.slug) return `/org/${selectedOrganization.slug}`
if (organizations && organizations.length > 0) return `/org/${organizations[0].slug}`
return '/organizations'
}
const href = IS_PLATFORM ? getDefaultOrgRedirect() : '/project/default'
return (
<Link
href={href}
onClick={() => track('header_home_logo_clicked')}
className={cn('items-center justify-center shrink-0 flex', className)}
>
<img
alt="Supabase"
src={`${router.basePath}/img/supabase-logo.svg`}
className={largeLogo ? 'h-[20px]' : 'h-[18px]'}
/>
</Link>
)
}