Merge pull request #1633 from RedisInsight/fe/feature/RI-4021_Telemetry

#RI-4021 - Update telemetry WORKBENCH_COMMAND_COPY event

Author: vlad-dargel

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.spec.tsx

@@ -2,6 +2,8 @@ import { cloneDeep } from 'lodash'
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { cleanup, mockedStore, render, fireEvent, act, screen, waitForEuiToolTipVisible } from 'uiSrc/utils/test-utils'
+import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
+import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
 import QueryCardHeader, { Props } from './QueryCardHeader'
 
 const mockedProps = mock<Props>()
@@ -28,6 +30,11 @@ jest.mock('uiSrc/slices/app/plugins', () => ({
   }),
 }))
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
 describe('QueryCardHeader', () => {
   it('should render', () => {
     // connectedInstanceSelector.mockImplementation(() => ({
@@ -57,4 +64,25 @@ describe('QueryCardHeader', () => {
 
     expect(screen.getByTestId('copy-command')).toBeDisabled()
   })
+
+  it('should render disabled copy button', async () => {
+    const command = 'info'
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+    render(<QueryCardHeader {...instance(mockedProps)} query={command} />)
+
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('copy-command'))
+    })
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.WORKBENCH_COMMAND_COPIED,
+      eventData: {
+        command,
+        databaseId: INSTANCE_ID_MOCK,
+      }
+    });
+
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
 })

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

@@ -129,8 +129,6 @@ const QueryCardHeader = (props: Props) => {
       eventData: {
         databaseId: instanceId,
         command: getCommandNameFromQuery(query, COMMANDS_SPEC),
-        rawMode: isRawMode(activeMode),
-        group: isGroupMode(activeResultsMode),
         ...additionalData
       }
     })
@@ -139,7 +137,7 @@ const QueryCardHeader = (props: Props) => {
   const handleCopy = (event: React.MouseEvent, query: string) => {
     sendEvent(TelemetryEvent.WORKBENCH_COMMAND_COPIED, query)
     eventStop(event)
-    navigator.clipboard.writeText(query)
+    navigator.clipboard?.writeText?.(query)
   }
 
   const onDropDownViewClick = (event: React.MouseEvent) => {
@@ -156,6 +154,8 @@ const QueryCardHeader = (props: Props) => {
       TelemetryEvent.WORKBENCH_RESULT_VIEW_CHANGED,
       query,
       {
+        rawMode: isRawMode(activeMode),
+        group: isGroupMode(activeResultsMode),
         previousView: previousView.name,
         isPreviousViewInternal: !!previousView?.internal,
         currentView: currentView.name,