feat: Add analytics metadata to FileInput component (#3561)

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

Author: fralongo

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

@@ -0,0 +1,100 @@
+// 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 FileInput, { FileInputProps } from '../../../lib/components/file-input';
+import { GeneratedAnalyticsMetadataFileInputClick } from '../../../lib/components/file-input/analytics-metadata/interfaces';
+import InternalFileInput from '../../../lib/components/file-input/internal';
+import createWrapper from '../../../lib/components/test-utils/dom';
+import { validateComponentNameAndLabels } from '../../internal/__tests__/analytics-metadata-test-utils';
+
+import labels from '../../../lib/components/button/analytics-metadata/styles.css.js';
+
+function renderFileInput(props: Partial<FileInputProps> = {}) {
+  const renderResult = render(<FileInput value={[]} onChange={() => {}} {...props} />);
+  return createWrapper(renderResult.container).findFileInput()!.findTrigger();
+}
+
+const getMetadata = (label: string) => {
+  const analyticsAction: GeneratedAnalyticsMetadataFileInputClick = {
+    action: 'click',
+    detail: { label },
+  };
+  const metadata: GeneratedAnalyticsMetadataFragment = {
+    ...analyticsAction,
+    contexts: [
+      {
+        type: 'component',
+        detail: {
+          name: 'awsui.FileInput',
+          label,
+        },
+      },
+    ],
+  };
+  return metadata;
+};
+
+beforeAll(() => {
+  activateAnalyticsMetadata(true);
+});
+describe('FileInput renders correct analytics metadata', () => {
+  describe('with button variant', () => {
+    test('and children', () => {
+      const wrapper = renderFileInput({ variant: 'button', children: 'Upload files' });
+      validateComponentNameAndLabels(wrapper.getElement(), labels);
+      expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getMetadata('Upload files'));
+    });
+    test('and aria-label', () => {
+      const wrapper = renderFileInput({ variant: 'button', ariaLabel: 'Upload files' });
+      validateComponentNameAndLabels(wrapper.getElement(), labels);
+      expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getMetadata('Upload files'));
+    });
+    test('and both children and aria-label', () => {
+      const wrapper = renderFileInput({ variant: 'button', children: 'Upload files', ariaLabel: 'Another label' });
+      validateComponentNameAndLabels(wrapper.getElement(), labels);
+      expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getMetadata('Upload files'));
+    });
+  });
+  describe('with icon variant', () => {
+    test('and children', () => {
+      const wrapper = renderFileInput({ variant: 'icon', children: 'Upload files' });
+      validateComponentNameAndLabels(wrapper.getElement(), labels);
+      expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getMetadata('Upload files'));
+    });
+    test('and aria-label', () => {
+      const wrapper = renderFileInput({ variant: 'icon', ariaLabel: 'Upload files' });
+      validateComponentNameAndLabels(wrapper.getElement(), labels);
+      expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getMetadata('Upload files'));
+    });
+    test('and both children and aria-label', () => {
+      const wrapper = renderFileInput({ variant: 'icon', children: 'Upload files', ariaLabel: 'Another label' });
+      validateComponentNameAndLabels(wrapper.getElement(), labels);
+      expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getMetadata('Another label'));
+    });
+  });
+});
+describe('Internal FileInput', () => {
+  test('does not render "component" metadata', () => {
+    const renderResult = render(
+      <InternalFileInput value={[]} onChange={() => {}}>
+        inline button text
+      </InternalFileInput>
+    );
+    const wrapper = createWrapper(renderResult.container).findFileInput()!.findTrigger();
+    validateComponentNameAndLabels(wrapper.getElement(), labels);
+    expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual({
+      action: 'click',
+      detail: {
+        label: 'inline button text',
+      },
+    });
+  });
+});

src/file-input/analytics-metadata/interfaces.ts

@@ -0,0 +1,14 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+export interface GeneratedAnalyticsMetadataFileInputClick {
+  action: 'click';
+  detail: {
+    label: string;
+  };
+}
+
+export interface GeneratedAnalyticsMetadataFileInputComponent {
+  name: 'awsui.FileInput';
+  label: string;
+}

src/file-input/index.tsx

@@ -17,7 +17,16 @@ const FileInput = React.forwardRef(
         variant,
       },
     });
-    return <InternalFileInput multiple={multiple} variant={variant} {...props} {...baseComponentProps} ref={ref} />;
+    return (
+      <InternalFileInput
+        multiple={multiple}
+        variant={variant}
+        {...props}
+        {...baseComponentProps}
+        ref={ref}
+        __injectAnalyticsComponentMetadata={true}
+      />
+    );
   }
 );
 

src/file-input/internal.tsx

@@ -5,6 +5,10 @@ import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 
 import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import {
+  GeneratedAnalyticsMetadataFragment,
+  getAnalyticsMetadataAttribute,
+} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import InternalButton from '../button/internal';
 import { useFormFieldContext } from '../contexts/form-field';
@@ -17,13 +21,15 @@ import useForwardFocus from '../internal/hooks/forward-focus';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { joinStrings } from '../internal/utils/strings';
+import { GeneratedAnalyticsMetadataFileInputComponent } from './analytics-metadata/interfaces';
 import { FileInputProps } from './interfaces';
 
 import styles from './styles.css.js';
 
 interface InternalFileInputProps {
   __inputClassName?: string;
   __inputNativeAttributes?: React.InputHTMLAttributes<HTMLInputElement> | Record<`data-${string}`, string>;
+  __injectAnalyticsComponentMetadata?: boolean;
 }
 
 const InternalFileInput = React.forwardRef(
@@ -40,6 +46,7 @@ const InternalFileInput = React.forwardRef(
       __internalRootRef = null,
       __inputClassName,
       __inputNativeAttributes,
+      __injectAnalyticsComponentMetadata,
       ...restProps
     }: FileInputProps & InternalBaseComponentProps & InternalFileInputProps,
     ref: Ref<FileInputProps.Ref>
@@ -104,8 +111,24 @@ const InternalFileInput = React.forwardRef(
 
     const { tabIndex } = useSingleTabStopNavigation(uploadInputRef);
 
+    const analyticsLabel = variant === 'button' && children ? 'button' : 'input';
+    const componentAnalyticsMetadata: GeneratedAnalyticsMetadataFileInputComponent = {
+      name: 'awsui.FileInput',
+      label: analyticsLabel,
+    };
+
+    const analyticsMetadata: GeneratedAnalyticsMetadataFragment = { detail: { label: analyticsLabel } };
+    if (__injectAnalyticsComponentMetadata) {
+      analyticsMetadata.component = componentAnalyticsMetadata;
+    }
+
     return (
-      <div {...baseProps} ref={mergedRef} className={clsx(baseProps.className, styles.root)}>
+      <div
+        {...baseProps}
+        ref={mergedRef}
+        className={clsx(baseProps.className, styles.root)}
+        {...getAnalyticsMetadataAttribute(analyticsMetadata)}
+      >
         {/* This is the actual interactive and accessible file-upload element. */}
         {/* It is visually hidden to achieve the desired UX design. */}
         <input