import React , { FC } from 'react' ; import { EuiFlexGroup , EuiFlexItem , EuiFormRow , EuiSwitch } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import { SwitchModal } from '../switch_modal' ; import { StepDefineFormHook } from '../step_define' ; export const AdvancedPivotEditorSwitch = ( { advancedPivotEditor : { actions : { setAdvancedEditorSwitchModalVisible , toggleAdvancedEditor } , state : { advancedEditorConfig , advancedEditorConfigLastApplied , isAdvancedEditorSwitchModalVisible , isAdvancedPivotEditorEnabled , isAdvancedPivotEditorApplyButtonEnabled , } , } , } ) => { return ( < EuiFormRow > < EuiFlexGroup gutterSize = "none" > < EuiFlexItem > < EuiSwitch label = { i18n . translate ( 'xpack.transform.stepDefineForm.advancedEditorSwitchLabel' , { defaultMessage : 'Edit JSON config' , } ) } checked = { isAdvancedPivotEditorEnabled } onChange = { ( ) => { if ( isAdvancedPivotEditorEnabled && ( isAdvancedPivotEditorApplyButtonEnabled || advancedEditorConfig !== advancedEditorConfigLastApplied ) ) { setAdvancedEditorSwitchModalVisible ( true ) ; return ; } toggleAdvancedEditor ( ) ; } } data - test - subj = "transformAdvancedPivotEditorSwitch" / > { isAdvancedEditorSwitchModalVisible && ( < SwitchModal onCancel = { ( ) => setAdvancedEditorSwitchModalVisible ( false ) } onConfirm = { ( ) => { setAdvancedEditorSwitchModalVisible ( false ) ; toggleAdvancedEditor ( ) ; } } type = { 'pivot' } / > ) } < /EuiFlexItem> < /EuiFlexGroup> < /EuiFormRow>); } ;