feat(ui): collect telemetry on vector search page when clearing query

re #RI-7218

Author: valkirilov

redisinsight/ui/src/pages/vector-search/query/VectorSearchQuery.spec.tsx

@@ -66,5 +66,21 @@ describe('VectorSearchQuery', () => {
         eventData: { databaseId: INSTANCE_ID_MOCK },
       })
     })
+
+    it('should collect telemetry on query clear', () => {
+      renderVectorSearchQueryComponent()
+
+      // Find and click the "Clear" button
+      const clearButton = screen.getByTestId('btn-clear')
+      expect(clearButton).toBeInTheDocument()
+
+      fireEvent.click(clearButton)
+
+      // Verify telemetry event was sent
+      expect(sendEventTelemetry).toHaveBeenCalledWith({
+        event: TelemetryEvent.SEARCH_CLEAR_EDITOR_CLICKED,
+        eventData: { databaseId: INSTANCE_ID_MOCK },
+      })
+    })
   })
 })

redisinsight/ui/src/pages/vector-search/query/VectorSearchQuery.tsx

@@ -63,6 +63,15 @@ export const VectorSearchQuery = () => {
     })
   }
 
+  const onQueryClear = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.SEARCH_CLEAR_EDITOR_CLICKED,
+      eventData: {
+        databaseId: instanceId,
+      },
+    })
+  }
+
   return (
     <CreateIndexWrapper direction="column" justify="between">
       <HeaderActions />
@@ -78,6 +87,7 @@ export const VectorSearchQuery = () => {
             onSubmit={onQuerySubmit}
             onQueryChangeMode={onQueryChangeMode}
             onChangeGroupMode={onChangeGroupMode}
+            onClear={onQueryClear}
             queryProps={{ useLiteActions: true }}
           />
         </ResizablePanel>

redisinsight/ui/src/pages/workbench/components/query/Query/Query.spec.tsx

@@ -1,7 +1,14 @@
 import { cloneDeep } from 'lodash'
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import {
+  cleanup,
+  fireEvent,
+  mockedStore,
+  render,
+  screen,
+  waitFor,
+} from 'uiSrc/utils/test-utils'
 import Query, { Props } from './Query'
 
 const mockedProps = mock<Props>()
@@ -36,4 +43,30 @@ describe('Query', () => {
   it('should render', () => {
     expect(render(<Query {...instance(mockedProps)} />)).toBeTruthy()
   })
+
+  it('should call onClear when clear button is clicked', async () => {
+    const props: Props = {
+      ...instance(mockedProps),
+      query: 'test query',
+      useLiteActions: true,
+      setQuery: jest.fn(),
+      onClear: jest.fn(),
+    }
+
+    render(<Query {...props} />)
+
+    // Ensure we start with the query input populated
+    const queryInput = screen.getByTestId('monaco')
+    expect(queryInput).toHaveValue(props.query)
+
+    // Find the clear button and click it
+    const clearButton = screen.getByTestId('btn-clear')
+    expect(clearButton).toBeInTheDocument()
+
+    fireEvent.click(clearButton)
+
+    // Verify that the onClear function was called and the query input is cleared
+    expect(props.setQuery).toHaveBeenCalled()
+    expect(props.onClear).toHaveBeenCalled()
+  })
 })

redisinsight/ui/src/pages/workbench/components/query/Query/Query.tsx

@@ -88,6 +88,7 @@ export interface Props {
   onKeyDown?: (e: React.KeyboardEvent, script: string) => void
   onQueryChangeMode: () => void
   onChangeGroupMode: () => void
+  onClear?: () => void
 }
 
 let execHistoryPos: number = 0
@@ -109,6 +110,7 @@ const Query = (props: Props) => {
     setQueryEl = () => {},
     onQueryChangeMode = () => {},
     onChangeGroupMode = () => {},
+    onClear = () => {},
   } = props
   let contribution: Nullable<ISnippetController> = null
   const [isDedicatedEditorOpen, setIsDedicatedEditorOpen] = useState(false)
@@ -479,6 +481,11 @@ const Query = (props: Props) => {
     onSubmit(value)
   }
 
+  const handleClear = () => {
+    setQuery('')
+    onClear?.()
+  }
+
   const handleSuggestions = (
     editor: monacoEditor.editor.IStandaloneCodeEditor,
     command?: Nullable<IMonacoQuery>,
@@ -746,7 +753,7 @@ const Query = (props: Props) => {
             <QueryLiteActions
               isLoading={isLoading}
               onSubmit={handleSubmit}
-              onClear={() => setQuery('')}
+              onClear={handleClear}
             />
           ) : (
             <>

redisinsight/ui/src/pages/workbench/components/query/QueryWrapper.spec.tsx

@@ -1,7 +1,13 @@
 import { cloneDeep } from 'lodash'
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import {
+  cleanup,
+  fireEvent,
+  mockedStore,
+  render,
+  screen,
+} from 'uiSrc/utils/test-utils'
 import QueryWrapper, { Props } from './QueryWrapper'
 
 const mockedProps = mock<Props>()
@@ -45,4 +51,28 @@ describe('QueryWrapper', () => {
 
     expect(render(<QueryWrapper {...instance(mockedProps)} />)).toBeTruthy()
   })
+
+  it('should call onClear callback when clear button is clicked', () => {
+    const props: Props = {
+      ...instance(mockedProps),
+      queryProps: {
+        useLiteActions: true,
+      },
+      query: 'test query',
+      onClear: jest.fn(),
+    }
+
+    render(<QueryWrapper {...props} />)
+
+    // Ensure we start with the query input populated
+    const queryInput = screen.getByTestId('monaco')
+    expect(queryInput).toHaveValue(props.query)
+
+    // Find the clear button and click it
+    const clearButton = screen.getByTestId('btn-clear')
+    fireEvent.click(clearButton)
+
+    // Verify that the onClear function was called and the query input is cleared
+    expect(props.onClear).toHaveBeenCalled()
+  })
 })

redisinsight/ui/src/pages/workbench/components/query/QueryWrapper.tsx

@@ -28,6 +28,7 @@ export interface Props {
   onSubmit: (value?: string) => void
   onQueryChangeMode: () => void
   onChangeGroupMode: () => void
+  onClear?: () => void
 }
 
 const QueryWrapper = (props: Props) => {
@@ -41,6 +42,7 @@ const QueryWrapper = (props: Props) => {
     onSubmit,
     onQueryChangeMode,
     onChangeGroupMode,
+    onClear,
     queryProps = {},
   } = props
   const { loading: isCommandsLoading } = useSelector(appRedisCommandsSelector)
@@ -84,6 +86,7 @@ const QueryWrapper = (props: Props) => {
       onSubmit={onSubmit}
       onQueryChangeMode={onQueryChangeMode}
       onChangeGroupMode={onChangeGroupMode}
+      onClear={onClear}
       {...queryProps}
     />
   )

redisinsight/ui/src/telemetry/events.ts

@@ -362,7 +362,7 @@ export enum TelemetryEvent {
   SEARCH_RESULTS_EXPANDED = 'SEARCH_RESULTS_EXPANDED',
   SEARCH_CLEAR_RESULT_CLICKED = 'SEARCH_CLEAR_RESULT_CLICKED',
   SEARCH_CLEAR_ALL_RESULTS_CLICKED = 'SEARCH_CLEAR_ALL_RESULTS_CLICKED',
-  // SEARCH_CLEAR_EDITOR_CLICKED = 'SEARCH_CLEAR_EDITOR_CLICKED',
+  SEARCH_CLEAR_EDITOR_CLICKED = 'SEARCH_CLEAR_EDITOR_CLICKED',
   // SEARCH_MANAGE_INDEXES_DRAWER_OPENED = 'SEARCH_MANAGE_INDEXES_DRAWER_OPENED',
   // SEARCH_MANAGE_INDEXES_DRAWER_CLOSED = 'SEARCH_MANAGE_INDEXES_DRAWER_CLOSED',
   // SEARCH_MANAGE_INDEX_DETAILS_OPENED = 'SEARCH_MANAGE_INDEX_DETAILS_OPENED',