chore: Emit component updated metrics during table interactions (#2901)

src/internal/analytics/__tests__/mocks.ts

@@ -1,7 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { setFunnelMetrics, setPerformanceMetrics } from '../../../../lib/components/internal/analytics';
+import {
+ setComponentMetrics,
+ setFunnelMetrics,
+ setPerformanceMetrics,
+} from '../../../../lib/components/internal/analytics';
 
 export const mockedFunnelInteractionId = 'mocked-funnel-id';
 export function mockFunnelMetrics() {
@@ -33,6 +37,10 @@ export function mockPerformanceMetrics() {
  });
 }
 
+export function mockComponentMetrics() {
+ setComponentMetrics({ componentMounted: jest.fn(), componentUpdated: jest.fn() });
+}
+
 export function mockInnerText() {
  if (!('innerText' in HTMLElement.prototype)) {
  // JSDom does not support the `innerText` property. For tests, `textContent` is usually close enough.

src/internal/analytics/index.ts

@@ -54,4 +54,6 @@ export let ComponentMetrics: IComponentMetrics = {
  componentMounted(): string {
  return '';
  },
+
+ componentUpdated(): void {},
 };

src/internal/analytics/interfaces.ts

@@ -183,14 +183,27 @@ export interface IPerformanceMetrics {
  modalPerformanceData: ModalPerformanceDataMethod;
 }
 
+type JSONValue = string | number | boolean | null | undefined;
+export interface JSONObject {
+ [key: string]: JSONObject | JSONValue;
+}
+
 export interface ComponentMountedProps {
  componentName: string;
  taskInteractionId?: string;
- details: Record<string, string | boolean | number | undefined>;
+ componentConfiguration: JSONObject;
+}
+
+export interface ComponentUpdatedProps extends ComponentMountedProps {
+ taskInteractionId: string;
+ actionType: string;
 }
+
 export type ComponentMountedMethod = (props: ComponentMountedProps) => string;
+export type ComponentUpdatedMethod = (props: ComponentUpdatedProps) => void;
 export interface IComponentMetrics {
  componentMounted: ComponentMountedMethod;
+ componentUpdated: ComponentUpdatedMethod;
 }
 
 // Interface for modal metrics

src/internal/hooks/use-dom-attribute/index.tsx

@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useRef } from 'react';
+
+/*
+ * This hook allows setting an DOM attribute after the first render, without rerendering the component.
+ */
+export function useDOMAttribute(elementRef: React.RefObject<HTMLElement>, attributeName: string, value: string) {
+ const attributeValueRef = useRef<string | undefined>();
+
+ useEffect(() => {
+ // With this effect, we apply the attribute only on the client, to avoid hydration errors.
+ attributeValueRef.current = value;
+ elementRef.current?.setAttribute(attributeName, value);
+ }, [attributeName, value, elementRef]);
+
+ return {
+ [attributeName]: attributeValueRef.current,
+ };
+}

src/internal/hooks/use-performance-marks/index.ts

@@ -1,31 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 
 import { useModalContext } from '../../context/modal-context';
+import { useDOMAttribute } from '../use-dom-attribute';
 import { useEffectOnUpdate } from '../use-effect-on-update';
 import { useRandomId } from '../use-unique-id';
 
-/*
-This hook allows setting an HTML attribute after the first render, without rerendering the component.
-*/
-function usePerformanceMarkAttribute(elementRef: React.RefObject<HTMLElement>, value: string) {
- const attributeName = 'data-analytics-performance-mark';
-
- const attributeValueRef = useRef<string | undefined>();
-
- useEffect(() => {
- // With this effect, we apply the attribute only on the client, to avoid hydration errors.
- attributeValueRef.current = value;
- elementRef.current?.setAttribute(attributeName, value);
- }, [value, elementRef]);
-
- return {
- [attributeName]: attributeValueRef.current,
- };
-}
-
 /**
  * This function returns an object that needs to be spread onto the same
  * element as the `elementRef`, so that the data attribute is applied
@@ -40,7 +22,8 @@ export function usePerformanceMarks(
 ) {
  const id = useRandomId();
  const { isInModal } = useModalContext();
- const attributes = usePerformanceMarkAttribute(elementRef, id);
+ const attributes = useDOMAttribute(elementRef, 'data-analytics-performance-mark', id);
+
  useEffect(() => {
  if (!enabled || !elementRef.current || isInModal) {
  return;