chore: Move table task interaction id to root of component (#2953)

pages/funnel-analytics/table.page.tsx

@@ -0,0 +1,36 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Header, Link, Table } from '~components';
+import { setComponentMetrics } from '~components/internal/analytics';
+
+const componentMetricsLog: any[] = [];
+(window as any).__awsuiComponentlMetrics__ = componentMetricsLog;
+
+setComponentMetrics({
+  componentMounted: props => {
+    componentMetricsLog.push(props);
+    return props.taskInteractionId || 'mocked-task-interaction-id';
+  },
+  componentUpdated: props => {
+    componentMetricsLog.push(props);
+  },
+});
+
+export default function () {
+  return (
+    <>
+      <h1>Table analytics</h1>
+      <Table
+        items={[]}
+        columnDefinitions={[]}
+        header={
+          <Header info={<Link variant="info">Info</Link>} counter="(10)">
+            Table title
+          </Header>
+        }
+      />
+    </>
+  );
+}

src/table/__integ__/component-metrics.test.ts

@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+interface ExtendedWindow extends Window {
+  __awsuiComponentlMetrics__: Array<any>;
+}
+declare const window: ExtendedWindow;
+
+class TableWithAnalyticsPageObject extends BasePageObject {
+  async getComponentMetricsLog() {
+    const componentsLog = await this.browser.execute(() => window.__awsuiComponentlMetrics__);
+    return componentsLog;
+  }
+}
+
+test(
+  'component mount event includes table title without additional header slot information',
+  useBrowser(async browser => {
+    await browser.url('#/light/funnel-analytics/table');
+    const page = new TableWithAnalyticsPageObject(browser);
+    const componentsLog = await page.getComponentMetricsLog();
+    expect(componentsLog.length).toBe(1);
+    expect(componentsLog[0]).toMatchObject({
+      componentConfiguration: {
+        taskName: 'Table title',
+      },
+      componentName: 'table',
+      taskInteractionId: expect.any(String),
+    });
+  })
+);

src/table/__tests__/component-metrics.test.tsx

@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import Table from '../../../lib/components/table';
+import createWrapper from '../../../lib/components/test-utils/dom';
+import { mockComponentMetrics } from '../../internal/analytics/__tests__/mocks';
+
+beforeEach(() => {
+  jest.resetAllMocks();
+  mockComponentMetrics();
+});
+
+test('should add data-analytics-task-interaction-id to root of Table component', () => {
+  const { container } = render(<Table items={[]} columnDefinitions={[]} />);
+  const tableElement = createWrapper(container).findTable()!.getElement();
+  expect(tableElement).toHaveAttribute('data-analytics-task-interaction-id');
+});

src/table/internal.tsx

@@ -410,6 +410,7 @@ const InternalTable = React.forwardRef(
           >
             <InternalContainer
               {...baseProps}
+              {...tableInteractionAttributes}
               __internalRootRef={__internalRootRef}
               className={clsx(baseProps.className, styles.root)}
               __funnelSubStepProps={__funnelSubStepProps}
@@ -502,7 +503,6 @@ const InternalTable = React.forwardRef(
                 >
                   <table
                     {...performanceMarkAttributes}
-                    {...tableInteractionAttributes}
                     ref={tableRef}
                     className={clsx(
                       styles.table,