feat: add feature preview events (supabase#31215)

loong · web-flow · commit e31ce6d32687 · 2024-12-18T21:33:02.000+08:00
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
@@ -22,14 +22,6 @@ const FeaturePreviewModal = () => {
   const isNotReleased =
     selectedFeatureKey === 'supabase-ui-functions-assistant' && !enableFunctionsAssistant
 
-  // this modal can be triggered on other pages
-  // Update local state when valtio state changes
-  useEffect(() => {
-    if (snap.selectedFeaturePreview !== '') {
-      setSelectedFeatureKey(snap.selectedFeaturePreview)
-    }
-  }, [snap.selectedFeaturePreview])
-
   const { flags, onUpdateFlag } = featurePreviewContext
   const selectedFeature = FEATURE_PREVIEWS.find((preview) => preview.key === selectedFeatureKey)
   const isSelectedFeatureEnabled = flags[selectedFeatureKey]
@@ -49,6 +41,20 @@ const FeaturePreviewModal = () => {
     snap.setSelectedFeaturePreview(FEATURE_PREVIEWS[0].key)
   }
 
+  // this modal can be triggered on other pages
+  // Update local state when valtio state changes
+  useEffect(() => {
+    if (snap.selectedFeaturePreview !== '') {
+      setSelectedFeatureKey(snap.selectedFeaturePreview)
+    }
+  }, [snap.selectedFeaturePreview])
+
+  useEffect(() => {
+    if (snap.showFeaturePreviewModal) {
+      sendEvent({ action: TelemetryActions.FEATURE_PREVIEWS_CLICKED })
+    }
+  }, [snap.showFeaturePreviewModal])
+
   return (
     <Modal
       hideFooter
diff --git a/apps/studio/lib/constants/telemetry.ts b/apps/studio/lib/constants/telemetry.ts
@@ -22,6 +22,7 @@ export enum TelemetryActions {
   CRON_JOB_CREATE_CLICKED = 'cron_job_create_clicked',
   CRON_JOB_HISTORY_CLICKED = 'cron_job_history_clicked',
 
+  FEATURE_PREVIEWS_CLICKED = 'feature_previews_clicked',
   FEATURE_PREVIEW_ENABLED = 'feature_preview_enabled',
   FEATURE_PREVIEW_DISABLED = 'feature_preview_disabled',
 
@@ -159,3 +160,33 @@ export interface CronJobDeleteClickedEvent {
 export interface CronJobHistoryClickedEvent {
   action: TelemetryActions.CRON_JOB_HISTORY_CLICKED
 }
+
+/**
+ * The FeaturePreviewModal was opened.
+ *
+ * The FeaturePreviewModal can be opened clicking at the profile icon at the bottom left corner of the project sidebar.
+ *
+ * @group Events
+ * @source studio
+ */
+export interface FeaturePreviewsClickedEvent {
+  action: TelemetryActions.FEATURE_PREVIEWS_CLICKED
+}
+
+/**
+ * A feature preview was disabled by the user through the FeaturePreviewModal.
+ *
+ * The FeaturePreviewModal can be opened clicking at the profile icon at the bottom left corner of the project sidebar.
+ *
+ * @group Events
+ * @source studio
+ */
+export interface FeaturePreviewDisabledEvent {
+  action: TelemetryActions.FEATURE_PREVIEW_DISABLED
+  properties: {
+    /**
+     * Feature key of the preview that was disabled. e.g. supabase-ui-api-side-panel
+     */
+    feature: string
+  }
+}
diff --git a/apps/studio/state/app-state.ts b/apps/studio/state/app-state.ts
@@ -1,8 +1,8 @@
-import { proxy, subscribe, snapshot, useSnapshot } from 'valtio'
 import type { Message as MessageType } from 'ai/react'
+import { LOCAL_STORAGE_KEYS as COMMON_LOCAL_STORAGE_KEYS } from 'common'
 import { SupportedAssistantEntities } from 'components/ui/AIAssistantPanel/AIAssistant.types'
 import { LOCAL_STORAGE_KEYS } from 'lib/constants'
-import { LOCAL_STORAGE_KEYS as COMMON_LOCAL_STORAGE_KEYS } from 'common'
+import { proxy, snapshot, subscribe, useSnapshot } from 'valtio'
 
 export type CommonDatabaseEntity = {
   id: number
