diff --git a/src/annotation-context/index.tsx b/src/annotation-context/index.tsx index 63445879d7..899c0979e2 100644 --- a/src/annotation-context/index.tsx +++ b/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); diff --git a/src/i18n/provider.tsx b/src/i18n/provider.tsx index 46160be7c9..596da34ec5 100644 --- a/src/i18n/provider.tsx +++ b/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({}); export function I18nProvider({ messages: messagesArray, locale: providedLocale, children }: I18nProviderProps) { - useTelemetry('I18nProvider'); + useBaseComponent('I18nProvider'); if (typeof document === 'undefined' && !providedLocale) { warnOnce( diff --git a/src/internal/hooks/use-base-component/__tests__/use-base-component.test.tsx b/src/internal/hooks/use-base-component/__tests__/use-base-component.test.tsx index 3cd93f7aca..78ef85ba5c 100644 --- a/src/internal/hooks/use-base-component/__tests__/use-base-component.test.tsx +++ b/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(); - 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', () => { diff --git a/src/internal/hooks/use-base-component/index.ts b/src/internal/hooks/use-base-component/index.ts index 288f58c9d9..86af7ddc9f 100644 --- a/src/internal/hooks/use-base-component/index.ts +++ b/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 { __internalRootRef?: MutableRefObject | null; @@ -26,8 +28,14 @@ export default function useBaseComponent( 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(componentName, PACKAGE_VERSION, { ...analyticsMetadata }); + const elementRef = useComponentMetadata( + componentName, + { packageName: PACKAGE_SOURCE, version: PACKAGE_VERSION, theme }, + analyticsMetadata as any + ); return { __internalRootRef: elementRef }; } diff --git a/src/internal/hooks/use-telemetry/index.ts b/src/internal/hooks/use-telemetry/index.ts deleted file mode 100644 index 1a6e78da5e..0000000000 --- a/src/internal/hooks/use-telemetry/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { ComponentConfiguration, useComponentMetrics } from '@cloudscape-design/component-toolkit/internal'; - -import { PACKAGE_SOURCE, PACKAGE_VERSION, THEME } from '../../environment'; -import { getVisualTheme } from '../../utils/get-visual-theme'; -import { useVisualRefresh } from '../use-visual-mode'; - -export function useTelemetry(componentName: string, config?: ComponentConfiguration) { - const isVisualRefresh = useVisualRefresh(); - const theme = getVisualTheme(THEME, isVisualRefresh); - useComponentMetrics(componentName, { packageSource: PACKAGE_SOURCE, packageVersion: PACKAGE_VERSION, theme }, config); -}