fix: add missing tracking events (#435)

* fix: add missing tracking events

- Includes adding new tracking events for subtab navigation.

* test: add analytics mocks

Author: pranjal-jately-ld

packages/toolbar/src/core/tests/new-design/FilterButton.test.tsx

@@ -18,6 +18,13 @@ vi.mock('motion/react', () => ({
   AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }));
 
+// Mock analytics
+vi.mock('../../ui/Toolbar/context/telemetry/AnalyticsProvider', () => ({
+  useAnalytics: vi.fn().mockReturnValue({
+    trackFilterChange: vi.fn(),
+  }),
+}));
+
 describe('FilterButton', () => {
   const AllProviders = ({ children }: { children: React.ReactNode }) => (
     <ActiveSubtabProvider>

packages/toolbar/src/core/tests/new-design/IconBar.test.tsx

@@ -25,6 +25,13 @@ vi.mock('../../ui/Toolbar/components/new/Tooltip', () => ({
   ),
 }));
 
+// Mock analytics
+vi.mock('../../ui/Toolbar/context/telemetry/AnalyticsProvider', () => ({
+  useAnalytics: vi.fn().mockReturnValue({
+    trackTabChange: vi.fn(),
+  }),
+}));
+
 describe('IconBar', () => {
   const defaultProps = {
     defaultActiveTab: 'flags' as const,

packages/toolbar/src/core/tests/new-design/TabBar.test.tsx

@@ -11,6 +11,13 @@ vi.mock('../../ui/Toolbar/components/new/ContentActions', () => ({
   ContentActions: () => <div data-testid="content-actions">Content Actions</div>,
 }));
 
+// Mock analytics
+vi.mock('../../ui/Toolbar/context/telemetry/AnalyticsProvider', () => ({
+  useAnalytics: vi.fn().mockReturnValue({
+    trackSubtabChange: vi.fn(),
+  }),
+}));
+
 // Test wrapper that sets an active tab
 const TestWrapperWithTab = ({ tab }: { tab: 'flags' | 'monitoring' | 'settings' | 'interactive' }) => {
   const { setActiveTab } = useActiveTabContext();

packages/toolbar/src/core/ui/Toolbar/components/new/ContentActions.tsx

@@ -6,6 +6,7 @@ import {
   usePlugins,
   useToolbarState,
   useFlagsContext,
+  useAnalytics,
 } from '../../context';
 import { useActiveSubtabContext, useTabSearchContext } from './context';
 import { useContextsContext } from '../../context/api/ContextsProvider';
@@ -26,6 +27,7 @@ export function ContentActions() {
   const { events } = useEvents(eventInterceptionPlugin, searchTerm);
   const { setSearchTerm } = useTabSearchContext();
   const [searchIsExpanded, setSearchIsExpanded] = useState(false);
+  const analytics = useAnalytics();
 
   // Update search expansion when subtab changes
   // Expand if the new subtab has a search term, collapse if it doesn't
@@ -63,12 +65,14 @@ export function ContentActions() {
   const handleClearEvents = useCallback(() => {
     if (eventInterceptionPlugin) {
       eventInterceptionPlugin.clearEvents();
+      analytics.trackClearEvents();
     }
-  }, [eventInterceptionPlugin]);
+  }, [eventInterceptionPlugin, analytics]);
 
   const handleSync = useCallback(() => {
     refresh();
-  }, [refresh]);
+    analytics.trackRefresh();
+  }, [refresh, analytics]);
 
   const handleRefreshFlags = useCallback(() => {
     refreshFlags();
@@ -78,8 +82,9 @@ export function ContentActions() {
     (input: string) => {
       if (!activeSubtab) return;
       setSearchTerm(activeSubtab as SubTab, input);
+      analytics.trackSearch(input);
     },
-    [activeSubtab, setSearchTerm],
+    [activeSubtab, setSearchTerm, analytics],
   );
 
   return (

packages/toolbar/src/core/ui/Toolbar/components/new/FeatureFlags/FlagList.tsx

@@ -9,6 +9,7 @@ import {
   usePlugins,
   useToolbarState,
   useStarredFlags,
+  useAnalytics,
 } from '../../../context';
 import { useTabSearchContext, useSubtabFilters } from '../context';
 import { FlagItem } from './FlagItem';
@@ -25,6 +26,7 @@ function DevServerFlagList() {
   const searchTerm = useMemo(() => searchTerms['flags'] || '', [searchTerms]);
   const { activeFilters } = useSubtabFilters('flags');
   const { isStarred } = useStarredFlags();
+  const analytics = useAnalytics();
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const getScrollElement = useCallback(() => scrollContainerRef.current, []);
@@ -96,15 +98,17 @@ function DevServerFlagList() {
   const handleOverride = useCallback(
     async (flagKey: string, value: any) => {
       await setOverride(flagKey, value);
+      analytics.trackFlagOverride(flagKey, value, 'set');
     },
-    [setOverride],
+    [setOverride, analytics],
   );
 
   const handleClearOverride = useCallback(
     async (flagKey: string) => {
       await clearOverride(flagKey);
+      analytics.trackFlagOverride(flagKey, null, 'remove');
     },
-    [clearOverride],
+    [clearOverride, analytics],
   );
 
   // Calculate stats
@@ -190,6 +194,7 @@ function SdkFlagList() {
   const searchTerm = useMemo(() => searchTerms['flags'] || '', [searchTerms]);
   const { activeFilters } = useSubtabFilters('flags');
   const { isStarred } = useStarredFlags();
+  const analytics = useAnalytics();
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const getScrollElement = useCallback(() => scrollContainerRef.current, []);
@@ -248,15 +253,17 @@ function SdkFlagList() {
   const handleOverride = useCallback(
     (flagKey: string, value: any) => {
       setOverride(flagKey, value);
+      analytics.trackFlagOverride(flagKey, value, 'set');
     },
-    [setOverride],
+    [setOverride, analytics],
   );
 
   const handleClearOverride = useCallback(
     (flagKey: string) => {
       removeOverride(flagKey);
+      analytics.trackFlagOverride(flagKey, null, 'remove');
     },
-    [removeOverride],
+    [removeOverride, analytics],
   );
 
   const handleHeightChange = useCallback(

packages/toolbar/src/core/ui/Toolbar/components/new/FilterOverlay/FilterOverlay.tsx

@@ -6,6 +6,7 @@ import { useActiveSubtabContext } from '../context/ActiveSubtabProvider';
 import { SubTab } from '../types';
 import { IconButton } from '../../../../Buttons/IconButton';
 import { CheckIcon, FilterTuneIcon } from '../../icons';
+import { useAnalytics } from '../../../context';
 import * as styles from './FilterOverlay.module.css';
 
 interface FilterOptionItemProps {
@@ -42,16 +43,19 @@ interface FilterOverlayContentProps {
 const FilterOverlayContent = memo(function FilterOverlayContent({ subtab, onClose }: FilterOverlayContentProps) {
   const overlayRef = useRef<HTMLDivElement>(null);
   const { getActiveFilters, getFilterConfig, toggleFilter, resetFilters, hasActiveNonDefaultFilters } = useFilters();
+  const analytics = useAnalytics();
 
   const config = getFilterConfig(subtab);
   const activeFilters = getActiveFilters(subtab);
   const hasNonDefaultFilters = hasActiveNonDefaultFilters(subtab);
 
   const handleToggle = useCallback(
     (optionId: string) => {
+      const wasActive = activeFilters.has(optionId);
       toggleFilter(subtab, optionId);
+      analytics.trackFilterChange(optionId as 'all' | 'overrides' | 'starred', wasActive ? 'deselected' : 'selected');
     },
-    [subtab, toggleFilter],
+    [subtab, toggleFilter, activeFilters, analytics],
   );
 
   const handleReset = useCallback(() => {

packages/toolbar/src/core/ui/Toolbar/components/new/IconBar/IconBar.tsx

@@ -8,7 +8,7 @@ import { FlaskIcon } from '../../icons/FlaskIcon';
 import { Tooltip } from '../Tooltip';
 import * as styles from './IconBar.module.css';
 import { enableInteractiveIcon, enableAiIcon, enableOptimizeIcon } from '../../../../../../flags/toolbarFlags';
-import { useActiveTabContext, useElementSelection } from '../../../context';
+import { useActiveTabContext, useElementSelection, useAnalytics } from '../../../context';
 import { TabId } from '../../../types/toolbar';
 
 type Icon = {
@@ -29,6 +29,7 @@ export function IconBar({ defaultActiveTab }: IconBarProps) {
   const optimizeIconEnabled = enableOptimizeIcon();
   const { activeTab, setActiveTab } = useActiveTabContext();
   const { startSelection } = useElementSelection();
+  const analytics = useAnalytics();
   const [hoveredIcon, setHoveredIcon] = useState<TabId | null>(null);
 
   useEffect(() => {
@@ -74,10 +75,15 @@ export function IconBar({ defaultActiveTab }: IconBarProps) {
         startSelection();
       } else {
         // Switch to interactive mode AND start selection
+        analytics.trackTabChange(activeTab || null, id);
         setActiveTab(id);
         startSelection();
       }
     } else {
+      // Only track if actually changing tabs
+      if (activeTab !== id) {
+        analytics.trackTabChange(activeTab || null, id);
+      }
       setActiveTab(id);
     }
   };

packages/toolbar/src/core/ui/Toolbar/components/new/SubtabDropdown.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { ChevronDownIcon } from '../icons/ChevronDownIcon';
 import { SubTab, TabConfig } from './types';
+import { useAnalytics } from '../../context';
 import * as styles from './SubtabDropdown.module.css.ts';
 
 interface SubtabDropdownProps {
@@ -13,6 +14,7 @@ interface SubtabDropdownProps {
 export function SubtabDropdown({ subtabs, activeSubtab, onSelectSubtab }: SubtabDropdownProps) {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const analytics = useAnalytics();
 
   const activeTab = subtabs.find((tab) => tab.id === activeSubtab);
   const activeLabel = activeTab?.label || 'Select';
@@ -33,6 +35,11 @@ export function SubtabDropdown({ subtabs, activeSubtab, onSelectSubtab }: Subtab
 
   const handleSelect = (event: React.MouseEvent, subtab: SubTab) => {
     event.stopPropagation();
+
+    if (activeSubtab !== subtab) {
+      analytics.trackSubtabChange(activeSubtab || null, subtab);
+    }
+
     onSelectSubtab(subtab);
     setIsOpen(false);
   };

packages/toolbar/src/core/utils/analytics.ts

@@ -10,6 +10,7 @@ const EVENTS = {
   POSITION_CHANGED: 'position.changed',
   AUTO_COLLAPSE_TOGGLED: 'auto.collapse.toggled',
   TAB_CHANGED: 'tab.changed',
+  SUBTAB_CHANGED: 'subtab.changed',
   SEARCH: 'search',
   TOGGLE: 'toggle',
   TOGGLE_FLAG: 'toggle.flag',
@@ -116,6 +117,16 @@ export class ToolbarAnalytics {
     });
   }
 
+  /**
+   * Track toolbar subtab navigation
+   */
+  trackSubtabChange(fromSubtab: string | null, toSubtab: string): void {
+    this.track(EVENTS.SUBTAB_CHANGED, {
+      fromSubtab,
+      toSubtab,
+    });
+  }
+
   /**
    * Track search usage
    */