fix(1314737): Multiple input in the Boost form is not working correctly

packages/components/src/components/atoms/form/RadioGroup.tsx

@@ -17,7 +17,13 @@ interface IRadioGroupErrorProps extends IFieldErrorProps, IRadioGroupProps {
 }
 
 function RadioGroup(props: IRadioGroupErrorProps): JSX.Element {
-  const { onChange, showError, additionalValidator, ...inputProps } = props
+  const {
+    onChange,
+    showError,
+    additionalValidator,
+    replacementErrorsMessages,
+    ...inputProps
+  } = props
 
   const validator = useCallback<IValidator>(
     (value, event) => {
@@ -32,7 +38,9 @@ function RadioGroup(props: IRadioGroupErrorProps): JSX.Element {
     onChange as IOnChange,
     inputProps.value,
     showError,
-    validator
+    validator,
+    false,
+    replacementErrorsMessages
   )
 
   return (

packages/components/src/components/stateful/FieldGuesser/EditableFieldGuesser.tsx

@@ -18,7 +18,7 @@ import Switch from '../../atoms/form/Switch'
 
 import ReadableFieldGuesser from './ReadableFieldGuesser'
 import EditableDropDownGuesser from './EditableDropDownGuesser'
-import EditableModelConfig from './EditableModelConfig'
+import MultipleInput from './MultipleInput'
 import { IDoubleDatePickerValues } from '../../atoms/form/DoubleDatePickerWithoutError'
 import DoubleDatePicker from '../../atoms/form/DoubleDatePicker'
 import { Box } from '@mui/material'
@@ -257,7 +257,7 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
 
     case DataContentType.MULTIPLEINPUT: {
       return (
-        <EditableModelConfig
+        <MultipleInput
           {...props}
           infoTooltip={infoTooltip}
           value={value as string}

packages/components/src/components/stateful/FieldGuesser/MultipleInput.tsx

@@ -0,0 +1,67 @@
+import React, { SyntheticEvent, useMemo } from 'react'
+import {
+  DataContentType,
+  IFieldGuesserProps,
+  IInputDependencies,
+  valueInitializer,
+} from '@elastic-suite/gally-admin-shared'
+import FieldGuesser from './FieldGuesser'
+
+interface IProps extends Omit<IFieldGuesserProps, 'onChange' | 'value'> {
+  value?: string
+  onChange?: (val: string, event?: SyntheticEvent<Element, Event>) => void
+}
+
+function MultipleInput(props: IProps): JSX.Element {
+  const {
+    multipleInputConfiguration: { inputDependencies },
+    onChange,
+    ...otherProps
+  } = props
+
+  const fields: IInputDependencies[] = useMemo(() => {
+    return (
+      Array.isArray(inputDependencies) ? inputDependencies : [inputDependencies]
+    ).filter(
+      (inputDependencie) =>
+        inputDependencie.value === otherProps.data[inputDependencie.field]
+    )
+  }, [inputDependencies, otherProps.data])
+
+  return (
+    <>
+      {fields.map((field) => {
+        const value = otherProps.value
+          ? JSON.parse(otherProps.value as string)?.[field.jsonKeyValue] ??
+            valueInitializer(field.input)
+          : valueInitializer(field.input)
+
+        function handleChange(
+          _name: string,
+          value: unknown,
+          event?: React.SyntheticEvent<Element, Event>
+        ): void {
+          const newValue: Record<string, unknown> = otherProps.value
+            ? JSON.parse(otherProps.value as string)
+            : {}
+          newValue[field?.jsonKeyValue] = value
+          onChange(JSON.stringify(newValue), event)
+        }
+
+        return (
+          <FieldGuesser
+            key={field.jsonKeyValue}
+            {...otherProps}
+            input={field.input as DataContentType}
+            editable
+            id={field.input}
+            value={value}
+            onChange={handleChange}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+export default MultipleInput

packages/shared/src/services/hydra.ts

@@ -233,6 +233,12 @@ export function inputInitializer(input: string): unknown {
     case 'ruleEngine':
       return '{"type":"combination","operator":"all","value":"true","children":[]}'
 
+    case 'rangeDate':
+      return {
+        fromDate: null,
+        toDate: null,
+      }
+
     default:
       return ''
   }
@@ -247,6 +253,7 @@ export function valueInitializer(type: string, input?: string): unknown {
     case 'select':
       return []
 
+    case 'number':
     case 'integer':
     case 'float':
     case 'slider':

packages/shared/src/types/hydra.ts

@@ -11,7 +11,7 @@ import {
 } from './jsonld'
 import { IOptions } from './option'
 import { IHydraSimpleCatalog } from './catalog'
-// import { IFieldCondition } from './field'
+import { IFieldGuesserProps } from './field'
 
 export enum HydraType {
   ARRAY = 'array',
@@ -99,9 +99,10 @@ export interface IInputDependencies {
   value: string
   input: string
   jsonKeyValue: string
+  fieldProps: IFieldGuesserProps
 }
 export interface IMultipleInputConfiguration {
-  inputDependencies: IInputDependencies[]
+  inputDependencies: IInputDependencies[] | IInputDependencies
 }
 
 export interface IMultipleValueFormat {