Beef up a bit more event tracking

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx

@@ -3,11 +3,12 @@ import Link from 'next/link'
 import { useEffect, useState } from 'react'
 
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import { useFlag } from 'hooks/ui/useFlag'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
+import { TELEMETRY_EVENTS } from 'lib/constants/telemetry'
 import { useAppStateSnapshot } from 'state/app-state'
 import { Badge, Button, Modal, ScrollArea, cn } from 'ui'
 import { FEATURE_PREVIEWS, useFeaturePreviewContext } from './FeaturePreviewContext'
-import { useFlag } from 'hooks/ui/useFlag'
-import { LOCAL_STORAGE_KEYS, TELEMETRY_EVENTS } from 'lib/constants'
 
 const FeaturePreviewModal = () => {
   const snap = useAppStateSnapshot()

apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx

@@ -22,13 +22,8 @@ import { useOrgOptedIntoAi } from 'hooks/misc/useOrgOptedIntoAi'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import { useFlag } from 'hooks/ui/useFlag'
-import {
-  BASE_PATH,
-  IS_PLATFORM,
-  OPT_IN_TAGS,
-  TELEMETRY_EVENTS,
-  TELEMETRY_VALUES,
-} from 'lib/constants'
+import { BASE_PATH, IS_PLATFORM, OPT_IN_TAGS } from 'lib/constants'
+import { TELEMETRY_EVENTS, TELEMETRY_VALUES } from 'lib/constants/telemetry'
 import uuidv4 from 'lib/uuid'
 import { useAppStateSnapshot } from 'state/app-state'
 import {

apps/studio/components/ui/AIAssistantPanel/Message.tsx

@@ -66,7 +66,6 @@ export const Message = function Message({
                 </div>
               ) : (
                 <SqlSnippet
-                  id={id}
                   readOnly={readOnly}
                   isLoading={isLoading}
                   sql={props.children[0].props.children}

apps/studio/components/ui/AIAssistantPanel/SqlSnippet.tsx

@@ -29,16 +29,16 @@ import { getContextualInvalidationKeys, isReadOnlySelect } from './AIAssistant.u
 import { useParams } from 'common'
 import { useQueryClient } from '@tanstack/react-query'
 import { Markdown } from 'components/interfaces/Markdown'
+import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import { TELEMETRY_EVENTS, TELEMETRY_VALUES } from 'lib/constants/telemetry'
 
 interface SqlSnippetWrapperProps {
-  id: string
   sql: string
   isLoading?: boolean
   readOnly?: boolean
 }
 
 const SqlSnippetWrapper = ({
-  id,
   sql,
   isLoading = false,
   readOnly = false,
@@ -52,7 +52,6 @@ const SqlSnippetWrapper = ({
   return (
     <div className="-mx-8 my-3 mt-2 border-b overflow-hidden">
       <SqlCard
-        id={id}
         sql={updatedFormatted}
         isChart={props.isChart}
         xAxis={props.xAxis}
@@ -66,7 +65,6 @@ const SqlSnippetWrapper = ({
 }
 
 interface ParsedSqlProps {
-  id: string
   sql: string
   title: string
   isLoading?: boolean
@@ -77,7 +75,6 @@ interface ParsedSqlProps {
 }
 
 export const SqlCard = ({
-  id,
   sql,
   isChart,
   xAxis,
@@ -103,6 +100,8 @@ export const SqlCard = ({
   const [error, setError] = useState<QueryResponseError>()
   const [showWarning, setShowWarning] = useState(false)
 
+  const { mutate: sendEvent } = useSendEventMutation()
+
   const { mutate: executeSql, isLoading: isExecuting } = useExecuteSqlMutation({
     onSuccess: async (res) => {
       // [Joshen] Only do contextual invalidation within a project context
@@ -193,6 +192,10 @@ export const SqlCard = ({
                       return { result: [] }
                     },
                   })
+                  sendEvent({
+                    action: TELEMETRY_EVENTS.AI_ASSISTANT_V2,
+                    value: TELEMETRY_VALUES.RAN_SQL_SUGGESTION,
+                  })
                 }}
               >
                 Run
@@ -221,7 +224,13 @@ export const SqlCard = ({
                     size="tiny"
                     className="w-7 h-7"
                     icon={<Edit size={14} />}
-                    onClick={handleEditInSQLEditor}
+                    onClick={() => {
+                      handleEditInSQLEditor()
+                      sendEvent({
+                        action: TELEMETRY_EVENTS.AI_ASSISTANT_V2,
+                        value: TELEMETRY_VALUES.EDIT_IN_SQL_EDITOR,
+                      })
+                    }}
                     tooltip={{ content: { side: 'bottom', text: 'Edit in SQL Editor' } }}
                   />
                 ) : (
@@ -285,13 +294,13 @@ export const SqlCard = ({
 
       {showCode && (
         <CodeBlock
+          hideLineNumbers
           value={sql}
           language="sql"
           className={cn(
             'max-h-96 block !bg-transparent !py-3 !px-3.5 prose dark:prose-dark border-0 border-t text-foreground !rounded-none w-full',
             '[&>code]:m-0 [&>code>span]:flex [&>code>span]:flex-wrap [&>code]:block [&>code>span]:text-foreground'
           )}
-          hideLineNumbers
         />
       )}
 
@@ -353,6 +362,8 @@ export const SqlCard = ({
                       <>
                         <p className="font-mono text-xs">{error.error}</p>
                         <Button
+                          type="default"
+                          className="mt-2"
                           onClick={() => {
                             setAiAssistantPanel({
                               sqlSnippets: [sql],

apps/studio/lib/constants/index.ts

@@ -83,18 +83,3 @@ export const OPT_IN_TAGS = {
 export const GB = 1024 * 1024 * 1024
 export const MB = 1024 * 1024
 export const KB = 1024
-
-// [Joshen] Just adding these to start consolidating our telemetry configs
-// may change depending on how we choose to standardize across all apps
-// Events define the name of the event and it'll be used as the primary identification
-export enum TELEMETRY_EVENTS {
-  FEATURE_PREVIEWS = 'Dashboard UI Feature Previews',
-  AI_ASSISTANT_V2 = 'AI Assistant V2',
-}
-
-// [Joshen] Values refer to the "action" of the "event"
-// e.g prompt submitted (action) through the AI assistant (event)
-// e.g enabled feature x (action) via the feature preview (event)
-export enum TELEMETRY_VALUES {
-  PROMPT_SUBMITTED = 'prompt-submitted',
-}

apps/studio/lib/constants/telemetry.ts

@@ -0,0 +1,19 @@
+// [Joshen] Just adding these to start consolidating our telemetry configs
+// may change depending on how we choose to standardize across all apps
+// Events define the name of the event and it'll be used as the primary identification
+export enum TELEMETRY_EVENTS {
+  FEATURE_PREVIEWS = 'Dashboard UI Feature Previews',
+  AI_ASSISTANT_V2 = 'AI Assistant V2',
+}
+
+// [Joshen] Values refer to the "action" of the "event"
+// e.g prompt submitted (action) through the AI assistant (event)
+// e.g enabled feature x (action) via the feature preview (event)
+export enum TELEMETRY_VALUES {
+  // Following are related to AI Assistant V2
+  PROMPT_SUBMITTED = 'prompt-submitted',
+  /** Track running a mutation SQL suggestion from AI Assistant: Indication of usefulness of AI assistant response */
+  RAN_SQL_SUGGESTION = 'ran-sql-suggestion',
+  /** Track editing a SQL suggestion: Indicatation of interest for wanting to expand from a SQL suggestion */
+  EDIT_IN_SQL_EDITOR = 'edit-in-sql-editor',
+}