[GEN-2208]: fix destination field handling for "multi input" (#2188)

This pull request includes changes to improve the handling and parsing
of JSON data in the dynamic fields and form data for destinations in the
frontend web application. The most important changes include adding the
`safeJsonParse` utility function to handle JSON parsing safely and
refactoring the components to use this function.

Improvements to JSON parsing:

*
[`frontend/webapp/containers/main/destinations/destination-form-body/dynamic-fields/index.tsx`](diffhunk://#diff-c17889e1ffea148a206f57df5da9f8cc755e7e522a9057a339f6887c01ed5815L3-R3):
Added the `safeJsonParse` utility function to the imports.
*
[`frontend/webapp/containers/main/destinations/destination-form-body/dynamic-fields/index.tsx`](diffhunk://#diff-c17889e1ffea148a206f57df5da9f8cc755e7e522a9057a339f6887c01ed5815L34-R52):
Updated the `InputList` and `KeyValueInputsList` components to use
`safeJsonParse` for safely parsing JSON values.

Refactoring:

*
[`frontend/webapp/hooks/destinations/useDestinationFormData.ts`](diffhunk://#diff-74e478b5171cbecdf7abf376e9bc1428c38d585bc6252dc463216f9869bf9f77L36-L50):
Removed redundant parsing logic for `MULTI_INPUT` component type,
simplifying the code.
*
[`frontend/webapp/hooks/destinations/useDestinationFormData.ts`](diffhunk://#diff-74e478b5171cbecdf7abf376e9bc1428c38d585bc6252dc463216f9869bf9f77R107-R108):
Added a console log statement to debug the parsed fields in the
`useDestinationFormData` function.

frontend/webapp/containers/main/destinations/destination-form-body/dynamic-fields/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { DynamicField } from '@/types';
-import { compareCondition, INPUT_TYPES } from '@/utils';
+import { compareCondition, INPUT_TYPES, safeJsonParse } from '@/utils';
 import { Dropdown, Input, TextArea, InputList, KeyValueInputsList, Checkbox } from '@/reuseable-components';
 
 interface Props {
@@ -31,9 +31,25 @@ export const DestinationDynamicFields: React.FC<Props> = ({ fields, onChange, fo
           />
         );
       case INPUT_TYPES.MULTI_INPUT:
-        return <InputList key={field.name} {...rest} onChange={(value: string[]) => onChange(field.name, JSON.stringify(value))} errorMessage={formErrors[field.name]} />;
+        return (
+          <InputList
+            key={field.name}
+            {...rest}
+            value={typeof rest.value === 'string' ? safeJsonParse(rest.value, []) : rest.value}
+            onChange={(value) => onChange(field.name, JSON.stringify(value))}
+            errorMessage={formErrors[field.name]}
+          />
+        );
       case INPUT_TYPES.KEY_VALUE_PAIR:
-        return <KeyValueInputsList key={field.name} {...rest} onChange={(value) => onChange(field.name, JSON.stringify(value))} errorMessage={formErrors[field.name]} />;
+        return (
+          <KeyValueInputsList
+            key={field.name}
+            {...rest}
+            value={typeof rest.value === 'string' ? safeJsonParse(rest.value, []) : rest.value}
+            onChange={(value) => onChange(field.name, JSON.stringify(value))}
+            errorMessage={formErrors[field.name]}
+          />
+        );
       case INPUT_TYPES.TEXTAREA:
         return <TextArea key={field.name} {...rest} onChange={(e) => onChange(field.name, e.target.value)} errorMessage={formErrors[field.name]} />;
       case INPUT_TYPES.CHECKBOX:

frontend/webapp/hooks/destinations/useDestinationFormData.ts

@@ -33,21 +33,6 @@ const buildFormDynamicFields = (fields: DestinationDetailsField[]): DynamicField
       const { name, componentType, componentProperties, displayName, initialValue, renderCondition } = field;
 
       switch (componentType) {
-        case INPUT_TYPES.MULTI_INPUT: {
-          const componentPropertiesJson = safeJsonParse<{ [key: string]: string }>(componentProperties, {});
-          const initialValuesJson = safeJsonParse<string[]>(initialValue, []);
-
-          return {
-            name,
-            componentType,
-            title: displayName,
-            value: initialValuesJson,
-            initialValues: initialValuesJson,
-            renderCondition,
-            ...componentPropertiesJson,
-          };
-        }
-
         case INPUT_TYPES.DROPDOWN: {
           const componentPropertiesJson = safeJsonParse<{ [key: string]: string }>(componentProperties, {});
           const options = Array.isArray(componentPropertiesJson.values)