chore: Add value in RadioGroup and Tiles analytics metadata (#3668)

fralongo · Francesco Longo · web-flow · commit b29a2bcd312a · 2025-07-21T08:22:01.000Z
Co-authored-by: Francesco Longo &lt;flongo@amazon.de&gt;
diff --git a/src/radio-group/__tests__/analytics-metadata.test.tsx b/src/radio-group/__tests__/analytics-metadata.test.tsx
@@ -3,10 +3,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import {
-  activateAnalyticsMetadata,
-  GeneratedAnalyticsMetadataFragment,
-} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import { activateAnalyticsMetadata } 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';
@@ -35,7 +32,13 @@ function renderRadioGroup(props: RadioGroupProps) {
   return createWrapper(renderResult.container).findRadioGroup()!;
 }
 
-const getMetadata = (label: string, position: string, value: string, disabled?: boolean) => {
+const getMetadata = (
+  label: string,
+  position: string,
+  value: string,
+  disabled: boolean = false,
+  currentValue: string | null
+) => {
   const eventMetadata = {
     action: 'select',
     detail: {
@@ -45,13 +48,16 @@ const getMetadata = (label: string, position: string, value: string, disabled?:
     },
   };
 
-  let metadata: GeneratedAnalyticsMetadataFragment = {
+  let metadata = {
     contexts: [
       {
         type: 'component',
         detail: {
           name: 'awsui.RadioGroup',
           label: componentLabel,
+          properties: {
+            value: `${currentValue}`,
+          },
         },
       },
     ],
@@ -71,19 +77,25 @@ describe('Checkbox renders correct analytics metadata', () => {
 
     validateComponentNameAndLabels(wrapper.findInputByValue('second')!.getElement(), labels);
     expect(getGeneratedAnalyticsMetadata(wrapper.findInputByValue('second')!.getElement())).toEqual(
-      getMetadata('Second choice', '2', 'second', false)
+      getMetadata('Second choice', '2', 'second', false, 'second')
     );
     validateComponentNameAndLabels(wrapper.findInputByValue('first')!.getElement(), labels);
     expect(getGeneratedAnalyticsMetadata(wrapper.findInputByValue('first')!.getElement())).toEqual(
-      getMetadata('First choice', '2', 'first', true)
+      getMetadata('First choice', '2', 'first', true, 'second')
+    );
+  });
+  test('with null value', () => {
+    const wrapper = renderRadioGroup({ value: null });
+    expect(getGeneratedAnalyticsMetadata(wrapper.findInputByValue('second')!.getElement())).toEqual(
+      getMetadata('Second choice', '2', 'second', false, null)
     );
   });
   test('readonly', () => {
     const wrapper = renderRadioGroup({ value: 'second', readOnly: true });
 
     validateComponentNameAndLabels(wrapper.findInputByValue('second')!.getElement(), labels);
     expect(getGeneratedAnalyticsMetadata(wrapper.findInputByValue('second')!.getElement())).toEqual(
-      getMetadata('Second choice', '2', 'second', true)
+      getMetadata('Second choice', '2', 'second', true, 'second')
     );
   });
   describe('when rendered in a form field', () => {
@@ -101,6 +113,9 @@ describe('Checkbox renders correct analytics metadata', () => {
             detail: {
               name: 'awsui.RadioGroup',
               label: 'form field label',
+              properties: {
+                value: '2',
+              },
             },
           },
           {
@@ -127,6 +142,9 @@ describe('Checkbox renders correct analytics metadata', () => {
             detail: {
               name: 'awsui.RadioGroup',
               label: 'aria label',
+              properties: {
+                value: '2',
+              },
             },
           },
           {
diff --git a/src/radio-group/analytics-metadata/interfaces.ts b/src/radio-group/analytics-metadata/interfaces.ts
@@ -15,4 +15,7 @@ export interface GeneratedAnalyticsMetadataRadioGroupSelect {
 export interface GeneratedAnalyticsMetadataRadioGroupComponent {
   name: 'awsui.RadioGroup';
   label: string | LabelIdentifier;
+  properties: {
+    value: string;
+  };
 }
diff --git a/src/radio-group/index.tsx b/src/radio-group/index.tsx
@@ -24,6 +24,9 @@ const RadioGroup = React.forwardRef((props: RadioGroupProps, ref: React.Ref<Radi
         component: {
           name: 'awsui.RadioGroup',
           label: { root: 'self' },
+          properties: {
+            value: `${props.value}`,
+          },
         } as GeneratedAnalyticsMetadataRadioGroupComponent,
       })}
     />
diff --git a/src/tiles/__tests__/analytics-metadata.test.tsx b/src/tiles/__tests__/analytics-metadata.test.tsx
@@ -37,7 +37,13 @@ function renderTiles(props: TilesProps) {
   return createWrapper(renderResult.container).findTiles()!;
 }
 
-const getMetadata = (label: string, position: string, value: string, disabled?: boolean) => {
+const getMetadata = (
+  label: string,
+  position: string,
+  value: string,
+  disabled: boolean = false,
+  currentValue: string | null
+) => {
   const eventMetadata = {
     action: 'select',
     detail: {
@@ -54,6 +60,9 @@ const getMetadata = (label: string, position: string, value: string, disabled?:
         detail: {
           name: 'awsui.Tiles',
           label: componentLabel,
+          properties: {
+            value: `${currentValue}`,
+          },
         },
       },
     ],
@@ -74,20 +83,26 @@ describe('Tiles renders correct analytics metadata', () => {
     // in the whole tile
     validateComponentNameAndLabels(wrapper.findItemByValue('second')!.getElement(), labels);
     expect(getGeneratedAnalyticsMetadata(wrapper.findItemByValue('second')!.getElement())).toEqual(
-      getMetadata('Second choice', '2', 'second', false)
+      getMetadata('Second choice', '2', 'second', false, 'second')
     );
     // in the radio within the tile
     validateComponentNameAndLabels(wrapper.findInputByValue('first')!.getElement(), labels);
     expect(getGeneratedAnalyticsMetadata(wrapper.findInputByValue('first')!.getElement())).toEqual(
-      getMetadata('First choice', '2', 'first', true)
+      getMetadata('First choice', '2', 'first', true, 'second')
+    );
+  });
+  test('with null value', () => {
+    const wrapper = renderTiles({ value: null });
+    expect(getGeneratedAnalyticsMetadata(wrapper.findItemByValue('second')!.getElement())).toEqual(
+      getMetadata('Second choice', '2', 'second', false, null)
     );
   });
   test('readonly', () => {
     const wrapper = renderTiles({ value: 'second', readOnly: true });
 
     validateComponentNameAndLabels(wrapper.findInputByValue('second')!.getElement(), labels);
     expect(getGeneratedAnalyticsMetadata(wrapper.findInputByValue('second')!.getElement())).toEqual(
-      getMetadata('Second choice', '2', 'second', true)
+      getMetadata('Second choice', '2', 'second', true, 'second')
     );
   });
   describe('when rendered in a form field', () => {
@@ -105,6 +120,9 @@ describe('Tiles renders correct analytics metadata', () => {
             detail: {
               name: 'awsui.Tiles',
               label: 'form field label',
+              properties: {
+                value: '2',
+              },
             },
           },
           {
@@ -131,6 +149,9 @@ describe('Tiles renders correct analytics metadata', () => {
             detail: {
               name: 'awsui.Tiles',
               label: 'aria label',
+              properties: {
+                value: '2',
+              },
             },
           },
           {
diff --git a/src/tiles/analytics-metadata/interfaces.ts b/src/tiles/analytics-metadata/interfaces.ts
@@ -15,4 +15,7 @@ export interface GeneratedAnalyticsMetadataTilesSelect {
 export interface GeneratedAnalyticsMetadataTilesComponent {
   name: 'awsui.Tiles';
   label: string | LabelIdentifier;
+  properties: {
+    value: string;
+  };
 }
diff --git a/src/tiles/index.tsx b/src/tiles/index.tsx
@@ -20,6 +20,9 @@ const Tiles = React.forwardRef((props: TilesProps, ref: React.Ref<TilesProps.Ref
   const componentAnalyticsMetadata: GeneratedAnalyticsMetadataTilesComponent = {
     name: 'awsui.Tiles',
     label: { root: 'self' },
+    properties: {
+      value: `${props.value}`,
+    },
   };
   return (
     <InternalTiles

Original file line number	Diff line number	Diff line change
`@@ -15,4 +15,7 @@ export interface GeneratedAnalyticsMetadataRadioGroupSelect {`
`15`	`15`	`export interface GeneratedAnalyticsMetadataRadioGroupComponent {`
`16`	`16`	`name: 'awsui.RadioGroup';`
`17`	`17`	`label: string \| LabelIdentifier;`
	`18`	`+ properties: {`
	`19`	`+ value: string;`
	`20`	`+ };`
`18`	`21`	`}`