chore: Do no emit table interaction metrics while in funnel (#2939)

src/internal/hooks/use-table-interaction-metrics/__tests__/use-table-interaction-metrics.test.tsx

@@ -9,12 +9,13 @@ import {
   PerformanceMetrics,
   setComponentMetrics,
 } from '../../../../../lib/components/internal/analytics';
+import { AnalyticsFunnel } from '../../../../../lib/components/internal/analytics/components/analytics-funnel';
 import {
   useTableInteractionMetrics,
   UseTableInteractionMetricsProps,
 } from '../../../../../lib/components/internal/hooks/use-table-interaction-metrics';
-import { renderHook } from '../../../../__tests__/render-hook';
-import { mockPerformanceMetrics } from '../../../analytics/__tests__/mocks';
+import { renderHook, RenderHookOptions } from '../../../../__tests__/render-hook';
+import { mockFunnelMetrics, mockPerformanceMetrics } from '../../../analytics/__tests__/mocks';
 
 type RenderProps = Partial<UseTableInteractionMetricsProps>;
 
@@ -27,11 +28,12 @@ const defaultProps = {
   interactionMetadata: () => '',
 } satisfies RenderProps;
 
-function renderUseTableInteractionMetricsHook(props: RenderProps) {
+function renderUseTableInteractionMetricsHook(props: RenderProps, wrapper?: RenderHookOptions<RenderProps>['wrapper']) {
   const elementRef = createRef<HTMLElement>();
 
   const { result, rerender, unmount } = renderHook(useTableInteractionMetrics, {
     initialProps: { elementRef, ...defaultProps, ...props },
+    wrapper,
   });
 
   return {
@@ -48,6 +50,14 @@ function TestComponent(props: RenderProps) {
   return <div {...tableInteractionAttributes} ref={elementRef} data-testid="element" />;
 }
 
+function FunnelWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <AnalyticsFunnel funnelType="single-page" optionalStepNumbers={[]} totalFunnelSteps={1}>
+      {children}
+    </AnalyticsFunnel>
+  );
+}
+
 const componentMounted = jest.fn();
 const componentUpdated = jest.fn();
 
@@ -59,6 +69,7 @@ setComponentMetrics({
 beforeEach(() => {
   jest.resetAllMocks();
   mockPerformanceMetrics();
+  mockFunnelMetrics();
 });
 
 jest.useFakeTimers();
@@ -75,6 +86,17 @@ describe('useTableInteractionMetrics', () => {
     });
   });
 
+  test('should not emit componentMount event when inside a funnel', () => {
+    render(
+      <FunnelWrapper>
+        <TestComponent />
+      </FunnelWrapper>
+    );
+    jest.runAllTimers();
+
+    expect(componentMounted).toHaveBeenCalledTimes(0);
+  });
+
   test('data attribute should be present after the first render', () => {
     const { getByTestId } = render(<TestComponent />);
     jest.runAllTimers();
@@ -129,6 +151,17 @@ describe('useTableInteractionMetrics', () => {
       });
     });
 
+    test('componentUpdated should not be called when in a funnel', () => {
+      const { setLastUserAction, rerender } = renderUseTableInteractionMetricsHook({}, FunnelWrapper);
+
+      setLastUserAction('filter');
+      rerender({ loading: true });
+
+      jest.advanceTimersByTime(3456);
+      rerender({ loading: false });
+      expect(ComponentMetrics.componentUpdated).toHaveBeenCalledTimes(0);
+    });
+
     test('user actions should not be recorded if they happened a longer time ago', () => {
       const { setLastUserAction, rerender } = renderUseTableInteractionMetricsHook({});
 

src/internal/hooks/use-table-interaction-metrics/index.ts

@@ -4,6 +4,7 @@
 import { useEffect, useRef } from 'react';
 
 import { ComponentMetrics, PerformanceMetrics } from '../../analytics';
+import { useFunnel } from '../../analytics/hooks/use-funnel';
 import { JSONObject } from '../../analytics/interfaces';
 import { useDOMAttribute } from '../use-dom-attribute';
 import { useEffectOnUpdate } from '../use-effect-on-update';
@@ -40,6 +41,7 @@ export function useTableInteractionMetrics({
     'data-analytics-task-interaction-id',
     taskInteractionId
   );
+  const { isInFunnel } = useFunnel();
   const lastUserAction = useRef<{ name: string; time: number } | null>(null);
   const capturedUserAction = useRef<string | null>(null);
   const loadingStartTime = useRef<number | null>(null);
@@ -48,12 +50,16 @@ export function useTableInteractionMetrics({
   metadata.current = { itemCount, getComponentIdentifier, getComponentConfiguration, interactionMetadata };
 
   useEffect(() => {
+    if (isInFunnel) {
+      return;
+    }
+
     ComponentMetrics.componentMounted({
       taskInteractionId,
       componentName: 'table',
       componentConfiguration: metadata.current.getComponentConfiguration(),
     });
-  }, [taskInteractionId]);
+  }, [taskInteractionId, isInFunnel]);
 
   useEffect(() => {
     if (loading) {
@@ -81,14 +87,16 @@ export function useTableInteractionMetrics({
         noOfResourcesInTable: metadata.current.itemCount,
       });
 
-      ComponentMetrics.componentUpdated({
-        taskInteractionId,
-        componentName: 'table',
-        actionType: capturedUserAction.current ?? '',
-        componentConfiguration: metadata.current.getComponentConfiguration(),
-      });
+      if (!isInFunnel) {
+        ComponentMetrics.componentUpdated({
+          taskInteractionId,
+          componentName: 'table',
+          actionType: capturedUserAction.current ?? '',
+          componentConfiguration: metadata.current.getComponentConfiguration(),
+        });
+      }
     }
-  }, [instanceIdentifier, loading, taskInteractionId]);
+  }, [instanceIdentifier, loading, taskInteractionId, isInFunnel]);
 
   return {
     tableInteractionAttributes,