feat: Add analytics metadata to date input component (#3750)

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

Author: fralongo

src/date-input/__tests__/analytics-metadata.test.tsx

@@ -0,0 +1,84 @@
+// 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 DateInput, { DateInputProps } from '../../../lib/components/date-input';
+import FormField from '../../../lib/components/form-field';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
+function renderDateInput(props: Partial<DateInputProps>) {
+  const renderResult = render(<DateInput value="" onChange={() => {}} {...props} />);
+  return createWrapper(renderResult.container).findDateInput()!;
+}
+
+const getComponentMetadata = (label: string, value: string) => {
+  const metadata: GeneratedAnalyticsMetadataFragment = {
+    contexts: [
+      {
+        type: 'component',
+        detail: {
+          name: 'awsui.DateInput',
+          label,
+          properties: {
+            value,
+          },
+        },
+      },
+    ],
+  };
+  return metadata;
+};
+
+beforeAll(() => {
+  activateAnalyticsMetadata(true);
+});
+
+describe('DateInput renders correct analytics metadata', () => {
+  describe('on the component', () => {
+    test('with aria label', () => {
+      const wrapper = renderDateInput({ value: '2023-12-25', ariaLabel: 'label' });
+      expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getComponentMetadata('label', '2023-12-25'));
+    });
+    test('with empty value', () => {
+      const wrapper = renderDateInput({ ariaLabel: 'label' });
+      expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getComponentMetadata('label', ''));
+    });
+    test('within a form field', () => {
+      const formFieldLabel = 'form-field-label';
+      const renderResult = render(
+        <FormField label={formFieldLabel}>
+          <DateInput value="2023-12-25" onChange={() => {}} />
+        </FormField>
+      );
+      const componentElement = createWrapper(renderResult.container).findDateInput()!.getElement();
+      expect(getGeneratedAnalyticsMetadata(componentElement)).toEqual({
+        contexts: [
+          {
+            type: 'component',
+            detail: {
+              name: 'awsui.DateInput',
+              label: formFieldLabel,
+              properties: {
+                value: '2023-12-25',
+              },
+            },
+          },
+          {
+            type: 'component',
+            detail: {
+              name: 'awsui.FormField',
+              label: formFieldLabel,
+            },
+          },
+        ],
+      });
+    });
+  });
+});

src/date-input/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 GeneratedAnalyticsMetadataDateInputComponent {
+  name: 'awsui.DateInput';
+  label: string;
+  properties: {
+    value: string;
+  };
+}

src/date-input/index.tsx

@@ -15,7 +15,7 @@ const DateInput = React.forwardRef((props: DateInputProps, ref: Ref<DateInputPro
   const baseComponentProps = useBaseComponent('DateInput', {
     props: { autoFocus: props.autoFocus, readOnly: props.readOnly },
   });
-  return <InternalDateInput {...props} {...baseComponentProps} ref={ref} />;
+  return <InternalDateInput {...props} {...baseComponentProps} __injectAnalyticsComponentMetadata={true} ref={ref} />;
 });
 
 applyDisplayName(DateInput, 'DateInput');

src/date-input/internal.tsx

@@ -4,19 +4,25 @@
 import React, { Ref, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+
 import MaskedInput from '../internal/components/masked-input';
 import { fireNonCancelableEvent, NonCancelableCustomEvent } from '../internal/events';
 import useForwardFocus from '../internal/hooks/forward-focus';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { displayToIso, isoToDisplay } from '../internal/utils/date-time';
 import formatDateIso from '../internal/utils/date-time/format-date-iso';
 import formatDateLocalized from '../internal/utils/date-time/format-date-localized';
+import { GeneratedAnalyticsMetadataDateInputComponent } from './analytics-metadata/interfaces';
 import { DateInputProps } from './interfaces';
 import { generateMaskArgs, normalizeIsoDateString } from './utils';
 
 import styles from './styles.css.js';
 
-type InternalDateInputProps = DateInputProps & InternalBaseComponentProps;
+type InternalDateInputProps = DateInputProps &
+  InternalBaseComponentProps & {
+    __injectAnalyticsComponentMetadata?: boolean;
+  };
 
 const InternalDateInput = React.forwardRef(
   (
@@ -30,6 +36,7 @@ const InternalDateInput = React.forwardRef(
       format = 'slashed',
       inputFormat = 'slashed',
       __internalRootRef = null,
+      __injectAnalyticsComponentMetadata = false,
       ...props
     }: InternalDateInputProps,
     ref: Ref<DateInputProps.Ref>
@@ -72,6 +79,14 @@ const InternalDateInput = React.forwardRef(
           : isoToDisplay(isoValue);
     }, [value, isIso, granularity, locale, usesLongLocalizedValue]);
 
+    const componentAnalyticsMetadata: GeneratedAnalyticsMetadataDateInputComponent = {
+      name: 'awsui.DateInput',
+      label: 'input',
+      properties: {
+        value: value || '',
+      },
+    };
+
     return (
       <MaskedInput
         ref={inputRef}
@@ -88,6 +103,9 @@ const InternalDateInput = React.forwardRef(
         showUnmaskedValue={usesLongLocalizedValue}
         autoComplete={false}
         __internalRootRef={__internalRootRef}
+        {...(__injectAnalyticsComponentMetadata
+          ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })
+          : {})}
       />
     );
   }

src/input/internal.tsx

@@ -4,7 +4,10 @@ import React, { Ref, useRef } from 'react';
 import clsx from 'clsx';
 
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
-import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import {
+  copyAnalyticsMetadataAttribute,
+  getAnalyticsMetadataAttribute,
+} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import InternalButton from '../button/internal';
 import { useInternalI18n } from '../i18n/context';
@@ -198,7 +201,7 @@ function InternalInput(
       dir={type === 'email' ? 'ltr' : undefined}
       {...(__injectAnalyticsComponentMetadata
         ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })
-        : {})}
+        : copyAnalyticsMetadataAttribute(rest))}
     >
       {__leftIcon && (
         <span onClick={__onLeftIconClick} className={styles['input-icon-left']}>