import { EuiButtonEmpty , EuiDescribedFormGroup , EuiFlexGroup , EuiFlexItem , EuiFormRow , EuiHorizontalRule , EuiPanel , EuiText , EuiTitle , } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import React , { useState } from 'react' ; import { PackagePolicyVars , SettingsRow } from '../typings' ; import { FormRowSetting } from './form_row_setting' ; import { validateSettingValue } from './utils' ; export type FormRowOnChange = ( key : string , value : any ) => void ; function FormRow ( { initialSetting , vars , onChange , } ) { function getSettingFormRow ( row ) { if ( row . type === 'advanced_setting' ) { return ( < AdvancedOptions > { row . settings . map ( ( advancedSetting ) => getSettingFormRow ( advancedSetting ) ) } < /AdvancedOptions>); } const { key } = row ; const configEntry = vars ?. [ key ] ; if ( ! configEntry ) { return null ; } const { value } = configEntry ; const { isValid , message } = validateSettingValue ( row , value ) ; return ( < React . Fragment key = { key } > < EuiDescribedFormGroup title = { < h3 > { row . rowTitle } < /h3>} description={row.rowDescription}> < EuiFormRow label = { row . label } isInvalid = { ! isValid } error = { isValid ? undefined : message } helpText = { < EuiText size = "xs" > { row . helpText } < /EuiText>} labelAppend={<EuiText size="xs" color="subdued"> { row . labelAppend } < /EuiText>}> < FormRowSetting row = { row } onChange = { onChange } value = { value } / > < /EuiFormRow> < /EuiDescribedFormGroup> { row . settings && value && row . settings . map ( ( childSettings ) => getSettingFormRow ( childSettings ) ) } < /React.Fragment>); } return getSettingFormRow ( initialSetting ) ; } export interface SettingsSection { id : string ; title : string ; subtitle ? : string ; settings : SettingsRow [ ] ; } interface Props { settingsSection : SettingsSection ; vars ? : PackagePolicyVars ; onChange : FormRowOnChange ; } export function SettingsForm ( { settingsSection , vars , onChange } ) { const { title , subtitle , settings } = settingsSection ; return ( < EuiPanel > < EuiFlexGroup direction = "column" gutterSize = "s" > < EuiFlexItem > < EuiTitle size = "s" > < h3 > { title } < /h3> < /EuiTitle> < /EuiFlexItem> { subtitle && ( < EuiFlexItem > < EuiText size = "s" color = "subdued" > { subtitle } < /EuiText> < /EuiFlexItem>)} < /EuiFlexGroup> < EuiHorizontalRule margin = "s" / > { settings . map ( ( setting ) => { return FormRow ( { initialSetting : setting , vars , onChange , } ) ; } ) } < /EuiPanel>); } function AdvancedOptions ( { children } ) { const [ isOpen , setIsOpen ] = useState ( false ) ; return ( < > < EuiFlexGroup > < EuiFlexItem /> < EuiFlexItem > < EuiFlexGroup > < EuiFlexItem grow = { false } > < EuiButtonEmpty iconType = { isOpen ? 'arrowDown' : 'arrowRight' } onClick = { ( ) => { setIsOpen ( ( state ) => ! state ) ; } } > { i18n . translate ( 'xpack.apm.fleet_integration.settings.advancedOptionsLavel' , { defaultMessage : 'Advanced options' } ) } < /EuiButtonEmpty> < /EuiFlexItem> < /EuiFlexGroup> < /EuiFlexItem> < /EuiFlexGroup> { isOpen && ( < > < EuiHorizontalRule /> { children } < />)} < />); }