Merge pull request #3786 from RedisInsight/fe/bugfix/RI-6078-fix-event-telemetry-on-datetime-format-change

RI-6078 fixed event telemetry on datetime change

Author: mariasergeenko

redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/components/datetime-form/DatetimeForm.spec.tsx

@@ -47,7 +47,7 @@ describe('DatetimeForm', () => {
     expect(onFormatChange).toBeCalledWith('Invalid Format')
   })
 
-  it('should call proper telemetry events', async () => {
+  it('should call proper telemetry events when custom format is saved', async () => {
     const sendEventTelemetryMock = jest.fn()
     sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
 
@@ -66,4 +66,37 @@ describe('DatetimeForm', () => {
       }
     })
   })
+
+  it('should call proper telemetry events when radio option is changed to common', async () => {
+    const sendEventTelemetryMock = jest.fn()
+    sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+
+    render(<DatetimeForm {...instance(mockedProps)} />)
+
+    await act(() => fireEvent.click(screen.getByText('Custom')))
+    await act(() => fireEvent.click(screen.getByText('Pre-selected formats')))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.SETTINGS_DATE_TIME_FORMAT_CHANGED,
+      eventData: {
+        currentFormat: dateTimeOptions[0].value
+      }
+    })
+  })
+
+  it('should call sendEventTelemetry when common formats is changed', async () => {
+    const sendEventTelemetryMock = jest.fn()
+    sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
+
+    render(<DatetimeForm {...instance(mockedProps)} />)
+
+    fireEvent.click(screen.getByTestId('select-datetime-testid'))
+    await act(() => fireEvent.click(screen.queryByText(dateTimeOptions[1].value) || document))
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.SETTINGS_DATE_TIME_FORMAT_CHANGED,
+      eventData: {
+        currentFormat: dateTimeOptions[1].value
+      }
+    })
+  })
 })

redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/components/datetime-form/DatetimeForm.tsx

@@ -103,6 +103,12 @@ const DatetimeForm = ({ onFormatChange }: Props) => {
       formik.setFieldValue('customFormat', formik.values.format)
     } else {
       formik.setFieldValue('format', formik.values.commonFormat)
+      sendEventTelemetry({
+        event: TelemetryEvent.SETTINGS_DATE_TIME_FORMAT_CHANGED,
+        eventData: {
+          currentFormat: formik.values.commonFormat,
+        }
+      })
       formik.handleSubmit()
     }
   }
@@ -154,6 +160,7 @@ const DatetimeForm = ({ onFormatChange }: Props) => {
             onChange={(option) => onCommonFormatChange(option)}
             disabled={formik.values.selectedRadioOption !== DatetimeRadioOption.Common}
             data-test-subj="select-datetime"
+            data-testid="select-datetime-testid"
           />
         </div>
       ),