chore: Emit component updated metrics during table interactions

[michaeldowseza]

Description

• Emit component update metrics for table interactions.
• Refactor useComponentAnalytics hook and migrate code into useTableInteraction: We do not have plans to extend this to additional components yet and it was cleaner to combine these hooks as they have the same purpose.

How has this been tested?

• Added additional unit tests

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.23%. Comparing base (6ac2909) to head (fe18d37).
Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2901      +/-   ##
==========================================
- Coverage   96.23%   96.23%   -0.01%     
==========================================
  Files         767      767              
  Lines       21699    21703       +4     
  Branches     7363     7428      +65     
==========================================
+ Hits        20882    20885       +3     
- Misses        764      765       +1     
  Partials       53       53              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[connorlanigan]

We already have this code in another place:

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

Lines 13 to 27 in 56aa09e

	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,
	};
	}

Can we merge these two into one, to reduce the risk of diverging implementations (e.g. when we make bug fixes)?

[michaeldowseza]

Fair point. Mine was based off of this one. Will consolidate into a useDOMAttribute hook.

[connorlanigan]

When the value of an object's property is undefined, the property will not appear in the JSONified string at all - is that okay for our metrics? Should we enforce values being null instead?

[michaeldowseza]

I had mostly tried to align with this type interface. I think not appearing in the string is fine.

[orangevolon]

With every taskInteractionId change, do we wanna track mount?

[michaeldowseza]

const taskInteractionId = useRandomId();

useRandomId() returns a ref value so this does not change on render and the effect will only run once on mount. In theory I could leave the dependency out but then I would need to have an eslint-disable comment.

[orangevolon]

I think as long as it's a ref it should be fine, but I guess that also relies on the assumption that useRandomId is always going to return a ref.