#RI-6294 - fix key view event

Author: rsergeenko

redisinsight/ui/src/pages/browser/modules/key-details/KeyDetails.spec.tsx

@@ -1,11 +1,20 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { cloneDeep } from 'lodash'
-import { cleanup, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
+import { cleanup, mockedStore, render, screen, act } from 'uiSrc/utils/test-utils'
 
 import { defaultSelectedKeyAction, setSelectedKeyRefreshDisabled } from 'uiSrc/slices/browser/keys'
+import { stringToBuffer } from 'uiSrc/utils'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { apiService } from 'uiSrc/services'
+import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
 import KeyDetails, { Props as KeyDetailsProps } from './KeyDetails'
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
 const mockedProps = mock<KeyDetailsProps>()
 
 let store: typeof mockedStore
@@ -47,4 +56,23 @@ describe('KeyDetails', () => {
 
     expect(screen.getByTestId('select-key-message')).toBeInTheDocument()
   })
+
+  it('should call proper telemetry after open key details', async () => {
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+    apiService.post = jest.fn().mockResolvedValueOnce({ status: 200, data: { length: 1, type: 'hash' } })
+
+    await act(async () => {
+      render(<KeyDetails {...instance(mockedProps)} keyProp={stringToBuffer('key')} />)
+    })
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.BROWSER_KEY_VALUE_VIEWED,
+      eventData: {
+        databaseId: INSTANCE_ID_MOCK,
+        length: 1,
+        keyType: 'hash'
+      }
+    })
+  })
 })

redisinsight/ui/src/pages/browser/modules/key-details/KeyDetails.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { isNull, isUndefined } from 'lodash'
+import { isNull } from 'lodash'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import cx from 'classnames'
@@ -45,33 +45,34 @@ const KeyDetails = (props: Props) => {
   const { viewType } = useSelector(keysSelector)
   const { loading, error = '', data } = useSelector(selectedKeySelector)
   const isKeySelected = !isNull(useSelector(selectedKeyDataSelector))
-  const { type: keyType, length: keyLength } = useSelector(selectedKeyDataSelector) ?? {
-    type: KeyTypes.String,
-  }
+  const { type: keyType } = useSelector(selectedKeyDataSelector) ?? { type: KeyTypes.String }
 
   const dispatch = useDispatch()
 
   useEffect(() => {
-    if (keyProp === null) {
-      return
-    }
-    if (keyProp?.data) {
-      sendEventTelemetry({
-        event: getBasedOnViewTypeEvent(
-          viewType,
-          TelemetryEvent.BROWSER_KEY_VALUE_VIEWED,
-          TelemetryEvent.TREE_VIEW_KEY_VALUE_VIEWED
-        ),
-        eventData: {
-          keyType,
-          databaseId: instanceId,
-          length: keyLength,
-        }
-      })
-    }
-    // Restore key details from context in future
-    // (selectedKey.data?.name !== keyProp)
-    dispatch(fetchKeyInfo(keyProp))
+    if (keyProp === null) return
+
+    dispatch(fetchKeyInfo(
+      keyProp,
+      undefined,
+      (data) => {
+        if (!data) return
+
+        sendEventTelemetry({
+          event: getBasedOnViewTypeEvent(
+            viewType,
+            TelemetryEvent.BROWSER_KEY_VALUE_VIEWED,
+            TelemetryEvent.TREE_VIEW_KEY_VALUE_VIEWED
+          ),
+          eventData: {
+            keyType: data.type,
+            databaseId: instanceId,
+            length: data.length,
+          }
+        })
+      }
+    ))
+
     dispatch(setSelectedKeyRefreshDisabled(false))
   }, [keyProp])
 

redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx

@@ -68,7 +68,7 @@ const HashDetails = (props: Props) => {
             className={styles.showTtlCheckbox}
             checked={showTtl}
             onChange={(e) => handleSelectShow(e.target.checked)}
-            data-testId="test-check-ttl"
+            data-testid="test-check-ttl"
           />
           <Divider
             className={styles.divider}

redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx

@@ -110,7 +110,7 @@ const DeployPipelineButton = ({ loading, disabled }: Props) => {
             className={cx(styles.resetPipelineCheckbox, { [styles.checked]: resetPipeline })}
             checked={resetPipeline}
             onChange={(e) => handleSelectReset(e.target.checked)}
-            data-testId="reset-pipeline-checkbox"
+            data-testid="reset-pipeline-checkbox"
           />
 
           <EuiToolTip

redisinsight/ui/src/slices/browser/keys.ts

@@ -519,7 +519,7 @@ export function fetchPatternKeysAction(
       sourceKeysFetch = CancelToken.source()
 
       const state = stateInit()
-      const scanThreshold  = state.user.settings.config?.scanThreshold || SCAN_COUNT_DEFAULT;
+      const scanThreshold = state.user.settings.config?.scanThreshold || SCAN_COUNT_DEFAULT
       const { search: match, filter: type } = state.browser.keys
       const { encoding } = state.app.info
 
@@ -594,7 +594,7 @@ export function fetchMorePatternKeysAction(oldKeys: IKeyPropTypes[] = [], cursor
       sourceKeysFetch = CancelToken.source()
 
       const state = stateInit()
-      const scanThreshold = state.user.settings.config?.scanThreshold ?? SCAN_COUNT_DEFAULT;
+      const scanThreshold = state.user.settings.config?.scanThreshold ?? SCAN_COUNT_DEFAULT
       const { search: match, filter: type } = state.browser.keys
       const { encoding } = state.app.info
       const { data, status } = await apiService.post(
@@ -643,7 +643,11 @@ export function fetchMorePatternKeysAction(oldKeys: IKeyPropTypes[] = [], cursor
 }
 
 // Asynchronous thunk action
-export function fetchKeyInfo(key: RedisResponseBuffer, resetData?: boolean) {
+export function fetchKeyInfo(
+  key: RedisResponseBuffer,
+  resetData?: boolean,
+  onSuccess?: (data: Nullable<IKeyPropTypes>) => void
+) {
   return async (dispatch: AppDispatch, stateInit: () => RootState) => {
     dispatch(defaultSelectedKeyAction())
 
@@ -662,6 +666,7 @@ export function fetchKeyInfo(key: RedisResponseBuffer, resetData?: boolean) {
       if (isStatusSuccessful(status)) {
         dispatch(loadKeyInfoSuccess(data))
         dispatch(updateSelectedKeyRefreshTime(Date.now()))
+        onSuccess?.(data)
       }
 
       if (data.type === KeyTypes.Hash) {