feat: Add label analytics metadata to Select and Multiselect component (#4185)

Author: NathanZlion

src/multiselect/__tests__/analytics-metadata.test.tsx

@@ -71,6 +71,7 @@ const getMetadataContexts = (
             disabled: disabled ? 'true' : 'false',
             selectedOptionsCount: `${selectedOptionsCount}`,
             selectedOptionsValues: selectedOptions.map(option => option.value) as Array<string>,
+            selectedOptions: selectedOptions.map(option => option.label ?? option.value) as Array<string>,
           },
         },
       },

src/multiselect/analytics-metadata/interfaces.ts

@@ -26,5 +26,6 @@ export interface GeneratedAnalyticsMetadataMultiselectComponent {
     disabled: string;
     selectedOptionsCount: string;
     selectedOptionsValues: Array<string>;
+    selectedOptions: Array<string>;
   };
 }

src/multiselect/index.tsx

@@ -57,6 +57,11 @@ const Multiselect = React.forwardRef(
         selectedOptionsValues: selectedOptions
           .filter(option => option.value !== undefined)
           .map(option => `${option.value}`),
+        selectedOptions: selectedOptions
+          .filter(option => option.value !== undefined)
+          // fallback on value when label's undefined because in the dropdown if there's no label
+          // the value will be shown.
+          .map(option => `${option.label ?? option.value}`),
       },
     };
 

src/select/__tests__/analytics-metadata.test.tsx

@@ -35,7 +35,8 @@ function renderSelect(props: Partial<SelectProps>) {
 const getMetadataContexts = (
   label = 'select with metadata',
   disabled: boolean = false,
-  selectedOptionValue = 'null'
+  selectedOptionValue = 'null',
+  selectedOption = 'null'
 ) => {
   const metadata: GeneratedAnalyticsMetadataFragment = {
     contexts: [
@@ -47,6 +48,7 @@ const getMetadataContexts = (
           properties: {
             disabled: disabled ? 'true' : 'false',
             selectedOptionValue,
+            selectedOption,
           },
         },
       },
@@ -140,13 +142,13 @@ describe('Select renders correct analytics metadata', () => {
     test('and defined value', () => {
       const wrapper = renderSelect({ selectedOption: { value: 'value1' } });
       expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual({
-        ...getMetadataContexts(undefined, undefined, 'value1'),
+        ...getMetadataContexts(undefined, undefined, 'value1', 'value1'),
       });
     });
     test('and undefined value', () => {
       const wrapper = renderSelect({ selectedOption: { label: 'label1' } });
       expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual({
-        ...getMetadataContexts(),
+        ...getMetadataContexts(undefined, undefined, 'null', 'label1'),
       });
     });
   });

src/select/analytics-metadata/interfaces.ts

@@ -18,5 +18,6 @@ export interface GeneratedAnalyticsMetadataSelectComponent {
   properties: {
     disabled: string;
     selectedOptionValue: string;
+    selectedOption: string;
   };
 }

src/select/index.tsx

@@ -50,6 +50,8 @@ const Select = React.forwardRef(
       properties: {
         disabled: `${!!externalProps.disabled}`,
         selectedOptionValue: `${externalProps.selectedOption && externalProps.selectedOption.value ? externalProps.selectedOption.value : null}`,
+        // Use label for display if available, fallback to value because that's what gets shown in dropdown when label is not provided
+        selectedOption: `${externalProps.selectedOption?.label ?? externalProps.selectedOption?.value ?? null}`,
       },
     };