feat(studio): add connection_string_copied tracking to ConnectSheet (#44327)

apps/studio/components/interfaces/ConnectSheet/ConnectionParameters.tsx

@@ -9,9 +9,10 @@ interface Parameter {
 
 interface ConnectionParametersProps {
   parameters: Parameter[]
+  onCopy?: (paramKey: string) => void
 }
 
-export const ConnectionParameters = ({ parameters }: ConnectionParametersProps) => {
+export const ConnectionParameters = ({ parameters, onCopy }: ConnectionParametersProps) => {
   const [copiedMap, setCopiedMap] = useState<Record<string, boolean>>({})
 
   return (
@@ -25,6 +26,7 @@ export const ConnectionParameters = ({ parameters }: ConnectionParametersProps)
               onClick={() => {
                 copyToClipboard(param.value, () => {
                   setCopiedMap((prev) => ({ ...prev, [param.key]: true }))
+                  onCopy?.(param.key)
                   setTimeout(() => {
                     setCopiedMap((prev) => ({ ...prev, [param.key]: false }))
                   }, 1000)

apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/content.tsx

@@ -6,11 +6,13 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { getConnectionStrings } from '../../../DatabaseSettings.utils'
 import { getAddons } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
 import {
+  DATABASE_CONNECTION_TYPES,
   type ConnectionStringMethod,
   type DatabaseConnectionType,
 } from '@/components/interfaces/ConnectSheet/Connect.constants'
 import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
 import { ConnectionParameters } from '@/components/interfaces/ConnectSheet/ConnectionParameters'
+import { useTrack } from 'lib/telemetry/track'
 import {
   buildConnectionParameters,
   buildSafeConnectionString,
@@ -104,11 +106,21 @@ const useConnectionStringDatabases = () => {
   )
 }
 
+const CONNECTION_METHOD_TO_TELEMETRY: Record<
+  ConnectionStringMethod,
+  'direct' | 'transaction_pooler' | 'session_pooler'
+> = {
+  direct: 'direct',
+  transaction: 'transaction_pooler',
+  session: 'session_pooler',
+}
+
 /**
  * Step component for direct database connections.
  * Uses state to determine which connection string to show.
  */
 function DirectConnectionContent({ state }: StepContentProps) {
+  const track = useTrack()
   const connectionSource = state.connectionSource
   const connectionType = (state.connectionType as DatabaseConnectionType) ?? 'uri'
   const connectionMethod = (state.connectionMethod as ConnectionStringMethod) ?? 'direct'
@@ -153,6 +165,17 @@ function DirectConnectionContent({ state }: StepContentProps) {
     }
   }, [connectionType, connectionParams, safeConnectionString])
 
+  const trackCopy = () => {
+    const typeConfig = DATABASE_CONNECTION_TYPES.find((t) => t.id === connectionType)
+    track('connection_string_copied', {
+      connectionType: typeConfig?.label ?? connectionType,
+      lang: typeConfig?.lang ?? 'bash',
+      connectionMethod: CONNECTION_METHOD_TO_TELEMETRY[connectionMethod],
+      connectionTab: 'Connection String',
+      source: 'studio',
+    })
+  }
+
   if (!resolvedConnectionString) {
     return (
       <div className="p-4">
@@ -169,10 +192,14 @@ function DirectConnectionContent({ state }: StepContentProps) {
         value={connectionString}
         hideLineNumbers
         language="bash"
+        onCopyCallback={trackCopy}
       >
         {connectionString}
       </CodeBlock>
-      <ConnectionParameters parameters={buildConnectionParameters(connectionParams)} />
+      <ConnectionParameters
+        parameters={buildConnectionParameters(connectionParams)}
+        onCopy={trackCopy}
+      />
     </div>
   )
 }