chore: Add usage tracking for global breadcrumbs feature (#3726)

Author: just-boris

src/app-layout/__tests__/global-breadcrumbs.test.tsx

@@ -9,6 +9,7 @@ import { getGeneratedAnalyticsMetadata } from '@cloudscape-design/component-tool
 
 import AppLayout from '../../../lib/components/app-layout';
 import BreadcrumbGroup, { BreadcrumbGroupProps } from '../../../lib/components/breadcrumb-group';
+import { metrics } from '../../../lib/components/internal/metrics';
 import { awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import { describeEachAppLayout } from './utils';
@@ -57,6 +58,11 @@ async function renderAsync(jsx: React.ReactElement) {
   return result;
 }
 
+let sendPanoramaMetricSpy: jest.SpyInstance;
+beforeEach(() => {
+  sendPanoramaMetricSpy = jest.spyOn(metrics, 'sendOpsMetricObject').mockImplementation(() => {});
+});
+
 afterEach(() => {
   // force unmount for all rendered component to run clean state assertions
   cleanup();
@@ -66,6 +72,7 @@ afterEach(() => {
     breadcrumbInstances: [],
     breadcrumbRegistrations: [],
   });
+  jest.resetAllMocks();
 });
 
 describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () => {
@@ -74,13 +81,15 @@ describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () =>
     await delay();
     expect(findAllBreadcrumbsInstances()).toHaveLength(1);
     expect(wrapper.findBreadcrumbGroup()!.findBreadcrumbLinks()).toHaveLength(2);
+    expect(sendPanoramaMetricSpy).not.toHaveBeenCalled();
   });
 
   test('renders normal breadcrumbs when placed inside the breadcrumbs slot', async () => {
     render(<AppLayout breadcrumbs={<BreadcrumbGroup items={defaultBreadcrumbs} />} />);
     await delay();
     expect(findDiscoveredBreadcrumbs()).toBeFalsy();
     expect(findAppLayoutBreadcrumbItems()).toHaveLength(2);
+    expect(sendPanoramaMetricSpy).not.toHaveBeenCalled();
   });
 
   test('no relocation happens on the initial render', () => {
@@ -106,6 +115,18 @@ describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () =>
     expect(findAppLayoutBreadcrumbItems()).toHaveLength(2);
   });
 
+  test('reports a single metric when global breadcrumbs used', async () => {
+    const { rerender } = await renderAsync(<AppLayout content={<BreadcrumbGroup items={defaultBreadcrumbs} />} />);
+    expect(sendPanoramaMetricSpy).toHaveBeenCalledTimes(1);
+    expect(sendPanoramaMetricSpy).toHaveBeenCalledWith('awsui-global-breadcrumbs-used', { breadcrumbs: 'Home > Page' });
+
+    sendPanoramaMetricSpy.mockClear();
+    rerender(
+      <AppLayout content={<BreadcrumbGroup items={[defaultBreadcrumbs[0], { text: 'Another', href: '/another' }]} />} />
+    );
+    expect(sendPanoramaMetricSpy).toHaveBeenCalledTimes(0);
+  });
+
   test('event handlers work for relocated breadcrumbs', async () => {
     const onFollow = jest.fn(event => event.preventDefault());
     await renderAsync(<AppLayout content={<BreadcrumbGroup items={defaultBreadcrumbs} onFollow={onFollow} />} />);
@@ -334,6 +355,14 @@ describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () =>
     );
     expect(findAllBreadcrumbsInstances()).toHaveLength(2);
   });
+
+  test('does not report metrics if globalization is disabled', async () => {
+    render(
+      <AppLayout content={<BreadcrumbGroup items={defaultBreadcrumbs} {...{ __disableGlobalization: true }} />} />
+    );
+    await delay();
+    expect(sendPanoramaMetricSpy).toHaveBeenCalledTimes(0);
+  });
 });
 
 describe('without feature flag', () => {
@@ -343,6 +372,7 @@ describe('without feature flag', () => {
     expect(findAllBreadcrumbsInstances()).toHaveLength(1);
     expect(wrapper.findAppLayout()!.findBreadcrumbs()).toBeFalsy();
     expect(wrapper.findAppLayout()!.findContentRegion().findBreadcrumbGroup()).toBeTruthy();
+    expect(sendPanoramaMetricSpy).not.toHaveBeenCalled();
   });
 });
 

src/internal/plugins/helpers/use-global-breadcrumbs.ts

@@ -8,6 +8,7 @@ import {
   BreadcrumbsSlotContext,
 } from '../../../app-layout/visual-refresh-toolbar/contexts';
 import { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces';
+import { metrics } from '../../metrics';
 import { awsuiPluginsInternal } from '../api';
 import { BreadcrumbsGlobalRegistration } from '../controllers/breadcrumbs';
 
@@ -24,9 +25,13 @@ function useSetGlobalBreadcrumbsImplementation({
     if (isInToolbar || __disableGlobalization || !isLayoutVisible) {
       return;
     }
-    const registration = awsuiPluginsInternal.breadcrumbs.registerBreadcrumbs(props, isRegistered =>
-      setRegistered(isRegistered ?? true)
-    );
+    const registration = awsuiPluginsInternal.breadcrumbs.registerBreadcrumbs(props, isRegistered => {
+      setRegistered(isRegistered ?? true);
+      if (isRegistered) {
+        const breadcrumbs = props.items.map(item => item.text).join(' > ');
+        metrics.sendOpsMetricObject('awsui-global-breadcrumbs-used', { breadcrumbs });
+      }
+    });
     registrationRef.current = registration;
 
     return () => {