RI-5905 enable telemetry for cloud auth users

Author: kchepikava

redisinsight/ui/src/components/config/Config.tsx

@@ -80,7 +80,7 @@ const Config = () => {
     if (cloudSsoFeature?.flag) {
       dispatch(fetchProfile())
     }
-  }, [cloudSsoFeature])
+  }, [cloudSsoFeature?.flag])
 
   useEffect(() => {
     featuresHighlight()

redisinsight/ui/src/components/oauth/shared/oauth-agreement/OAuthAgreement.spec.tsx

@@ -10,8 +10,9 @@ import {
   screen,
 } from 'uiSrc/utils/test-utils'
 import { localStorageService } from 'uiSrc/services'
-import { setAgreement } from 'uiSrc/slices/oauth/cloud'
+import { oauthCloudPAgreementSelector, setAgreement } from 'uiSrc/slices/oauth/cloud'
 import { BrowserStorageItem } from 'uiSrc/constants'
+import { updateUserConfigSettings } from 'uiSrc/slices/user/user-settings'
 import OAuthAgreement from './OAuthAgreement'
 
 let store: typeof mockedStore
@@ -33,6 +34,17 @@ jest.mock('uiSrc/services', () => ({
   },
 }))
 
+jest.mock('uiSrc/slices/user/user-settings', () => ({
+  ...jest.requireActual('uiSrc/slices/user/user-settings'),
+  userSettingsConfigSelector: jest.fn().mockReturnValue({
+    agreements: {
+      eula: true,
+      version: '1.0.1',
+      analytics: false,
+    },
+  })
+}))
+
 describe('OAuthAgreement', () => {
   it('should render', () => {
     expect(render(<OAuthAgreement />)).toBeTruthy()
@@ -59,4 +71,19 @@ describe('OAuthAgreement', () => {
       false,
     )
   })
+
+  it('should update settings when checkbox checked if analytics is set to false', () => {
+    (oauthCloudPAgreementSelector as jest.Mock).mockReturnValueOnce(false)
+
+    render(<OAuthAgreement />)
+
+    const el = screen.getByTestId('oauth-agreement-checkbox') as HTMLInputElement
+    expect(el.checked).toBe(false)
+    fireEvent.click(el)
+
+    const expectedActions = [{}].fill(updateUserConfigSettings(), 0)
+    expect(clearStoreActions(store.getActions().slice(0, expectedActions.length))).toEqual(
+      clearStoreActions(expectedActions)
+    )
+  })
 })

redisinsight/ui/src/components/oauth/shared/oauth-agreement/OAuthAgreement.tsx

@@ -7,6 +7,7 @@ import { localStorageService } from 'uiSrc/services'
 import { BrowserStorageItem } from 'uiSrc/constants'
 import { setAgreement, oauthCloudPAgreementSelector } from 'uiSrc/slices/oauth/cloud'
 
+import { updateUserConfigSettingsAction, userSettingsConfigSelector } from 'uiSrc/slices/user/user-settings'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -16,10 +17,14 @@ export interface Props {
 const OAuthAgreement = (props: Props) => {
   const { size = 'm' } = props
   const agreement = useSelector(oauthCloudPAgreementSelector)
+  const config = useSelector(userSettingsConfigSelector)
 
   const dispatch = useDispatch()
 
   const handleCheck = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.checked && !config?.agreements?.analytics) {
+      dispatch(updateUserConfigSettingsAction({ agreements: { ...config?.agreements, analytics: true } }))
+    }
     dispatch(setAgreement(e.target.checked))
     localStorageService.set(BrowserStorageItem.OAuthAgreement, e.target.checked)
   }
@@ -63,6 +68,9 @@ const OAuthAgreement = (props: Props) => {
         <li className={styles.listItem}>
           that Redis Insight will generate Redis Cloud API account and user keys, and store them locally on your machine
         </li>
+        <li className={styles.listItem}>
+          Analytics will be enabled to aggregate anonymized user data to improve user experience. You can disable it anytime on the Settings page.
+        </li>
       </ul>
     </div>
   )

redisinsight/ui/src/components/oauth/shared/oauth-form/OAuthForm.spec.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { cloneDeep } from 'lodash'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { render, cleanup, mockedStore, fireEvent, screen, act, waitFor } from 'uiSrc/utils/test-utils'
+import { render, cleanup, clearStoreActions, mockedStore, fireEvent, screen, act, waitFor } from 'uiSrc/utils/test-utils'
 import { OAuthStrategy } from 'uiSrc/slices/interfaces'
 import { MOCK_OAUTH_SSO_EMAIL } from 'uiSrc/mocks/data/oauth'
+import { updateUserConfigSettings, userSettingsConfigSelector } from 'uiSrc/slices/user/user-settings'
 import OAuthForm from './OAuthForm'
 
 jest.mock('uiSrc/telemetry', () => ({
@@ -19,6 +20,17 @@ jest.mock('uiSrc/slices/oauth/cloud', () => ({
   oauthCloudPAgreementSelector: jest.fn().mockReturnValue(true),
 }))
 
+jest.mock('uiSrc/slices/user/user-settings', () => ({
+  ...jest.requireActual('uiSrc/slices/user/user-settings'),
+  userSettingsConfigSelector: jest.fn().mockReturnValue({
+    agreements: {
+      eula: true,
+      version: '1.0.1',
+      analytics: true,
+    },
+  })
+}))
+
 const onClick = jest.fn()
 
 let store: typeof mockedStore
@@ -117,4 +129,23 @@ describe('OAuthForm', () => {
       fireEvent.click(screen.getByTestId('btn-submit'))
     })
   })
+
+  it('should updaten analytics if analytics is set to false', () => {
+    (userSettingsConfigSelector as jest.Mock).mockReturnValueOnce({
+      agreements: {
+        eula: true,
+        version: '1.0.1',
+        analytics: false,
+      },
+    })
+
+    render(<OAuthForm>{(children) => (<>{children}</>)}</OAuthForm>)
+
+    fireEvent.click(screen.getByTestId('google-oauth'))
+
+    const expectedActions = [{}].fill(updateUserConfigSettings(), 0)
+    expect(clearStoreActions(store.getActions().slice(0, expectedActions.length))).toEqual(
+      clearStoreActions(expectedActions)
+    )
+  })
 })

redisinsight/ui/src/components/oauth/shared/oauth-form/OAuthForm.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { signIn } from 'uiSrc/slices/oauth/cloud'
 import { OAuthSocialAction, OAuthStrategy } from 'uiSrc/slices/interfaces'
 import { ipcAuth } from 'uiSrc/electron/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { updateUserConfigSettingsAction, userSettingsConfigSelector } from 'uiSrc/slices/user/user-settings'
 import OAuthSsoForm from './components/oauth-sso-form'
 import OAuthSocialButtons from '../oauth-social-buttons'
 import { Props as OAuthSocialButtonsProps } from '../oauth-social-buttons/OAuthSocialButtons'
@@ -24,13 +25,17 @@ const OAuthForm = ({
   const dispatch = useDispatch()
 
   const [authStrategy, setAuthStrategy] = useState('')
+  const config = useSelector(userSettingsConfigSelector)
 
   const initOAuthProcess = (strategy: OAuthStrategy, action: string, data?: {}) => {
     dispatch(signIn())
     ipcAuth(strategy, action, data)
   }
 
   const onSocialButtonClick = (authStrategy: OAuthStrategy) => {
+    if (!config?.agreements?.analytics) {
+      dispatch(updateUserConfigSettingsAction({ agreements: { ...config?.agreements, analytics: true } }))
+    }
     setAuthStrategy(authStrategy)
     onClick?.(authStrategy)