chore: GA events added

Author: shivani170

src/components/AppSelector/AppSelector.tsx

@@ -15,11 +15,11 @@
  */
 
 import { useRef, useState } from 'react'
-import ReactGA from 'react-ga4'
 import { ActionMeta } from 'react-select'
 
 import {
     ContextSwitcher,
+    handleAnalyticsEvent,
     RecentlyVisitedOptions,
     ResourceKindType,
     SelectPickerOptionType,
@@ -29,8 +29,7 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { AppSelectorType } from './AppSelector.types'
-import { appListOptions } from './AppSelectorUtil'
-import { APP_DETAILS_GA_EVENTS } from './constants'
+import { appListOptions, getAppSelectGAEvent } from './AppSelectorUtil'
 
 const AppSelector = ({ onChange, appId, appName, isJobView }: AppSelectorType) => {
     const abortControllerRef = useRef<AbortController>(new AbortController())
@@ -72,13 +71,10 @@ const AppSelector = ({ onChange, appId, appName, isJobView }: AppSelectorType) =
 
         onChange(selectedOption, actionMeta)
 
-        if (!isJobView) {
-            ReactGA.event(
-                selectedOption.isRecentlyVisited
-                    ? APP_DETAILS_GA_EVENTS.RecentlyVisitedApps
-                    : APP_DETAILS_GA_EVENTS.SearchesAppClicked,
-            )
-        }
+        handleAnalyticsEvent({
+            category: isJobView ? 'Job Selector' : 'App Selector',
+            action: getAppSelectGAEvent(selectedOption, isJobView),
+        })
     }
 
     return (

src/components/AppSelector/AppSelectorUtil.tsx

@@ -25,7 +25,7 @@ import {
 
 import { getAppListMin } from '../../services/service'
 import { AppListOptionsTypes } from './AppSelector.types'
-import { getMinCharSearchPlaceholderGroup } from './constants'
+import { appSelectorGAEvents, getMinCharSearchPlaceholderGroup } from './constants'
 
 let timeoutId
 
@@ -87,3 +87,16 @@ export const appListOptions = ({
         }, 300)
     })
 }
+
+export const getAppSelectGAEvent = (selectedOption: RecentlyVisitedOptions, isJobView) => {
+    if (isJobView) {
+        if (selectedOption.isRecentlyVisited) {
+            return appSelectorGAEvents.JOB_SWITCH_RECENTLY_VISITED_CLICKED
+        }
+        return appSelectorGAEvents.JOB_SWITCH_SEARCHED_ITEM_CLICKED
+    }
+    if (selectedOption.isRecentlyVisited) {
+        return appSelectorGAEvents.DA_SWITCH_RECENTLY_VISITED_CLICKED
+    }
+    return appSelectorGAEvents.DA_SWITCH_SEARCHED_APP_CLICKED
+}

src/components/AppSelector/ChartSelector.tsx

@@ -21,9 +21,11 @@ import {
     SelectPickerOptionType,
     ContextSwitcher,
     Icon,
+    handleAnalyticsEvent,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { mapByKey } from '../common'
 import { ChartSelectorType } from './AppSelector.types'
+import { appSelectorGAEvents } from './constants'
 
 export default function ChartSelector({
     primaryKey,
@@ -46,6 +48,10 @@ export default function ChartSelector({
             onChange(selected)
             return
         }
+        handleAnalyticsEvent({
+            category: 'Chart Store',
+            action: appSelectorGAEvents.CS_CHART_DETAIL_SWITCH_ITEM_CLICKED,
+        })
         const keys = listMap.get(selected.value)
         const replacements = [...matchedKeys].reduce((agg, curr) => ({ ...agg, [curr]: keys[curr] }), {})
         const newUrl = generatePath(path, { ...replacements, [primaryKey]: selected.value })

src/components/AppSelector/constants.ts

@@ -5,13 +5,10 @@ export const getMinCharSearchPlaceholderGroup = (resourceKind): RecentlyVisitedG
     options: [{ value: 0, label: 'Type 3 characters to search', isDisabled: true }],
 })
 
-export const APP_DETAILS_GA_EVENTS = {
-    RecentlyVisitedApps: {
-        category: 'App Selector',
-        action: 'DA_SWITCH_RECENTLY_VISITED_CLICKED',
-    },
-    SearchesAppClicked: {
-        category: 'App Selector',
-        action: 'DA_SWITCH_SEARCHED_APP_CLICKED',
-    },
+export const appSelectorGAEvents = {
+    DA_SWITCH_RECENTLY_VISITED_CLICKED: 'DA_SWITCH_RECENTLY_VISITED_CLICKED',
+    DA_SWITCH_SEARCHED_APP_CLICKED: 'DA_SWITCH_SEARCHED_APP_CLICKED',
+    JOB_SWITCH_RECENTLY_VISITED_CLICKED: 'JOB_SWITCH_RECENTLY_VISITED_CLICKED',
+    JOB_SWITCH_SEARCHED_ITEM_CLICKED: 'JOB_SWITCH_SEARCHED_ITEM_CLICKED',
+    CS_CHART_DETAIL_SWITCH_ITEM_CLICKED: 'CS_CHART_DETAIL_SWITCH_ITEM_CLICKED',
 }

src/components/ApplicationGroup/Constants.ts

@@ -173,6 +173,14 @@ export const ENV_APP_GROUP_GA_EVENTS = {
         category: 'Configuration',
         action: 'Configuration Clicked',
     },
+    EnvironmentHeaderRecentlyVisitedClicked: {
+        category: 'Environment',
+        action: 'AG_SWITCH_RECENTLY_VISITED_CLICKED',
+    },
+    EnvironmentHeaderSearchedItemClicked: {
+        category: 'Environment',
+        action: 'AG_SWITCH_SEARCHED_ITEM_CLICKED',
+    },
 }
 
 export const GROUP_LIST_HEADER = {

src/components/ApplicationGroup/EnvSelector.tsx

@@ -15,20 +15,19 @@
  */
 
 import { useRef, useState } from 'react'
-import ReactGA from 'react-ga4'
 
 import {
     ContextSwitcher,
+    handleAnalyticsEvent,
     RecentlyVisitedOptions,
     SelectPickerProps,
     useAsync,
     useUserPreferences,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { APP_DETAILS_GA_EVENTS } from '@Components/AppSelector/constants'
-
 import { EnvSelectorType } from './AppGroup.types'
 import { envListOptions } from './AppGroup.utils'
+import { ENV_APP_GROUP_GA_EVENTS } from './Constants'
 
 export const EnvSelector = ({ onChange, envId, envName }: EnvSelectorType) => {
     const abortControllerRef = useRef<AbortController>(new AbortController())
@@ -60,11 +59,12 @@ export const EnvSelector = ({ onChange, envId, envName }: EnvSelectorType) => {
 
         onChange(selectedOption)
 
-        ReactGA.event(
-            selectedOption.isRecentlyVisited
-                ? APP_DETAILS_GA_EVENTS.RecentlyVisitedApps
-                : APP_DETAILS_GA_EVENTS.SearchesAppClicked,
-        )
+        handleAnalyticsEvent({
+            category: 'Environment',
+            action: selectedOption.isRecentlyVisited
+                ? ENV_APP_GROUP_GA_EVENTS.EnvironmentHeaderRecentlyVisitedClicked.action
+                : ENV_APP_GROUP_GA_EVENTS.EnvironmentHeaderSearchedItemClicked.action,
+        })
     }
 
     return (

src/components/ResourceBrowser/Constants.ts

@@ -392,3 +392,8 @@ export const AI_BUTTON_CONFIG_MAP: Record<string, ShowAIButtonConfig> = Object.f
         excludeValues: new Set(['Approved,Issued']),
     },
 })
+
+export const ResourceBrowserGAEvent = {
+    RB_SWITCH_CLUSTER_RECENTLY_VISITED_CLICKED: 'RB_SWITCH_CLUSTER_RECENTLY_VISITED_CLICKED',
+    RB_SWITCH_CLUSTER_SEARCHED_ITEM_CLICKED: 'RB_SWITCH_CLUSTER_SEARCHED_ITEM_CLICKED',
+}

src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx

@@ -21,16 +21,21 @@ import {
     Badge,
     ComponentSizeType,
     ContextSwitcher,
+    handleAnalyticsEvent,
     Icon,
     PopupMenu,
+    RecentlyVisitedOptions,
+    ResourceKindType,
     SelectPickerProps,
+    useUserPreferences,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as MenuDots } from '@Icons/ic-more-vertical.svg'
 import { DEFAULT_CLUSTER_ID } from '@Pages/GlobalConfigurations/ClustersAndEnvironments'
 import DeleteClusterConfirmationModal from '@Pages/GlobalConfigurations/ClustersAndEnvironments/DeleteClusterConfirmationModal'
 
 import { URLS } from '../../../config'
+import { ResourceBrowserGAEvent } from '../Constants'
 import { ClusterSelectorType } from '../Types'
 import { getClusterSelectOptions } from './utils'
 
@@ -50,6 +55,33 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
     const defaultOption = filteredClusterList.find((item) =>
         isInstallationStatusView ? String(item.installationId) === clusterId : String(item.value) === clusterId,
     )
+    const clusterName = defaultOption?.label
+
+    const handleOnChange = (selected: RecentlyVisitedOptions) => {
+        if (selected.value === Number(defaultOption?.value)) {
+            return
+        }
+
+        handleAnalyticsEvent({
+            category: 'Resource Browser',
+            action: selected.isRecentlyVisited
+                ? ResourceBrowserGAEvent.RB_SWITCH_CLUSTER_RECENTLY_VISITED_CLICKED
+                : ResourceBrowserGAEvent.RB_SWITCH_CLUSTER_SEARCHED_ITEM_CLICKED,
+        })
+
+        onChange(selected)
+    }
+
+    const isAppDataAvailable = !!clusterId
+
+    const { recentlyVisitedResources } = useUserPreferences({
+        recentlyVisitedFetchConfig: {
+            id: +clusterId,
+            name: clusterName,
+            resourceKind: ResourceKindType.cluster,
+            isDataAvailable: isAppDataAvailable,
+        },
+    })
 
     const [inputValue, setInputValue] = useState('')
 
@@ -76,9 +108,13 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
             <ContextSwitcher
                 inputId={`cluster-switcher-${clusterId}`}
                 isLoading={isClusterListLoading}
-                onChange={onChange}
+                onChange={handleOnChange}
                 value={defaultOption}
-                options={getClusterSelectOptions(filteredClusterList, isInstallationStatusView)}
+                options={getClusterSelectOptions(
+                    filteredClusterList,
+                    recentlyVisitedResources,
+                    isInstallationStatusView,
+                )}
                 inputValue={inputValue}
                 onInputChange={onInputChange}
             />

src/components/ResourceBrowser/ResourceList/utils.tsx

@@ -15,6 +15,7 @@
  */
 
 import {
+    BaseRecentlyVisitedEntitiesTypes,
     ClusterDetail,
     DocLink,
     DocLinkProps,
@@ -165,12 +166,29 @@ export const getOptionsValue = (option: ClusterOptionType, isInstallationStatusV
     // clusterId as this installationId
     isInstallationStatusView ? `installation-${String(option.installationId)}` : option.value
 
-export const getClusterSelectOptions = (clusterList, isInstallationStatusView): RecentlyVisitedGroupedOptionsType[] => [
-    {
-        label: 'All Clusters',
-        options: clusterList?.map((option) => ({
-            ...option,
-            value: +getOptionsValue(option, isInstallationStatusView),
-        })) as RecentlyVisitedOptions[],
-    },
-]
+const getAllCluster = ({ clusterList, isInstallationStatusView }) => ({
+    label: 'All Clusters',
+    options: clusterList?.map((option) => ({
+        ...option,
+        value: +getOptionsValue(option, isInstallationStatusView),
+    })) as RecentlyVisitedOptions[],
+})
+
+export const getClusterSelectOptions = (
+    clusterList,
+    recentlyVisitedResources,
+    isInstallationStatusView,
+): RecentlyVisitedGroupedOptionsType[] =>
+    recentlyVisitedResources?.length
+        ? [
+              {
+                  label: 'Recently Visited',
+                  options: recentlyVisitedResources.map((cluster: BaseRecentlyVisitedEntitiesTypes) => ({
+                      label: cluster.name,
+                      value: cluster.id,
+                      isRecentlyVisited: true,
+                  })) as RecentlyVisitedOptions[],
+              },
+              getAllCluster({ clusterList, isInstallationStatusView }),
+          ]
+        : [getAllCluster({ clusterList, isInstallationStatusView })]