change componentConfiguration to object

src/internal/analytics/interfaces.ts

@@ -182,10 +182,15 @@ export interface IPerformanceMetrics {
   taskCompletionData: TaskCompletionDataMethod;
 }
 
+type JSONValue = string | number | boolean | null | undefined;
+export interface JSONObject {
+  [key: string]: JSONObject | JSONValue;
+}
+
 export interface ComponentMountedProps {
   componentName: string;
   taskInteractionId?: string;
-  componentConfiguration: string | undefined;
+  componentConfiguration: JSONObject;
 }
 
 export interface ComponentUpdatedProps extends ComponentMountedProps {

src/internal/hooks/use-table-interaction-metrics/__tests__/use-table-interaction-metrics.test.tsx

@@ -19,7 +19,7 @@ import { mockPerformanceMetrics } from '../../../analytics/__tests__/mocks';
 type RenderProps = Partial<UseTableInteractionMetricsProps>;
 
 const defaultProps = {
-  getComponentConfiguration: () => '',
+  getComponentConfiguration: () => ({}),
   getComponentIdentifier: () => 'My resources',
   itemCount: 10,
   loading: undefined,
@@ -73,7 +73,7 @@ describe('useTableInteractionMetrics', () => {
     expect(componentMounted).toHaveBeenCalledWith({
       taskInteractionId: expect.any(String),
       componentName: 'table',
-      componentConfiguration: '',
+      componentConfiguration: {},
     });
   });
 
@@ -138,7 +138,7 @@ describe('useTableInteractionMetrics', () => {
         taskInteractionId: expect.any(String),
         componentName: 'table',
         actionType: 'filter',
-        componentConfiguration: '',
+        componentConfiguration: {},
       });
     });
 
@@ -227,19 +227,19 @@ describe('useTableInteractionMetrics', () => {
 
     test('componentConfiguration is added to the component updated metrics', () => {
       const { setLastUserAction, rerender } = renderUseTableInteractionMetricsHook({});
-      const componentConfigurationValue = '{filterText = test}';
+      const componentConfiguration = { filterText: 'test' };
       setLastUserAction('filter');
       rerender({ loading: true });
       rerender({
         loading: false,
-        getComponentConfiguration: () => componentConfigurationValue,
+        getComponentConfiguration: () => componentConfiguration,
       });
 
       expect(ComponentMetrics.componentUpdated).toHaveBeenCalledTimes(1);
       expect(ComponentMetrics.componentUpdated).toHaveBeenCalledWith(
         expect.objectContaining({
           actionType: 'filter',
-          componentConfiguration: componentConfigurationValue,
+          componentConfiguration,
         })
       );
     });

src/internal/hooks/use-table-interaction-metrics/index.ts

@@ -4,6 +4,7 @@
 import { useEffect, useRef } from 'react';
 
 import { ComponentMetrics, PerformanceMetrics } from '../../analytics';
+import { JSONObject } from '../../analytics/interfaces';
 import { useEffectOnUpdate } from '../use-effect-on-update';
 import { useRandomId } from '../use-unique-id';
 
@@ -35,7 +36,7 @@ export interface UseTableInteractionMetricsProps {
   loading: boolean | undefined;
   itemCount: number;
   getComponentIdentifier: () => string | undefined;
-  getComponentConfiguration: () => string | undefined;
+  getComponentConfiguration: () => JSONObject;
   interactionMetadata: () => string;
 }
 

src/table/internal.tsx

@@ -223,7 +223,7 @@ const InternalTable = React.forwardRef(
       const filterData = filterRef.current;
       const paginationData = paginationRef.current;
 
-      return JSON.stringify({
+      return {
         variant,
         flowType: rest.analyticsMetadata?.flowType,
         instanceIdentifier: analyticsMetadata?.instanceIdentifier,
@@ -238,7 +238,7 @@ const InternalTable = React.forwardRef(
         totalNumberOfResources: paginationData.totalPageCount,
         resourcesPerPage: allRows?.length || 0,
         resourcesSelected: selectedItems?.length > 0,
-      });
+      };
     };
 
     const { setLastUserAction, tableInteractionAttributes } = useTableInteractionMetrics({