mirror of
https://github.com/supabase/supabase.git
synced 2026-05-10 19:00:05 -04:00
Mert YEREKAPAN
da81b2f14d
## 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 -->
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { SqlEditor } from 'icons'
|
|
import { cn, KeyboardShortcut } from 'ui'
|
|
|
|
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
import { useTrack } from '@/lib/telemetry/track'
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
import { useIsShortcutEnabled } from '@/state/shortcuts/useIsShortcutEnabled'
|
|
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
|
|
|
|
const InlineEditorKeyboardTooltip = () => {
|
|
const hotkeyEnabled = useIsShortcutEnabled(SHORTCUT_IDS.INLINE_EDITOR_TOGGLE)
|
|
|
|
return hotkeyEnabled ? <KeyboardShortcut keys={['Meta', 'E']} /> : null
|
|
}
|
|
|
|
export const InlineEditorButton = () => {
|
|
const { activeSidebar, toggleSidebar } = useSidebarManagerSnapshot()
|
|
const isOpen = activeSidebar?.id === SIDEBAR_KEYS.EDITOR_PANEL
|
|
const track = useTrack()
|
|
|
|
const handleClick = () => {
|
|
track('header_inline_editor_button_clicked')
|
|
toggleSidebar(SIDEBAR_KEYS.EDITOR_PANEL)
|
|
}
|
|
|
|
return (
|
|
<ButtonTooltip
|
|
type="outline"
|
|
size="tiny"
|
|
id="editor-trigger"
|
|
className={cn(
|
|
'rounded-full w-[32px] h-[32px] flex items-center justify-center p-0 text-foreground-light hover:text-foreground',
|
|
isOpen && 'bg-foreground text-background hover:text-background'
|
|
)}
|
|
onClick={handleClick}
|
|
tooltip={{
|
|
content: {
|
|
className: 'p-1 pl-2.5',
|
|
text: (
|
|
<div className="flex items-center gap-2.5">
|
|
<span>SQL Editor</span>
|
|
<InlineEditorKeyboardTooltip />
|
|
</div>
|
|
),
|
|
},
|
|
}}
|
|
>
|
|
<SqlEditor size={16} strokeWidth={1.5} />
|
|
</ButtonTooltip>
|
|
)
|
|
}
|