web: add a load event for expand/collapse (#5219)

intended to mirror the similar load event for star/unstar
tilt-dev · Nov 24, 2021 · ac711d0 · ac711d0
1 parent 62eb5bc
commit ac711d0
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 5 deletions.
diff --git a/web/src/ResourceGroupsContext.test.tsx b/web/src/ResourceGroupsContext.test.tsx
@@ -113,13 +113,23 @@ describe("ResourceGroupsContext", () => {
           <TestConsumer labelName="test" />
         </ResourceGroupsContextProvider>
       )
+      let loadIncr = {
+        name: "ui.web.resourceGroup",
+        tags: { action: AnalyticsAction.Load, expanded: "1", collapsed: "0" },
+      }
+      expectIncrs(loadIncr)
       clickButton()
       // Expect the "collapse" action value because the test label group is expanded
       // when it's clicked on and the "grid" type value because it's hardcoded in the
       // test component
-      expectIncrs({
+      expectIncrs(loadIncr, {
         name: "ui.web.resourceGroup",
-        tags: { action: AnalyticsAction.Collapse, type: AnalyticsType.Grid },
+        tags: {
+          action: AnalyticsAction.Collapse,
+          type: AnalyticsType.Grid,
+          expanded: "1",
+          collapsed: "0",
+        },
       })
     })
   })

diff --git a/web/src/ResourceGroupsContext.tsx b/web/src/ResourceGroupsContext.tsx
@@ -1,5 +1,5 @@
-import { createContext, PropsWithChildren, useContext } from "react"
-import { AnalyticsAction, AnalyticsType, incr } from "./analytics"
+import { createContext, PropsWithChildren, useContext, useEffect } from "react"
+import { AnalyticsAction, AnalyticsType, incr, Tags } from "./analytics"
 import { usePersistentState } from "./LocalStorage"
 
 export type GroupState = { expanded: boolean }
@@ -34,6 +34,22 @@ export function useResourceGroups(): ResourceGroupsContext {
   return useContext(resourceGroupsContext)
 }
 
+function getTags(groups: GroupsState): Tags {
+  let expandCount = 0
+  let collapseCount = 0
+  Object.values(groups).forEach((group) => {
+    if (group.expanded) {
+      expandCount++
+    } else {
+      collapseCount++
+    }
+  })
+  return {
+    expanded: String(expandCount),
+    collapsed: String(collapseCount),
+  }
+}
+
 export function ResourceGroupsContextProvider(
   props: PropsWithChildren<{ initialValuesForTesting?: GroupsState }>
 ) {
@@ -42,6 +58,16 @@ export function ResourceGroupsContextProvider(
     "resource-groups",
     defaultPersistentValue
   )
+  let analyticsTags = getTags(groups)
+
+  useEffect(() => {
+    incr("ui.web.resourceGroup", {
+      action: AnalyticsAction.Load,
+      ...analyticsTags,
+    })
+    // empty deps because we only want to report nce per app load
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   function toggleGroupExpanded(groupLabel: string, page: AnalyticsType) {
     const currentGroupState = groups[groupLabel] ?? { ...DEFAULT_GROUP_STATE }
@@ -53,7 +79,11 @@ export function ResourceGroupsContextProvider(
     const action = nextGroupState.expanded
       ? AnalyticsAction.Expand
       : AnalyticsAction.Collapse
-    incr("ui.web.resourceGroup", { action, type: page })
+    incr("ui.web.resourceGroup", {
+      action,
+      type: page,
+      ...analyticsTags,
+    })
 
     setGroups((prevState) => {
       return {