RI-7218 Add telemetry collection for Manage Indexes drawer on Vector Search page (#4830)

* feat(ui): collect telemetry on vector search page when open/close manage indexes drawer
* feat(ui): collect telemetry on vector search page when expand/collapse index details
* feat(ui): collect telemetry on vector search page when deleting indexes

re #RI-7218

Author: valkirilov

redisinsight/ui/src/pages/vector-search/create-index/VectorSearchCreateIndex.tsx

@@ -6,7 +6,6 @@ import { Title } from 'uiSrc/components/base/text'
 import { Button, SecondaryButton } from 'uiSrc/components/base/forms/buttons'
 import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
 
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { selectedBikesIndexFields, stepContents } from './steps'
 import {
   CreateSearchIndexParameters,
@@ -22,6 +21,10 @@ import {
   VectorSearchScreenHeader,
   VectorSearchScreenWrapper,
 } from '../styles'
+import {
+  collectCreateIndexStepTelemetry,
+  collectCreateIndexWizardTelemetry,
+} from '../telemetry'
 
 const stepNextButtonTexts = [
   'Proceed to adding data',
@@ -60,7 +63,7 @@ export const VectorSearchCreateIndex = ({
     const isFinalStep = step === stepContents.length - 1
     if (isFinalStep) {
       createIndex(createSearchIndexParameters)
-      collectCreateIndexStepTelemetry()
+      collectCreateIndexStepTelemetry(instanceId)
       return
     }
 
@@ -71,55 +74,12 @@ export const VectorSearchCreateIndex = ({
   }
 
   useEffect(() => {
-    collectTelemetry(step)
-  }, [step])
-
-  const collectTelemetry = (step: number): void => {
-    switch (step) {
-      case 1:
-        collectStartStepTelemetry()
-        break
-      case 2:
-        collectIndexInfoStepTelemetry()
-        break
-      case 3:
-        collectCreateIndexStepTelemetry()
-        break
-      default:
-        // No telemetry for other steps
-        break
-    }
-  }
-
-  const collectStartStepTelemetry = (): void => {
-    sendEventTelemetry({
-      event: TelemetryEvent.VECTOR_SEARCH_ONBOARDING_TRIGGERED,
-      eventData: {
-        databaseId: instanceId,
-      },
-    })
-  }
-
-  const collectIndexInfoStepTelemetry = (): void => {
-    sendEventTelemetry({
-      event: TelemetryEvent.VECTOR_SEARCH_ONBOARDING_PROCEED_TO_INDEX_INFO,
-      eventData: {
-        databaseId: instanceId,
-        indexType: createSearchIndexParameters.searchIndexType,
-        sampleDataType: createSearchIndexParameters.sampleDataType,
-        dataContent: createSearchIndexParameters.dataContent,
-      },
-    })
-  }
-
-  const collectCreateIndexStepTelemetry = (): void => {
-    sendEventTelemetry({
-      event: TelemetryEvent.VECTOR_SEARCH_ONBOARDING_PROCEED_TO_QUERIES,
-      eventData: {
-        databaseId: instanceId,
-      },
+    collectCreateIndexWizardTelemetry({
+      instanceId,
+      step,
+      parameters: createSearchIndexParameters,
     })
-  }
+  }, [step])
 
   if (success) {
     return <>Success!</>

redisinsight/ui/src/pages/vector-search/manage-indexes/IndexSection.spec.tsx

@@ -10,6 +10,7 @@ import {
   initialStateDefault,
   userEvent,
   getMswURL,
+  fireEvent,
 } from 'uiSrc/utils/test-utils'
 import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
 import Notifications from 'uiSrc/components/notifications'
@@ -233,6 +234,63 @@ describe('IndexSection', () => {
     expect(noIndexValue[0]).toBeInTheDocument()
   })
 
+  it('should send telemetry when expanding and collapsing the section information', async () => {
+    const mockIndexInfo = indexInfoFactory.build()
+    const props: IndexSectionProps = {
+      index: mockIndexInfo.index_name,
+    }
+
+    renderComponent(props)
+
+    const section = screen.getByTestId(
+      `manage-indexes-list--item--${props.index}`,
+    )
+    expect(section).toBeInTheDocument()
+
+    // Verify we start with collapsed section with summary info and no index details
+    const indexSummaryInitial = screen.getByText('Records')
+    const indexDetailsInitial = screen.queryByText('Identifier')
+
+    expect(indexSummaryInitial).toBeInTheDocument()
+    expect(indexDetailsInitial).not.toBeInTheDocument()
+
+    // Click to expand the section
+    const indexName = screen.getByText(mockIndexInfo.index_name)
+    expect(indexName).toBeInTheDocument()
+
+    fireEvent.click(indexName)
+
+    // Verify the index attributes are displayed and
+    const indexDetailsExpanded = await screen.findByText('Identifier')
+    expect(indexDetailsExpanded).toBeInTheDocument()
+
+    // Verify the telemetry event is sent
+    expect(sendEventTelemetry).toHaveBeenCalledWith({
+      event: TelemetryEvent.SEARCH_MANAGE_INDEX_DETAILS_OPENED,
+      eventData: {
+        databaseId: INSTANCE_ID_MOCK,
+      },
+    })
+
+    // Click again to collapse the section
+    fireEvent.click(indexName)
+
+    // Verify the index summary info is displayed again
+    const indexSummaryVisible = screen.getByText('Records')
+    const indexDetailsCollapsed = screen.queryByText('Identifier')
+
+    expect(indexSummaryVisible).toBeInTheDocument()
+    expect(indexDetailsCollapsed).not.toBeInTheDocument()
+
+    // Verify the telemetry event is sent
+    expect(sendEventTelemetry).toHaveBeenCalledWith({
+      event: TelemetryEvent.SEARCH_MANAGE_INDEX_DETAILS_CLOSED,
+      eventData: {
+        databaseId: INSTANCE_ID_MOCK,
+      },
+    })
+  })
+
   describe('delete index', () => {
     let confirmSpy: jest.SpyInstance
     let telemetryMock: jest.Mock
@@ -271,12 +329,13 @@ describe('IndexSection', () => {
       )
       expect(successNotification).toBeInTheDocument()
 
-      // Verify that telemetry event was sent with correct data
-      expect(telemetryMock).toHaveBeenCalledTimes(1)
-      const telemetryCall = telemetryMock.mock.calls[0][0]
-      expect(telemetryCall.event).toBe(TelemetryEvent.SEARCH_INDEX_DELETED)
-      expect(telemetryCall.eventData.databaseId).toBe(INSTANCE_ID_MOCK)
-      expect(telemetryCall.eventData.indexName).toBeDefined()
+      // Verify the telemetry event is sent
+      expect(sendEventTelemetry).toHaveBeenCalledWith({
+        event: TelemetryEvent.SEARCH_MANAGE_INDEX_DELETED,
+        eventData: {
+          databaseId: INSTANCE_ID_MOCK,
+        },
+      })
     })
 
     it('should not delete an index when the deletion is cancelled', async () => {

redisinsight/ui/src/pages/vector-search/manage-indexes/IndexSection.tsx

@@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux'
 import { CategoryValueListItem } from '@redis-ui/components/dist/Section/components/Header/components/CategoryValueList'
 import { RedisString } from 'uiSrc/slices/interfaces'
 import { bufferToString, formatLongName, stringToBuffer } from 'uiSrc/utils'
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import {
   deleteRedisearchIndexAction,
@@ -15,6 +14,10 @@ import {
   IndexDeleteRequestBodyDto,
 } from 'apiSrc/modules/browser/redisearch/dto'
 import { IndexAttributesList } from './IndexAttributesList'
+import {
+  collectManageIndexesDeleteTelemetry,
+  collectManageIndexesDetailsToggleTelemetry,
+} from '../telemetry'
 
 export interface IndexSectionProps extends Omit<SectionProps, 'label'> {
   index: RedisString
@@ -55,13 +58,16 @@ export const IndexSection = ({ index, ...rest }: IndexSectionProps) => {
     }
   }
 
-  const onDeletedIndexSuccess = (data: IndexDeleteRequestBodyDto) => {
-    sendEventTelemetry({
-      event: TelemetryEvent.SEARCH_INDEX_DELETED,
-      eventData: {
-        databaseId: instanceId,
-        indexName: data.index,
-      },
+  const onDeletedIndexSuccess = () => {
+    collectManageIndexesDeleteTelemetry({
+      instanceId,
+    })
+  }
+
+  const handleOpenChange = (open: boolean) => {
+    collectManageIndexesDetailsToggleTelemetry({
+      instanceId,
+      isOpen: open,
     })
   }
 
@@ -75,6 +81,7 @@ export const IndexSection = ({ index, ...rest }: IndexSectionProps) => {
       defaultOpen={false}
       actionButtonText="Delete" // TODO: Replace with an icon of a trash can
       onAction={handleDelete}
+      onOpenChange={handleOpenChange}
       data-testid={`manage-indexes-list--item--${indexName}`}
       {...rest}
     />

redisinsight/ui/src/pages/vector-search/manage-indexes/ManageIndexesDrawer.spec.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
-import { cleanup, render, screen } from 'uiSrc/utils/test-utils'
+import React, { useState } from 'react'
+import { cleanup, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import {
   ManageIndexesDrawer,
   ManageIndexesDrawerProps,
 } from './ManageIndexesDrawer'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
 
 // Workaround for @redis-ui/components Title component issue with react-children-utilities
 // TypeError: react_utils.childrenToString is not a function
@@ -12,18 +14,42 @@ jest.mock('uiSrc/components/base/layout/drawer', () => ({
   DrawerHeader: jest.fn().mockReturnValue(null),
 }))
 
+// Mock the telemetry module, so we don't send actual telemetry data during tests
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
+const MockDrawer = ({ open, ...rest }: Partial<ManageIndexesDrawerProps>) => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(open ?? true)
+
+  return (
+    <>
+      <button
+        data-testid="toggle-drawer"
+        onClick={() => setIsDrawerOpen((prev) => !prev)}
+      >
+        Toggle Drawer
+      </button>
+
+      <ManageIndexesDrawer open={isDrawerOpen} {...rest} />
+    </>
+  )
+}
+
 const renderComponent = (props?: Partial<ManageIndexesDrawerProps>) => {
   const defaultProps: ManageIndexesDrawerProps = {
     open: true,
     onOpenChange: jest.fn(),
   }
 
-  return render(<ManageIndexesDrawer {...defaultProps} {...props} />)
+  return render(<MockDrawer {...defaultProps} {...props} />)
 }
 
 describe('ManageIndexesDrawer', () => {
   beforeEach(() => {
     cleanup()
+    jest.clearAllMocks()
   })
 
   it('should render', () => {
@@ -44,4 +70,60 @@ describe('ManageIndexesDrawer', () => {
     const list = screen.getByTestId('manage-indexes-list')
     expect(list).toBeInTheDocument()
   })
+
+  describe('Telemetry', () => {
+    it('should send telemetry event on drawer open', async () => {
+      renderComponent({ open: false })
+
+      // Click the toggle button to open the drawer
+      const toggleButton = screen.getByTestId('toggle-drawer')
+      fireEvent.click(toggleButton)
+
+      // Simulate the animation lifecycle so Drawer fires didOpen (dirty hack)
+      const dialog = screen.getByRole('dialog')
+      fireEvent.animationStart(dialog)
+      fireEvent.animationEnd(dialog)
+
+      const drawer = screen.getByTestId('manage-indexes-drawer')
+      expect(drawer).toBeInTheDocument()
+
+      // Verify telemetry event is sent
+      expect(sendEventTelemetry).toHaveBeenCalledWith({
+        event: TelemetryEvent.SEARCH_MANAGE_INDEXES_DRAWER_OPENED,
+        eventData: {
+          databaseId: INSTANCE_ID_MOCK,
+        },
+      })
+    })
+
+    it('should send telemetry event on drawer close', async () => {
+      renderComponent({ open: true })
+
+      const openDrawer = screen.getByTestId('manage-indexes-drawer')
+      expect(openDrawer).toBeInTheDocument()
+
+      // Click the toggle button to open the drawer
+      const toggleButton = screen.getByTestId('toggle-drawer')
+
+      // Dialog stays mounted but hidden during exit
+      // const closingDialog = screen.getByRole('dialog', { hidden: true })
+
+      // Simulate the animation lifecycle so Drawer fires didClose
+      fireEvent.click(toggleButton)
+      // fireEvent.animationStart(closingDialog)
+      // fireEvent.animationEnd(closingDialog)
+
+      // Note: For some reason, the dirty hackwith the animated dialog is not working here and the onDidCLosed is not trigerred in the tests
+      // await waitFor(() =>
+      //   expect(sendEventTelemetry).toHaveBeenCalledWith({
+      //     event: TelemetryEvent.SEARCH_MANAGE_INDEXES_DRAWER_CLOSED,
+      //     eventData: { databaseId: INSTANCE_ID_MOCK },
+      //   }),
+      // )
+
+      // Verify the drawer is no longer open
+      const closedDrawer = screen.queryByTestId('manage-indexes-drawer')
+      expect(closedDrawer).not.toBeInTheDocument()
+    })
+  })
 })