Merge pull request #2571 from RedisInsight/fe/feature/RI-4938-send_utm_parameters

#RI-4938 send utm parameters to api with /me endpoint

Author: arthosofteq

redisinsight/ui/src/slices/interfaces/cloud.ts

@@ -73,3 +73,13 @@ export enum OAuthSocialSource {
   TriggersAndFunctions = 'triggers_and_functions',
   'triggers and functions' = 'workbench triggers_and_functions',
 }
+
+export enum CloudSsoUtmCampaign {
+  ListOfDatabases = 'list_of_databases',
+  Workbench = 'redisinsight_workbench',
+  BrowserSearch = 'redisinsight_browser_search',
+  BrowserOverview = 'redisinsight_browser_search',
+  BrowserFilter = 'browser_filter',
+  GuidesAndTutorials = 'redisinsight_doc_guide',
+  Unknown = 'other',
+}

redisinsight/ui/src/slices/oauth/cloud.ts

@@ -32,6 +32,7 @@ import {
 } from '../app/notifications'
 import { checkConnectToInstanceAction, setConnectedInstanceId } from '../instances/instances'
 import { setAppContextInitialState } from '../app/context'
+import { getCloudSsoUtmParams } from 'uiSrc/utils/oauth/cloudSsoUtm';
 
 export const initialState: StateAppOAuth = {
   loading: false,
@@ -264,11 +265,16 @@ export function createFreeDbSuccess(id: string, history: any) {
 
 // Asynchronous thunk action
 export function fetchUserInfo(onSuccessAction?: (isMultiAccount: boolean) => void, onFailAction?: () => void) {
-  return async (dispatch: AppDispatch) => {
+  return async (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch(getUserInfo())
 
     try {
-      const { data, status } = await apiService.get<CloudUser>(ApiEndpoints.CLOUD_ME)
+      const { data, status } = await apiService.get<CloudUser>(
+        ApiEndpoints.CLOUD_ME,
+        {
+          params: getCloudSsoUtmParams(getState().oauth?.cloud?.source),
+        },
+      )
 
       if (isStatusSuccessful(status)) {
         const isMultiAccount = (data?.accounts?.length ?? 0) > 1

redisinsight/ui/src/utils/oauth/cloudSsoUtm.tsx

@@ -0,0 +1,34 @@
+import { CloudSsoUtmCampaign, OAuthSocialSource } from 'uiSrc/slices/interfaces'
+
+// Map oauth social source to utm campaign parameter
+export const getCloudSsoUtmCampaign = (source?: string | null): CloudSsoUtmCampaign => {
+  switch (source) {
+    case OAuthSocialSource.ListOfDatabases:
+      return CloudSsoUtmCampaign.ListOfDatabases
+    case OAuthSocialSource.BrowserSearch:
+      return CloudSsoUtmCampaign.BrowserSearch
+    case OAuthSocialSource.RediSearch:
+    case OAuthSocialSource.RedisJSON:
+    case OAuthSocialSource.RedisTimeSeries:
+    case OAuthSocialSource.RedisGraph:
+    case OAuthSocialSource.RedisBloom:
+    case OAuthSocialSource['triggers and functions']:
+      return CloudSsoUtmCampaign.Workbench
+    case OAuthSocialSource.BrowserContentMenu:
+      return CloudSsoUtmCampaign.BrowserOverview
+    case OAuthSocialSource.BrowserFiltering:
+      return CloudSsoUtmCampaign.BrowserFilter
+    // todo: not implemented yet
+    // case OAuthSocialSource.Guides:
+    //   return CloudSsoUtmCampaign.GuidesAndTutorials
+    default:
+      return CloudSsoUtmCampaign.Unknown
+  }
+}
+
+// Create search query utm parameters
+export const getCloudSsoUtmParams = (source?: string | null): URLSearchParams => new URLSearchParams([
+  ['source', 'redisinsight'],
+  ['medium', 'app'], // todo: distinguish between electron and web?
+  ['campaign', getCloudSsoUtmCampaign(source)],
+])

redisinsight/ui/src/utils/tests/oauth/cloudSsoUtm.spec.tsx

@@ -0,0 +1,30 @@
+import { getCloudSsoUtmParams } from 'uiSrc/utils/oauth/cloudSsoUtm'
+import { CloudSsoUtmCampaign, OAuthSocialSource } from 'uiSrc/slices/interfaces'
+
+const getCloudSsoUtmCampaignTestCases = [
+  [OAuthSocialSource.ListOfDatabases, CloudSsoUtmCampaign.ListOfDatabases],
+  [OAuthSocialSource.BrowserSearch, CloudSsoUtmCampaign.BrowserSearch],
+  [OAuthSocialSource.RediSearch, CloudSsoUtmCampaign.Workbench],
+  [OAuthSocialSource.RedisJSON, CloudSsoUtmCampaign.Workbench],
+  [OAuthSocialSource.RedisTimeSeries, CloudSsoUtmCampaign.Workbench],
+  [OAuthSocialSource.RedisGraph, CloudSsoUtmCampaign.Workbench],
+  [OAuthSocialSource.RedisBloom, CloudSsoUtmCampaign.Workbench],
+  [OAuthSocialSource['triggers and functions'], CloudSsoUtmCampaign.Workbench],
+  [OAuthSocialSource.BrowserContentMenu, CloudSsoUtmCampaign.BrowserOverview],
+  [OAuthSocialSource.BrowserFiltering, CloudSsoUtmCampaign.BrowserFilter],
+  [null, CloudSsoUtmCampaign.Unknown],
+  [undefined, CloudSsoUtmCampaign.Unknown],
+]
+
+describe('getCloudSsoUtmCampaign', () => {
+  test.each(getCloudSsoUtmCampaignTestCases)(
+    '%j',
+    (input, expected) => {
+      expect(getCloudSsoUtmParams(input)).toEqual(new URLSearchParams([
+        ['source', 'redisinsight'],
+        ['medium', 'app'],
+        ['campaign', expected],
+      ]))
+    }
+  )
+})