feat: Add analytics metadata to input and textarea components (#3671)

fralongo · Francesco Longo · web-flow · commit 2295fdb1a823 · 2025-07-21T11:26:57.000Z
Co-authored-by: Francesco Longo &lt;flongo@amazon.de&gt;
diff --git a/src/input/__tests__/analytics-metadata.test.tsx b/src/input/__tests__/analytics-metadata.test.tsx
@@ -3,34 +3,101 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { activateAnalyticsMetadata } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import {
+  activateAnalyticsMetadata,
+  GeneratedAnalyticsMetadataFragment,
+} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import { getGeneratedAnalyticsMetadata } from '@cloudscape-design/component-toolkit/internal/analytics-metadata/utils';
 
+import FormField from '../../../lib/components/form-field';
 import Input from '../../../lib/components/input';
 import InternalInput from '../../../lib/components/input/internal';
 import createWrapper from '../../../lib/components/test-utils/dom';
 
 import styles from '../../../lib/components/input/styles.css.js';
 
+const getComponentMetadata = (label: string, value: string) => {
+  const metadata: GeneratedAnalyticsMetadataFragment = {
+    contexts: [
+      {
+        type: 'component',
+        detail: {
+          name: 'awsui.Input',
+          label,
+          properties: {
+            value,
+          },
+        },
+      },
+    ],
+  };
+  return metadata;
+};
+
 beforeAll(() => {
   activateAnalyticsMetadata(true);
 });
 describe('Input renders correct analytics metadata', () => {
-  test('on the clear button', () => {
-    const renderResult = render(<Input value="value" onChange={() => {}} type="search" clearAriaLabel="clear" />);
-    const clearInputButton = createWrapper(renderResult.container).findInput()!.findClearButton()!.getElement();
-    expect(getGeneratedAnalyticsMetadata(clearInputButton)).toEqual({
-      action: 'clearInput',
-      detail: {
-        label: 'clear',
-      },
+  describe('on the right button', () => {
+    test('when it is the clear button', () => {
+      const renderResult = render(<Input value="value" onChange={() => {}} type="search" clearAriaLabel="clear" />);
+      const clearInputButton = createWrapper(renderResult.container).findInput()!.findClearButton()!.getElement();
+      expect(getGeneratedAnalyticsMetadata(clearInputButton)).toEqual({
+        action: 'clearInput',
+        detail: {
+          label: 'clear',
+        },
+        ...getComponentMetadata('', 'value'),
+      });
+    });
+    test('when it is not the clear button', () => {
+      const renderResult = render(<InternalInput value="value" onChange={() => {}} __rightIcon="settings" />);
+      const rightIconButton = createWrapper(renderResult.container)
+        .findByClassName(styles['input-icon-right'])!
+        .getElement();
+      expect(getGeneratedAnalyticsMetadata(rightIconButton)).toEqual({});
     });
   });
-  test('without the clear button', () => {
-    const renderResult = render(<InternalInput value="value" onChange={() => {}} __rightIcon="settings" />);
-    const rightIconButton = createWrapper(renderResult.container)
-      .findByClassName(styles['input-icon-right'])!
-      .getElement();
-    expect(getGeneratedAnalyticsMetadata(rightIconButton)).toEqual({});
+  describe('on the component', () => {
+    test('with aria label', () => {
+      const renderResult = render(<Input value="a" onChange={() => {}} ariaLabel="label" />);
+      const componentElement = createWrapper(renderResult.container).findInput()!.getElement();
+      expect(getGeneratedAnalyticsMetadata(componentElement)).toEqual(getComponentMetadata('label', 'a'));
+    });
+    test('with empty value', () => {
+      const renderResult = render(<Input value="" onChange={() => {}} ariaLabel="label" />);
+      const componentElement = createWrapper(renderResult.container).findInput()!.getElement();
+      expect(getGeneratedAnalyticsMetadata(componentElement)).toEqual(getComponentMetadata('label', ''));
+    });
+    test('within a form field', () => {
+      const formFieldLabel = 'form-field-label';
+      const renderResult = render(
+        <FormField label={formFieldLabel}>
+          <Input value="a" onChange={() => {}} />
+        </FormField>
+      );
+      const componentElement = createWrapper(renderResult.container).findInput()!.getElement();
+      expect(getGeneratedAnalyticsMetadata(componentElement)).toEqual({
+        contexts: [
+          {
+            type: 'component',
+            detail: {
+              name: 'awsui.Input',
+              label: formFieldLabel,
+              properties: {
+                value: 'a',
+              },
+            },
+          },
+          {
+            type: 'component',
+            detail: {
+              name: 'awsui.FormField',
+              label: formFieldLabel,
+            },
+          },
+        ],
+      });
+    });
   });
 });
diff --git a/src/input/analytics-metadata/interfaces.ts b/src/input/analytics-metadata/interfaces.ts
@@ -7,3 +7,11 @@ export interface GeneratedAnalyticsMetadataInputClearInput {
     label: string;
   };
 }
+
+export interface GeneratedAnalyticsMetadataInputComponent {
+  name: 'awsui.Input';
+  label: string;
+  properties: {
+    value: string;
+  };
+}
diff --git a/src/input/index.tsx b/src/input/index.tsx
@@ -100,6 +100,7 @@ const Input = React.forwardRef(
         }}
         className={clsx(styles.root, baseProps.className)}
         __inheritFormFieldProps={true}
+        __injectAnalyticsComponentMetadata={true}
       />
     );
   }
diff --git a/src/input/internal.tsx b/src/input/internal.tsx
@@ -15,7 +15,10 @@ import { FormFieldValidationControlProps, useFormFieldContext } from '../interna
 import { fireKeyboardEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { useDebounceCallback } from '../internal/hooks/use-debounce-callback';
-import { GeneratedAnalyticsMetadataInputClearInput } from './analytics-metadata/interfaces';
+import {
+  GeneratedAnalyticsMetadataInputClearInput,
+  GeneratedAnalyticsMetadataInputComponent,
+} from './analytics-metadata/interfaces';
 import { BaseChangeDetail, BaseInputProps, InputAutoCorrect, InputProps } from './interfaces';
 import { convertAutoComplete, useSearchProps } from './utils';
 
@@ -43,6 +46,7 @@ export interface InternalInputProps
   __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;
 
   __inheritFormFieldProps?: boolean;
+  __injectAnalyticsComponentMetadata?: boolean;
 }
 
 function InternalInput(
@@ -82,6 +86,7 @@ function InternalInput(
     __nativeAttributes,
     __internalRootRef,
     __inheritFormFieldProps,
+    __injectAnalyticsComponentMetadata,
     ...rest
   }: InternalInputProps,
   ref: Ref<HTMLInputElement>
@@ -177,12 +182,23 @@ function InternalInput(
     attributes.type = 'text';
   }
 
+  const componentAnalyticsMetadata: GeneratedAnalyticsMetadataInputComponent = {
+    name: 'awsui.Input',
+    label: 'input',
+    properties: {
+      value: value || '',
+    },
+  };
+
   return (
     <div
       {...baseProps}
       className={clsx(baseProps.className, styles['input-container'])}
       ref={__internalRootRef}
       dir={type === 'email' ? 'ltr' : undefined}
+      {...(__injectAnalyticsComponentMetadata
+        ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })
+        : {})}
     >
       {__leftIcon && (
         <span onClick={__onLeftIconClick} className={styles['input-icon-left']}>
diff --git a/src/textarea/__tests__/analytics-metadata.test.tsx b/src/textarea/__tests__/analytics-metadata.test.tsx
@@ -0,0 +1,81 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import {
+  activateAnalyticsMetadata,
+  GeneratedAnalyticsMetadataFragment,
+} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import { getGeneratedAnalyticsMetadata } from '@cloudscape-design/component-toolkit/internal/analytics-metadata/utils';
+
+import FormField from '../../../lib/components/form-field';
+import createWrapper from '../../../lib/components/test-utils/dom';
+import Textarea, { TextareaProps } from '../../../lib/components/textarea';
+
+const getComponentMetadata = (label: string, value: string) => {
+  const metadata: GeneratedAnalyticsMetadataFragment = {
+    contexts: [
+      {
+        type: 'component',
+        detail: {
+          name: 'awsui.Textarea',
+          label,
+          properties: {
+            value,
+          },
+        },
+      },
+    ],
+  };
+  return metadata;
+};
+
+function renderTextarea(props: Partial<TextareaProps>) {
+  const renderResult = render(<Textarea value="a" onChange={() => {}} {...props} />);
+  return createWrapper(renderResult.container).findTextarea()!;
+}
+
+beforeAll(() => {
+  activateAnalyticsMetadata(true);
+});
+describe('Input renders correct analytics metadata', () => {
+  test('with aria label', () => {
+    const componentElement = renderTextarea({ ariaLabel: 'label' }).getElement();
+    expect(getGeneratedAnalyticsMetadata(componentElement)).toEqual(getComponentMetadata('label', 'a'));
+  });
+  test('with empty value', () => {
+    const componentElement = renderTextarea({ ariaLabel: 'label', value: '' }).getElement();
+    expect(getGeneratedAnalyticsMetadata(componentElement)).toEqual(getComponentMetadata('label', ''));
+  });
+  test('within a form field', () => {
+    const formFieldLabel = 'form-field-label';
+    const renderResult = render(
+      <FormField label={formFieldLabel}>
+        <Textarea value="a" onChange={() => {}} />
+      </FormField>
+    );
+    const componentElement = createWrapper(renderResult.container).findTextarea()!.getElement();
+    expect(getGeneratedAnalyticsMetadata(componentElement)).toEqual({
+      contexts: [
+        {
+          type: 'component',
+          detail: {
+            name: 'awsui.Textarea',
+            label: formFieldLabel,
+            properties: {
+              value: 'a',
+            },
+          },
+        },
+        {
+          type: 'component',
+          detail: {
+            name: 'awsui.FormField',
+            label: formFieldLabel,
+          },
+        },
+      ],
+    });
+  });
+});
diff --git a/src/textarea/analytics-metadata/interfaces.ts b/src/textarea/analytics-metadata/interfaces.ts
@@ -0,0 +1,10 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+export interface GeneratedAnalyticsMetadataTextareaComponent {
+  name: 'awsui.Textarea';
+  label: string;
+  properties: {
+    value: string;
+  };
+}
diff --git a/src/textarea/index.tsx b/src/textarea/index.tsx
@@ -4,13 +4,16 @@
 import React, { Ref, useRef } from 'react';
 import clsx from 'clsx';
 
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+
 import { convertAutoComplete } from '../input/utils';
 import { getBaseProps } from '../internal/base-component';
 import { useFormFieldContext } from '../internal/context/form-field-context';
 import { fireKeyboardEvent, fireNonCancelableEvent } from '../internal/events';
 import useForwardFocus from '../internal/hooks/forward-focus';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { GeneratedAnalyticsMetadataTextareaComponent } from './analytics-metadata/interfaces';
 import { TextareaProps } from './interfaces';
 
 import styles from './styles.css.js';
@@ -89,8 +92,21 @@ const Textarea = React.forwardRef(
       attributes.spellCheck = 'false';
     }
 
+    const componentAnalyticsMetadata: GeneratedAnalyticsMetadataTextareaComponent = {
+      name: 'awsui.Textarea',
+      label: 'textarea',
+      properties: {
+        value: value || '',
+      },
+    };
+
     return (
-      <span {...baseProps} className={clsx(styles.root, baseProps.className)} ref={__internalRootRef}>
+      <span
+        {...baseProps}
+        className={clsx(styles.root, baseProps.className)}
+        ref={__internalRootRef}
+        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}
+      >
         <textarea ref={textareaRef} id={controlId} {...attributes} />
       </span>
     );

Original file line number	Diff line number	Diff line change
`@@ -100,6 +100,7 @@ const Input = React.forwardRef(`
`100`	`100`	`}}`
`101`	`101`	`className={clsx(styles.root, baseProps.className)}`
`102`	`102`	`__inheritFormFieldProps={true}`
	`103`	`+ __injectAnalyticsComponentMetadata={true}`
`103`	`104`	`/>`
`104`	`105`	`);`
`105`	`106`	`}`