Standardize PH events (supabase#31067)

* Standardize PH events

* Prettier

* Reinstate send events for sign in and sign up

Author: joshenlim

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

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useFlag } from 'hooks/ui/useFlag'
-import { TELEMETRY_EVENTS } from 'lib/constants/telemetry'
+import { TelemetryActions } from 'lib/constants/telemetry'
 import { useAppStateSnapshot } from 'state/app-state'
 import { Badge, Button, Modal, ScrollArea, cn } from 'ui'
 import { FEATURE_PREVIEWS, useFeaturePreviewContext } from './FeaturePreviewContext'
@@ -37,9 +37,10 @@ const FeaturePreviewModal = () => {
   const toggleFeature = () => {
     onUpdateFlag(selectedFeatureKey, !isSelectedFeatureEnabled)
     sendEvent({
-      action: TELEMETRY_EVENTS.FEATURE_PREVIEWS,
-      label: selectedFeatureKey,
-      value: isSelectedFeatureEnabled ? 'disabled' : 'enabled',
+      action: isSelectedFeatureEnabled
+        ? TelemetryActions.FEATURE_PREVIEW_DISABLED
+        : TelemetryActions.FEATURE_PREVIEW_ENABLED,
+      properties: { feature: selectedFeatureKey },
     })
   }
 

apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx

@@ -10,6 +10,7 @@ import { usePoolingConfigurationQuery } from 'data/database/pooling-configuratio
 import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import { TelemetryActions } from 'lib/constants/telemetry'
 import { pluckObjectFields } from 'lib/helpers'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import {
@@ -93,11 +94,10 @@ export const DatabaseConnectionString = () => {
   const connectionInfo = pluckObjectFields(selectedDatabase || emptyState, DB_FIELDS)
 
   const handleCopy = (id: string) => {
-    const labelValue = DATABASE_CONNECTION_TYPES.find((type) => type.id === id)?.label
+    const connectionType = DATABASE_CONNECTION_TYPES.find((type) => type.id === id)?.label
     sendEvent({
-      category: 'settings',
-      action: 'copy_connection_string',
-      label: labelValue ?? '',
+      action: TelemetryActions.CONNECTION_STRING_COPIED,
+      properties: { connectionType },
     })
   }
 

apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx

@@ -15,7 +15,7 @@ import { CronJob, useCronJobsQuery } from 'data/database-cron-jobs/database-cron
 import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { TELEMETRY_EVENTS, TELEMETRY_VALUES } from 'lib/constants/telemetry'
+import { TelemetryActions } from 'lib/constants/telemetry'
 import {
   Button,
   Form_Shadcn_,
@@ -264,16 +264,13 @@ export const CreateCronJobSheet = ({
             toast.success(`Successfully created cron job ${name}`)
           }
 
-          // We should allow sending custom properties with events
           sendEvent({
-            action: TELEMETRY_EVENTS.CRON_JOBS,
-            value: isEditing
-              ? TELEMETRY_VALUES.CRON_JOB_UPDATED
-              : TELEMETRY_VALUES.CRON_JOB_CREATED,
-            label: isEditing ? 'Cron job was updated' : 'Cron job was created',
+            action: isEditing
+              ? TelemetryActions.CRON_JOB_UPDATED
+              : TelemetryActions.CRON_JOB_CREATED,
             properties: {
-              cron_job_type: values.type,
-              cron_job_schedule: schedule,
+              type: values.type,
+              schedule: schedule,
             },
           })
 

apps/studio/components/interfaces/Integrations/CronJobs/CronJobCard.tsx

@@ -9,7 +9,7 @@ import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectConte
 import { CronJob } from 'data/database-cron-jobs/database-cron-jobs-query'
 import { useDatabaseCronJobToggleMutation } from 'data/database-cron-jobs/database-cron-jobs-toggle-mutation'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
-import { TELEMETRY_EVENTS, TELEMETRY_VALUES } from 'lib/constants/telemetry'
+import { TelemetryActions } from 'lib/constants/telemetry'
 import {
   Button,
   DropdownMenu,
@@ -78,11 +78,7 @@ export const CronJobCard = ({ job, onEditCronJob, onDeleteCronJob }: CronJobCard
                 type="default"
                 icon={<History />}
                 onClick={() => {
-                  sendEvent({
-                    action: TELEMETRY_EVENTS.CRON_JOBS,
-                    value: TELEMETRY_VALUES.CRON_JOBS_VIEW_PREVIOUS_RUNS,
-                    label: 'User clicked view previous runs button',
-                  })
+                  sendEvent({ action: TelemetryActions.CRON_JOBS_VIEW_PREVIOUS_RUNS_CLICKED })
                 }}
               >
                 <Link href={`/project/${ref}/integrations/cron/jobs/${job.jobname}`}>History</Link>
@@ -94,11 +90,7 @@ export const CronJobCard = ({ job, onEditCronJob, onDeleteCronJob }: CronJobCard
                 <DropdownMenuContent align="end" className="w-36">
                   <DropdownMenuItem
                     onClick={() => {
-                      sendEvent({
-                        action: TELEMETRY_EVENTS.CRON_JOBS,
-                        value: TELEMETRY_VALUES.CRON_JOB_UPDATE_CLICKED,
-                        label: 'User clicked edit cron job button',
-                      })
+                      sendEvent({ action: TelemetryActions.CRON_JOB_UPDATE_CLICKED })
                       onEditCronJob(job)
                     }}
                   >
@@ -107,11 +99,7 @@ export const CronJobCard = ({ job, onEditCronJob, onDeleteCronJob }: CronJobCard
                   <DropdownMenuSeparator />
                   <DropdownMenuItem
                     onClick={() => {
-                      sendEvent({
-                        action: TELEMETRY_EVENTS.CRON_JOBS,
-                        value: TELEMETRY_VALUES.CRON_JOB_DELETE_CLICKED,
-                        label: 'User clicked delete cron job button',
-                      })
+                      sendEvent({ action: TelemetryActions.CRON_JOB_DELETE_CLICKED })
                       onDeleteCronJob(job)
                     }}
                   >

apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx

@@ -8,7 +8,7 @@ import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { CronJob, useCronJobsQuery } from 'data/database-cron-jobs/database-cron-jobs-query'
 import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
-import { TELEMETRY_EVENTS, TELEMETRY_VALUES } from 'lib/constants/telemetry'
+import { TelemetryActions } from 'lib/constants/telemetry'
 import { Button, Input, Sheet, SheetContent } from 'ui'
 import { CronJobCard } from './CronJobCard'
 import { DeleteCronJob } from './DeleteCronJob'
@@ -63,11 +63,7 @@ export const CronjobsTab = () => {
   const filteredCronJobs = (cronJobs ?? []).filter((cj) => cj?.jobname?.includes(searchQuery || ''))
 
   const onOpenCreateJobSheet = () => {
-    sendEvent({
-      action: TELEMETRY_EVENTS.CRON_JOBS,
-      value: TELEMETRY_VALUES.CRON_JOB_CREATE_CLICKED,
-      label: 'User clicked create job',
-    })
+    sendEvent({ action: TelemetryActions.CRON_JOB_CREATE_CLICKED })
     setCreateCronJobSheetShown(true)
   }
 

apps/studio/components/interfaces/Integrations/CronJobs/DeleteCronJob.tsx

@@ -3,9 +3,9 @@ import { toast } from 'sonner'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useDatabaseCronJobDeleteMutation } from 'data/database-cron-jobs/database-cron-jobs-delete-mutation'
 import { CronJob } from 'data/database-cron-jobs/database-cron-jobs-query'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
-import { TELEMETRY_EVENTS, TELEMETRY_VALUES } from 'lib/constants/telemetry'
+import { TelemetryActions } from 'lib/constants/telemetry'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface DeleteCronJobProps {
   cronJob: CronJob
@@ -19,11 +19,7 @@ export const DeleteCronJob = ({ cronJob, visible, onClose }: DeleteCronJobProps)
   const { mutate: sendEvent } = useSendEventMutation()
   const { mutate: deleteDatabaseCronJob, isLoading } = useDatabaseCronJobDeleteMutation({
     onSuccess: () => {
-      sendEvent({
-        action: TELEMETRY_EVENTS.CRON_JOBS,
-        value: TELEMETRY_VALUES.CRON_JOB_DELETED,
-        label: 'User deleted cron job',
-      })
+      sendEvent({ action: TelemetryActions.CRON_JOB_DELETED })
       toast.success(`Successfully removed cron job ${cronJob.jobname}`)
       onClose()
     },

apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover/index.tsx

@@ -21,6 +21,7 @@ import {
 } from 'ui'
 import { RealtimeConfig } from '../useRealtimeMessages'
 import { DocsButton } from 'components/ui/DocsButton'
+import { TelemetryActions } from 'lib/constants/telemetry'
 
 interface ChooseChannelPopoverProps {
   config: RealtimeConfig
@@ -51,11 +52,7 @@ export const ChooseChannelPopover = ({ config, onChangeConfig }: ChooseChannelPo
 
   const onSubmit = () => {
     setOpen(false)
-    sendEvent({
-      category: 'realtime_inspector',
-      action: 'started_listening_to_channel_in_input_channel_popover',
-      label: 'realtime_inspector_config',
-    })
+    sendEvent({ action: TelemetryActions.REALTIME_INSPECTOR_LISTEN_CHANNEL_CLICKED })
     onChangeConfig({
       ...config,
       channelName: form.getValues('channel'),

apps/studio/components/interfaces/Realtime/Inspector/Header.tsx

@@ -3,6 +3,7 @@ import { PlayCircle, StopCircle } from 'lucide-react'
 import { Dispatch, SetStateAction } from 'react'
 
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import { TelemetryActions } from 'lib/constants/telemetry'
 import { Button } from 'ui'
 import { ChooseChannelPopover } from './ChooseChannelPopover'
 import { RealtimeFilterPopover } from './RealtimeFilterPopover'
@@ -34,11 +35,7 @@ export const Header = ({ config, onChangeConfig }: HeaderProps) => {
                 onChangeConfig({ ...config, enabled: !config.enabled })
                 if (!config.enabled) {
                   // the user has clicked to start listening
-                  sendEvent({
-                    category: 'realtime_inspector',
-                    action: 'started_listening',
-                    label: 'realtime_inspector_config',
-                  })
+                  sendEvent({ action: TelemetryActions.REALTIME_INSPECTOR_LISTEN_CHANNEL_CLICKED })
                 }
               }}
             >

apps/studio/components/interfaces/Realtime/Inspector/MessageSelection.tsx

@@ -6,6 +6,7 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { Button, cn } from 'ui'
 import type { LogData } from './Messages.types'
 import { SelectedRealtimeMessagePanel } from './SelectedRealtimeMessagePanel'
+import { TelemetryActions } from 'lib/constants/telemetry'
 
 export interface MessageSelectionProps {
   log: LogData | null
@@ -73,11 +74,7 @@ const MessageSelection = ({ log, onClose }: MessageSelectionProps) => {
                 type="default"
                 title="Copy log to clipboard"
                 onClick={() => {
-                  sendEvent({
-                    category: 'realtime_inspector',
-                    action: 'copied_message',
-                    label: 'realtime_inspector_results',
-                  })
+                  sendEvent({ action: TelemetryActions.REALTIME_INSPECTOR_COPY_MESSAGE_CLICKED })
                 }}
               />
             </div>

apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx

@@ -13,6 +13,7 @@ import type { LogData } from './Messages.types'
 import NoChannelEmptyState from './NoChannelEmptyState'
 import { ColumnRenderer } from './RealtimeMessageColumnRenderer'
 import { DocsButton } from 'components/ui/DocsButton'
+import { TelemetryActions } from 'lib/constants/telemetry'
 
 export const isErrorLog = (l: LogData) => {
   return l.message === 'SYSTEM' && l.metadata?.status === 'error'
@@ -177,11 +178,7 @@ const MessagesTable = ({
                       isRowSelected={false}
                       selectedCellIdx={undefined}
                       onClick={() => {
-                        sendEvent({
-                          category: 'realtime_inspector',
-                          action: 'focused-specific-message',
-                          label: 'realtime_inspector_results',
-                        })
+                        sendEvent({ action: TelemetryActions.REALTIME_INSPECTOR_MESSAGE_CLICKED })
                         setFocusedLog(row)
                       }}
                     />