chore: Provide additinal component metadata

Author: just-boris

src/annotation-context/index.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { HotspotProps } from '../hotspot/interfaces';
 import { fireNonCancelableEvent } from '../internal/events';
-import { useTelemetry } from '../internal/hooks/use-telemetry';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { ClosedAnnotation } from './annotation/closed-annotation';
 import { OpenAnnotation } from './annotation/open-annotation';
@@ -26,7 +26,7 @@ export default function AnnotationContext({
   onExitTutorial,
   i18nStrings,
 }: AnnotationContextProps): JSX.Element {
-  useTelemetry('AnnotationContext');
+  useBaseComponent('AnnotationContext');
 
   const [open, setOpen] = useState(true);
 

src/i18n/provider.tsx

@@ -7,7 +7,7 @@ import IntlMessageFormat from 'intl-messageformat';
 
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
-import { useTelemetry } from '../internal/hooks/use-telemetry';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { CustomHandler, FormatFunction, InternalI18nContext } from './context';
 import { getMatchableLocales } from './get-matchable-locales';
@@ -38,7 +38,7 @@ export namespace I18nProviderProps {
 const I18nMessagesContext = React.createContext<I18nProviderProps.Messages>({});
 
 export function I18nProvider({ messages: messagesArray, locale: providedLocale, children }: I18nProviderProps) {
-  useTelemetry('I18nProvider');
+  useBaseComponent('I18nProvider');
 
   if (typeof document === 'undefined' && !providedLocale) {
     warnOnce(

src/internal/hooks/use-base-component/__tests__/use-base-component.test.tsx

@@ -3,18 +3,20 @@
 import React, { useState } from 'react';
 import { render } from '@testing-library/react';
 
-import { COMPONENT_METADATA_KEY, Portal } from '@cloudscape-design/component-toolkit/internal';
+import { COMPONENT_METADATA_KEY, Portal, useComponentMetrics } from '@cloudscape-design/component-toolkit/internal';
 
 import { Button } from '../../../../../lib/components';
 import { PACKAGE_VERSION } from '../../../../../lib/components/internal/environment';
 import useBaseComponent, {
   InternalBaseComponentProps,
 } from '../../../../../lib/components/internal/hooks/use-base-component';
-import { useTelemetry } from '../../../../../lib/components/internal/hooks/use-telemetry';
 import createWrapper from '../../../../../lib/components/test-utils/dom';
 
-jest.mock('../../../../../lib/components/internal/hooks/use-telemetry', () => {
-  return { useTelemetry: jest.fn(() => null) };
+jest.mock('@cloudscape-design/component-toolkit/internal', () => {
+  return {
+    ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
+    useComponentMetrics: jest.fn(() => {}),
+  };
 });
 
 type InternalDemoProps = InternalBaseComponentProps;
@@ -62,7 +64,11 @@ test('should attach the metadata to the returned root DOM node', () => {
 test('should call the useTelemetry hook passing down the given component name and its props', () => {
   jest.resetAllMocks();
   render(<Demo variant="default" />);
-  expect(useTelemetry).toHaveBeenCalledWith('DemoComponent', { props: { variant: 'default' } });
+  expect(useComponentMetrics).toHaveBeenCalledWith(
+    'DemoComponent',
+    expect.objectContaining({ packageVersion: PACKAGE_VERSION }),
+    { props: { variant: 'default' } }
+  );
 });
 
 test('metadata get attached on the Portal component root DOM node when elementRef is changing', () => {

src/internal/hooks/use-base-component/index.ts

@@ -5,12 +5,14 @@ import { MutableRefObject } from 'react';
 import {
   ComponentConfiguration,
   useComponentMetadata,
+  useComponentMetrics,
   useFocusVisible,
 } from '@cloudscape-design/component-toolkit/internal';
 
 import { AnalyticsMetadata } from '../../analytics/interfaces';
-import { PACKAGE_VERSION } from '../../environment';
-import { useTelemetry } from '../use-telemetry';
+import { PACKAGE_SOURCE, PACKAGE_VERSION, THEME } from '../../environment';
+import { getVisualTheme } from '../../utils/get-visual-theme';
+import { useVisualRefresh } from '../use-visual-mode';
 
 export interface InternalBaseComponentProps<T = any> {
   __internalRootRef?: MutableRefObject<T | null> | null;
@@ -26,8 +28,14 @@ export default function useBaseComponent<T = any>(
   config?: ComponentConfiguration,
   analyticsMetadata?: AnalyticsMetadata
 ) {
-  useTelemetry(componentName, config);
+  const isVisualRefresh = useVisualRefresh();
+  const theme = getVisualTheme(THEME, isVisualRefresh);
+  useComponentMetrics(componentName, { packageSource: PACKAGE_SOURCE, packageVersion: PACKAGE_VERSION, theme }, config);
   useFocusVisible();
-  const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION, { ...analyticsMetadata });
+  const elementRef = useComponentMetadata<T>(
+    componentName,
+    { packageName: PACKAGE_SOURCE, version: PACKAGE_VERSION, theme },
+    analyticsMetadata as any
+  );
   return { __internalRootRef: elementRef };
 }