Merge pull request #2623 from RedisInsight/fe/feature/RI-4633_RI-4940

#RI-4633, #RI-4940 - add telemetry events

Author: mariasergeenko

redisinsight/ui/src/components/database-overview/components/MoreInfoPopover/MoreInfoPopover.spec.tsx

@@ -1,7 +1,13 @@
 import React from 'react'
-import { fireEvent, render } from 'uiSrc/utils/test-utils'
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import MoreInfoPopover from './MoreInfoPopover'
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
 describe('MoreInfoPopover', () => {
   it('should render', () => {
     expect(render(<MoreInfoPopover metrics={[]} modules={[]} />)).toBeTruthy()
@@ -27,4 +33,23 @@ describe('MoreInfoPopover', () => {
 
     expect(queryByTestId('overview-more-info-tooltip')).toBeInTheDocument()
   })
+
+  it('should call proper telemetry event after click on 3 dots', () => {
+    const sendEventTelemetryMock = jest.fn()
+
+    sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+
+    render(<MoreInfoPopover metrics={[]} modules={[]} />)
+
+    fireEvent.click(screen.getByTestId('overview-more-info-button'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.OVERVIEW_MENU_CLICKED,
+      eventData: {
+        databaseId: 'instanceId'
+      }
+    })
+
+    sendEventTelemetry.mockRestore()
+  })
 })

redisinsight/ui/src/components/database-overview/components/MoreInfoPopover/MoreInfoPopover.tsx

@@ -2,9 +2,11 @@ import React, { useState } from 'react'
 import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiLoadingSpinner, EuiPopover } from '@elastic/eui'
 import cx from 'classnames'
 
+import { useParams } from 'react-router-dom'
 import { DATABASE_LIST_MODULES_TEXT, OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import { getModule, truncateText } from 'uiSrc/utils'
 import { OAuthSsoHandlerDialog } from 'uiSrc/components'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 
 import { IMetric } from '../OverviewMetrics'
@@ -19,11 +21,22 @@ export interface IProps {
 
 const MoreInfoPopover = ({ metrics, modules }: IProps) => {
   const [isShowMoreInfoPopover, setIsShowMoreInfoPopover] = useState(false)
+  const { instanceId = '' } = useParams<{ instanceId: string }>()
 
   const onFreeDatabaseClick = () => {
     setIsShowMoreInfoPopover(false)
   }
 
+  const handleClickMoreInfo = () => {
+    setIsShowMoreInfoPopover((isOpenPopover) => !isOpenPopover)
+    sendEventTelemetry({
+      event: TelemetryEvent.OVERVIEW_MENU_CLICKED,
+      eventData: {
+        databaseId: instanceId
+      }
+    })
+  }
+
   return (
     <EuiPopover
       ownFocus={false}
@@ -35,7 +48,7 @@ const MoreInfoPopover = ({ metrics, modules }: IProps) => {
       button={(
         <EuiButtonIcon
           iconType="boxesVertical"
-          onClick={() => setIsShowMoreInfoPopover((isOpenPopover) => !isOpenPopover)}
+          onClick={handleClickMoreInfo}
           aria-labelledby="more info"
           data-testid="overview-more-info-button"
         />

redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx

@@ -158,14 +158,13 @@ const KeysHeader = (props: Props) => {
   }
 
   const handleSwitchView = (type: KeyViewType) => {
-    if (type === KeyViewType.Tree) {
-      sendEventTelemetry({
-        event: TelemetryEvent.TREE_VIEW_OPENED,
-        eventData: {
-          databaseId: instanceId
-        }
-      })
-    }
+    sendEventTelemetry({
+      event: type === KeyViewType.Tree ? TelemetryEvent.TREE_VIEW_OPENED : TelemetryEvent.LIST_VIEW_OPENED,
+      eventData: {
+        databaseId: instanceId
+      }
+    })
+
     dispatch(resetBrowserTree())
     dispatch(resetKeysData(searchMode))
     localStorageService.set(BrowserStorageItem.browserViewType, type)

redisinsight/ui/src/telemetry/events.ts

@@ -76,6 +76,8 @@ export enum TelemetryEvent {
   BROWSER_DATABASE_INDEX_CHANGED = 'BROWSER_DATABASE_INDEX_CHANGED',
   BROWSER_FILTER_MODE_CHANGE_FAILED = 'BROWSER_FILTER_MODE_CHANGE_FAILED',
   BROWSER_TUTORIAL_CLICKED = 'BROWSER_TUTORIAL_CLICKED',
+  LIST_VIEW_OPENED = 'LIST_VIEW_OPENED',
+  OVERVIEW_MENU_CLICKED = 'OVERVIEW_MENU_CLICKED',
 
   CLI_OPENED = 'CLI_OPENED',
   CLI_CLOSED = 'CLI_CLOSED',