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 = () => { setIsTemporary(true)} + onClick={() => { + setIsTemporary(true) + track('explorer_temp_access_sql_editor_clicked') + }} /> ) 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 { @@ -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