fix: Instrument Toolbar variant of AppLayout (#3606)

Co-authored-by: Francesco Longo <[email protected]>

Author: fralongo

src/app-layout-toolbar/index.tsx

@@ -3,7 +3,6 @@
 import React from 'react';
 
 import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
-import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import { applyDefaults } from '../app-layout/defaults';
 import { AppLayoutProps } from '../app-layout/interfaces';
@@ -19,7 +18,6 @@ import { useMobile } from '../internal/hooks/use-mobile';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { isDevelopment } from '../internal/is-development';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { GeneratedAnalyticsMetadataAppLayoutToolbarComponent } from './analytics-metadata/interfaces';
 import { AppLayoutToolbarProps } from './interfaces';
 
 export { AppLayoutToolbarProps };
@@ -127,21 +125,9 @@ const AppLayoutToolbar = React.forwardRef(
 
     const baseProps = getBaseProps(rest);
 
-    const componentAnalyticsMetadata: GeneratedAnalyticsMetadataAppLayoutToolbarComponent = {
-      name: 'awsui.AppLayoutToolbar',
-      label: {
-        selector: 'h1',
-        root: 'body',
-      },
-    };
-
     return (
       <AppLayoutToolbarPublicContext.Provider value={true}>
-        <div
-          ref={useMergeRefs(__internalRootRef, rootRef)}
-          {...baseProps}
-          {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}
-        >
+        <div ref={useMergeRefs(__internalRootRef, rootRef)} {...baseProps}>
           <AppLayoutToolbarInternal ref={ref} {...props} />
         </div>
       </AppLayoutToolbarPublicContext.Provider>

src/app-layout/__tests__/analytics-metadata.test.tsx

@@ -0,0 +1,60 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import {
+  activateAnalyticsMetadata,
+  GeneratedAnalyticsMetadataFragment,
+} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import { getGeneratedAnalyticsMetadata } from '@cloudscape-design/component-toolkit/internal/analytics-metadata/utils';
+
+import AppLayout from '../../../lib/components/app-layout';
+import Header from '../../../lib/components/header';
+import { describeEachAppLayout, renderComponent } from './utils';
+
+const getMetadata = (label = 'Label') => {
+  const metadata: GeneratedAnalyticsMetadataFragment = {
+    contexts: [
+      {
+        type: 'component',
+        detail: {
+          name: 'awsui.AppLayoutToolbar',
+          label,
+        },
+      },
+    ],
+  };
+  return metadata;
+};
+
+beforeAll(() => {
+  activateAnalyticsMetadata(true);
+});
+describeEachAppLayout({ sizes: ['desktop'] }, ({ theme }) => {
+  describe('AppLayoutToolbar renders correct analytics metadata', () => {
+    test('with the header component inside the content', () => {
+      const { wrapper } = renderComponent(
+        <AppLayout
+          content={
+            <Header variant="h1" counter="not included">
+              H1 Header
+            </Header>
+          }
+        />
+      );
+      if (theme === 'refresh-toolbar') {
+        expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getMetadata('H1 Header'));
+      } else {
+        expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual({});
+      }
+    });
+    test('with a simple h1 tag inside the content', () => {
+      const { wrapper } = renderComponent(<AppLayout content={<h1>Label</h1>} />);
+      if (theme === 'refresh-toolbar') {
+        expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getMetadata());
+      } else {
+        expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual({});
+      }
+    });
+  });
+});

src/app-layout/__tests__/runtime-drawers.test.tsx

@@ -1365,24 +1365,29 @@ describe('toolbar mode only features', () => {
           getGeneratedAnalyticsMetadata(
             globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
           )
-        ).toStrictEqual({
-          action: 'expand',
-          detail: {
-            label: 'Expanded mode button',
-          },
-        });
+        ).toEqual(
+          expect.objectContaining({
+            action: 'expand',
+            detail: {
+              label: 'Expanded mode button',
+            },
+          })
+        );
+
         globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
         expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(false);
         expect(
           getGeneratedAnalyticsMetadata(
             globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
           )
-        ).toStrictEqual({
-          action: 'collapse',
-          detail: {
-            label: 'Expanded mode button',
-          },
-        });
+        ).toEqual(
+          expect.objectContaining({
+            action: 'collapse',
+            detail: {
+              label: 'Expanded mode button',
+            },
+          })
+        );
       });
 
       test('only one drawer could be in expanded mode. all other panels should be closed', async () => {

src/app-layout/visual-refresh-toolbar/skeleton/index.tsx

@@ -3,6 +3,9 @@
 import React from 'react';
 import clsx from 'clsx';
 
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+
+import { GeneratedAnalyticsMetadataAppLayoutToolbarComponent } from '../../../app-layout-toolbar/analytics-metadata/interfaces';
 import VisualContext from '../../../internal/components/visual-context';
 import customCssProps from '../../../internal/generated/custom-css-properties';
 import { useMobile } from '../../../internal/hooks/use-mobile';
@@ -46,6 +49,14 @@ interface SkeletonLayoutProps
   drawerExpandedModeInChildLayout: boolean;
 }
 
+const componentAnalyticsMetadata: GeneratedAnalyticsMetadataAppLayoutToolbarComponent = {
+  name: 'awsui.AppLayoutToolbar',
+  label: {
+    selector: 'h1',
+    root: 'body',
+  },
+};
+
 export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutProps>(
   (
     {
@@ -95,6 +106,7 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
             [customCssProps.navigationWidth]: `${navigationWidth}px`,
             [customCssProps.toolsWidth]: `${toolsWidth}px`,
           }}
+          {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}
         >
           {toolbar}
           {navigation && (