From 9aaa75330673f0581ef9af8526b303c06ff8b75b Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Wed, 2 Sep 2026 09:07:06 -0400
Subject: [PATCH] feat(studio): add telemetry for explorer/sql editor temporary
 switch buttons (#49898)

## Summary

Add PostHog event tracking for the two new buttons introduced in PR
supabase/supabase#49698 that allow users to temporarily switch between
the Explorer and SQL Editor:

* **Explorer button**: "Back to SQL Editor" button in the Explorer
sidebar title bar now fires `explorer_temp_access_sql_editor_clicked`
event
* **SQL Editor button**: "Back to Explorer" button in the SQL Editor
title bar (shown during temporary visits) now fires
`sql_editor_back_explorer_clicked` event

Both event interfaces follow the repo's telemetry-standards conventions,
carrying only `groups: TelemetryGroups` property with no additional
custom properties.

## Test plan

- [X] Verify `explorer_temp_access_sql_editor_clicked` event fires in
PostHog when clicking "Back to SQL Editor" button in Explorer
- [X] Verify `sql_editor_back_explorer_clicked` event fires in PostHog
when clicking "Back to Explorer" button in SQL Editor
- [X] Run typecheck: `pnpm typecheck` passes without errors
- [X] Run lint: `pnpm lint --filter=studio` passes

## Issue

Resolves
[FE-4213](https://linear.app/supabase/issue/FE-4213/explorer-set-up-telemetry-for-metrics-where-appropriate)

## Summary by CodeRabbit

* **Analytics**
  * Added tracking for navigation from the Explorer to the SQL Editor.
  * Added tracking for returning from the SQL Editor to the Explorer.
---
 .../layouts/ExplorerLayout/ExplorerLayout.tsx |  7 ++++-
 .../layouts/editors/EditorBaseLayout.tsx      |  3 ++
 packages/common/telemetry-constants.ts        | 28 +++++++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
index 2011c7b5ff9..5414ed312a6 100644
--- a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
+++ b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
@@ -27,6 +27,7 @@ import {
   useCreateQuery,
 } from '@/components/interfaces/Explorer/hooks'
 import { useIsTemporarySqlEditorVisit } from '@/hooks/misc/useIsTemporarySqlEditorVisit'
+import { useTrack } from '@/lib/telemetry/track'
 import {
   editorEntityTypes,
   EXPLORER_HOME_TAB,
@@ -102,6 +103,7 @@ export const ExplorerLayout = ({ browserTitle, children, title }: ExplorerLayout
 
 const BackToSqlEditorButton = () => {
   const { ref } = useParams()
+  const track = useTrack()
   const { setIsTemporary } = useIsTemporarySqlEditorVisit(ref)
 
   if (!ref) return null
@@ -114,7 +116,10 @@ const BackToSqlEditorButton = () => {
       <Link
         href={`/project/${ref}/sql`}
         aria-label="Switch to SQL Editor"
-        onClick={() => setIsTemporary(true)}
+        onClick={() => {
+          setIsTemporary(true)
+          track('explorer_temp_access_sql_editor_clicked')
+        }}
       />
     </EditorNavigationButton>
   )
diff --git a/apps/studio/components/layouts/editors/EditorBaseLayout.tsx b/apps/studio/components/layouts/editors/EditorBaseLayout.tsx
index 78e3bfc2996..7f61a8a5b9f 100644
--- a/apps/studio/components/layouts/editors/EditorBaseLayout.tsx
+++ b/apps/studio/components/layouts/editors/EditorBaseLayout.tsx
@@ -9,6 +9,7 @@ import { CollapseButton } from '../Tabs/CollapseButton'
 import { EditorTabs } from '../Tabs/Tabs'
 import { useEditorType } from './EditorsLayout.hooks'
 import { useIsTemporarySqlEditorVisit } from '@/hooks/misc/useIsTemporarySqlEditorVisit'
+import { useTrack } from '@/lib/telemetry/track'
 import { useTabsStateSnapshot } from '@/state/tabs'
 
 export interface ExplorerLayoutProps extends ComponentProps<typeof ProjectLayoutWithAuth> {
@@ -86,6 +87,7 @@ export const EditorBaseLayout = ({
 const BackToExplorerButton = () => {
   const { ref } = useParams()
   const router = useRouter()
+  const track = useTrack()
   const { isTemporary, setIsTemporary } = useIsTemporarySqlEditorVisit(ref)
 
   if (!ref || !isTemporary) return null
@@ -95,6 +97,7 @@ const BackToExplorerButton = () => {
       tooltip="Back to Explorer"
       onClick={() => {
         setIsTemporary(false)
+        track('sql_editor_back_explorer_clicked')
         router.push(`/project/${ref}/explorer`)
       }}
     />
diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts
index 0e4365ed54e..dbe916ee052 100644
--- a/packages/common/telemetry-constants.ts
+++ b/packages/common/telemetry-constants.ts
@@ -1587,6 +1587,32 @@ export interface ExplorerBannerCtaButtonClickedEvent {
   groups: TelemetryGroups
 }
 
+/**
+ * User clicked the button in the Explorer sidebar title bar to temporarily switch to the SQL
+ * Editor for snippet access.
+ *
+ * @group Events
+ * @source studio
+ * @page /project/{ref}/explorer
+ */
+export interface ExplorerTempAccessSqlEditorClickedEvent {
+  action: 'explorer_temp_access_sql_editor_clicked'
+  groups: TelemetryGroups
+}
+
+/**
+ * User clicked the "Back to Explorer" button in the SQL Editor title bar, shown only when the
+ * visit originated from the Explorer's temporary switch button.
+ *
+ * @group Events
+ * @source studio
+ * @page /project/{ref}/sql
+ */
+export interface SqlEditorBackExplorerClickedEvent {
+  action: 'sql_editor_back_explorer_clicked'
+  groups: TelemetryGroups
+}
+
 /**
  * User clicked a metric card PID in the Overview panel of the Database Connections observability page, selecting it in the activity table below.
  *
@@ -3891,6 +3917,8 @@ export type TelemetryEvent =
   | ExplorerBannerExposedEvent
   | ExplorerBannerDismissButtonClickedEvent
   | ExplorerBannerCtaButtonClickedEvent
+  | ExplorerTempAccessSqlEditorClickedEvent
+  | SqlEditorBackExplorerClickedEvent
   | SessionTerminateButtonClickedEvent
   | SessionTerminateSubmittedEvent
   | QueryCancelButtonClickedEvent