feat(studio): additional index advisor events (supabase#41104)

* feat: add tracking for indexes tab in query performance

* chore: remove console log

* fix: dismiss index advisor banner when enabled

Author: kemaldotearth

apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx

@@ -1,5 +1,5 @@
 import { Check, Lightbulb, Table2 } from 'lucide-react'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 
 import { AccordionTrigger } from '@ui/components/shadcn/ui/accordion'
 import { useIndexAdvisorStatus } from 'components/interfaces/QueryPerformance/hooks/useIsIndexAdvisorStatus'
@@ -35,6 +35,7 @@ import {
 import { EnableIndexAdvisorButton } from './IndexAdvisor/EnableIndexAdvisorButton'
 import { DocsButton } from 'components/ui/DocsButton'
 import { DOCS_URL } from 'lib/constants'
+import { useTrack } from 'lib/telemetry/track'
 
 interface QueryIndexesProps {
   selectedRow: any
@@ -49,6 +50,8 @@ export const QueryIndexes = ({ selectedRow }: QueryIndexesProps) => {
   const { data: project } = useSelectedProjectQuery()
   const [showStartupCosts, setShowStartupCosts] = useState(false)
   const [isExecuting, setIsExecuting] = useState(false)
+  const track = useTrack()
+  const [hasTrackedTabView, setHasTrackedTabView] = useState(false)
 
   const {
     data: usedIndexes,
@@ -100,10 +103,27 @@ export const QueryIndexes = ({ selectedRow }: QueryIndexesProps) => {
 
   const invalidateQueries = useIndexInvalidation()
 
+  useEffect(() => {
+    if (!isLoadingIndexAdvisorResult && !hasTrackedTabView) {
+      track('index_advisor_tab_clicked', {
+        hasRecommendations: hasIndexRecommendation,
+        isIndexAdvisorEnabled: isIndexAdvisorEnabled,
+      })
+      setHasTrackedTabView(true)
+    }
+  }, [
+    isLoadingIndexAdvisorResult,
+    hasIndexRecommendation,
+    hasTrackedTabView,
+    track,
+    isIndexAdvisorEnabled,
+  ])
+
   const createIndex = async () => {
     if (index_statements.length === 0) return
 
     setIsExecuting(true)
+    track('index_advisor_create_indexes_button_clicked')
 
     try {
       await createIndexes({

apps/studio/components/layouts/ObservabilityLayout/ObservabilityLayout.tsx

@@ -55,7 +55,6 @@ const ObservabilityLayoutContent = ({
 
   useEffect(() => {
     const isQueryPerformancePage = pathname?.includes('/query-performance')
-    const wasQueryPerformancePage = prevPathnameRef.current?.includes('/query-performance')
 
     if (
       isQueryPerformancePage &&
@@ -69,7 +68,7 @@ const ObservabilityLayoutContent = ({
         content: <BannerIndexAdvisor />,
         priority: 3,
       })
-    } else if (isIndexAdvisorBannerDismissed || !isQueryPerformancePage) {
+    } else if (isIndexAdvisorBannerDismissed || !isQueryPerformancePage || isIndexAdvisorEnabled) {
       dismissBanner('index-advisor-banner')
     }
 

packages/common/telemetry-constants.ts

@@ -1130,6 +1130,34 @@ export interface IndexAdvisorBannerDismissButtonClickedEvent {
   groups: TelemetryGroups
 }
 
+/**
+ * Index Advisor tab clicked event.
+ *
+ * @group Events
+ * @source studio
+ * @page /observability/query-performance
+ */
+export interface IndexAdvisorTabClickedEvent {
+  action: 'index_advisor_tab_clicked'
+  properties: {
+    hasRecommendations: boolean
+    isIndexAdvisorEnabled: boolean
+  }
+  groups: TelemetryGroups
+}
+
+/**
+ * Index Advisor create indexes button clicked event.
+ *
+ * @group Events
+ * @source studio
+ * @page /observability/query-performance
+ */
+export interface IndexAdvisorCreateIndexesButtonClickedEvent {
+  action: 'index_advisor_create_indexes_button_clicked'
+  groups: TelemetryGroups
+}
+
 /**
  * User clicked the dismiss button on a banner in studio Observability pages.
  *
@@ -2536,6 +2564,8 @@ export type TelemetryEvent =
   | IndexAdvisorBannerEnableButtonClickedEvent
   | IndexAdvisorBannerDismissButtonClickedEvent
   | IndexAdvisorDialogEnableButtonClickedEvent
+  | IndexAdvisorTabClickedEvent
+  | IndexAdvisorCreateIndexesButtonClickedEvent
   | EdgeFunctionDeployButtonClickedEvent
   | EdgeFunctionDeployUpdatesConfirmClickedEvent
   | EdgeFunctionAiAssistantButtonClickedEvent