#RI-6331 - add telemetry event

Author: rsergeenko

redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.spec.tsx

@@ -5,8 +5,16 @@ import { cleanup, mockedStore, render, fireEvent } from 'uiSrc/utils/test-utils'
 import { setSSOFlow } from 'uiSrc/slices/instances/cloud'
 import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import { setSocialDialogState } from 'uiSrc/slices/oauth/cloud'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
+import { sendEventTelemetry } from 'uiSrc/telemetry'
+import { HELP_LINKS } from 'uiSrc/pages/home/constants'
 import CreateCloud from './CreateCloud'
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
 jest.mock('uiSrc/slices/app/features', () => ({
   ...jest.requireActual('uiSrc/slices/app/features'),
   appFeatureFlagsFeaturesSelector: jest.fn().mockReturnValue({
@@ -39,4 +47,25 @@ describe('CreateCloud', () => {
       setSocialDialogState(OAuthSocialSource.NavigationMenu)
     ])
   })
+
+  it('should call proper telemetry when sso is disabled', () => {
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock);
+    (appFeatureFlagsFeaturesSelector as jest.Mock).mockReturnValueOnce({
+      cloudSso: {
+        flag: false
+      }
+    })
+    const { container } = render(<CreateCloud />)
+    const createCloudLink = container.querySelector('[data-test-subj="create-cloud-nav-link"]')
+
+    fireEvent.click(createCloudLink as Element)
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: HELP_LINKS.cloud.event,
+      eventData: {
+        source: OAuthSocialSource.NavigationMenu
+      }
+    })
+  })
 })

redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.tsx

@@ -8,37 +8,53 @@ import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react'
 
 import { getUtmExternalLink } from 'uiSrc/utils/links'
+import { sendEventTelemetry } from 'uiSrc/telemetry'
+import { HELP_LINKS } from 'uiSrc/pages/home/constants'
 import styles from '../../styles.module.scss'
 
-const CreateCloud = () => (
-  <EuiToolTip
-    content="Create FREE Redis Cloud database"
-    position="right"
-  >
-    <span className={cx(styles.iconNavItem)}>
-      <OAuthSsoHandlerDialog>
-        {(ssoCloudHandlerClick) => (
-          <EuiLink
-            external={false}
-            onClick={(e) => {
-              ssoCloudHandlerClick(e,
-                { source: OAuthSocialSource.NavigationMenu, action: OAuthSocialAction.Create })
-            }}
-            className={styles.cloudLink}
-            href={getUtmExternalLink(EXTERNAL_LINKS.tryFree, { campaign: 'navigation_menu' })}
-            target="_blank"
-            data-test-subj="create-cloud-nav-link"
-          >
-            <EuiIcon
-              className={styles.cloudIcon}
-              type={CloudIcon}
-              data-testid="cloud-db-icon"
-            />
-          </EuiLink>
-        )}
-      </OAuthSsoHandlerDialog>
-    </span>
-  </EuiToolTip>
-)
+const CreateCloud = () => {
+  const onCLickLink = (isSSOEnabled: boolean) => {
+    if (isSSOEnabled) return
+
+    sendEventTelemetry({
+      event: HELP_LINKS.cloud.event,
+      eventData: {
+        source: OAuthSocialSource.NavigationMenu
+      }
+    })
+  }
+
+  return (
+    <EuiToolTip
+      content="Create FREE Redis Cloud database"
+      position="right"
+    >
+      <span className={cx(styles.iconNavItem)}>
+        <OAuthSsoHandlerDialog>
+          {(ssoCloudHandlerClick, isSSOEnabled) => (
+            <EuiLink
+              external={false}
+              onClick={(e) => {
+                onCLickLink(isSSOEnabled)
+                ssoCloudHandlerClick(e,
+                  { source: OAuthSocialSource.NavigationMenu, action: OAuthSocialAction.Create })
+              }}
+              className={styles.cloudLink}
+              href={getUtmExternalLink(EXTERNAL_LINKS.tryFree, { campaign: 'navigation_menu' })}
+              target="_blank"
+              data-test-subj="create-cloud-nav-link"
+            >
+              <EuiIcon
+                className={styles.cloudIcon}
+                type={CloudIcon}
+                data-testid="cloud-db-icon"
+              />
+            </EuiLink>
+          )}
+        </OAuthSsoHandlerDialog>
+      </span>
+    </EuiToolTip>
+  )
+}
 
 export default CreateCloud