import React , { useCallback , useState } from 'react' ; import { EuiFlexGroup , EuiFlexItem , EuiButton , EuiButtonEmpty , EuiButtonToggle , EuiToolTip , } from '@elastic/eui' ; import { FormattedMessage } from '@osd/i18n/react' ; import { i18n } from '@osd/i18n' ; import { useDebounce } from 'react-use' ; import { Vis } from 'src/plugins/visualizations/public' ; import { discardChanges , EditorAction } from './state' ; interface DefaultEditorControlsProps { applyChanges ( ) : void ; isDirty : boolean ; isInvalid : boolean ; isTouched : boolean ; dispatch : React . Dispatch < EditorAction > ; vis : Vis ; } function DefaultEditorControls ( { applyChanges , isDirty , isInvalid , isTouched , dispatch , vis , } ) { const { enableAutoApply } = vis . type . editorConfig ; const [ autoApplyEnabled , setAutoApplyEnabled ] = useState ( false ) ; const toggleAutoApply = useCallback ( ( e ) => setAutoApplyEnabled ( e . target . checked ) , [ ] ) ; const onClickDiscard = useCallback ( ( ) => dispatch ( discardChanges ( vis ) ) , [ dispatch , vis ] ) ; useDebounce ( ( ) => { if ( autoApplyEnabled && isDirty ) { applyChanges ( ) ; } } , 300 , [ isDirty , autoApplyEnabled , applyChanges ] ) ; return ( < div className = "visEditorSidebar__controls" > { ! autoApplyEnabled && ( < EuiFlexGroup justifyContent = "spaceBetween" gutterSize = "none" responsive = { false } > < EuiFlexItem grow = { false } > < EuiButtonEmpty data - test - subj = "visualizeEditorResetButton" disabled = { ! isDirty } iconType = "cross" onClick = { onClickDiscard } size = "s" > < FormattedMessage id = "visDefaultEditor.sidebar.discardChangesButtonLabel" defaultMessage = "Discard" / > < /EuiButtonEmpty> < /EuiFlexItem> < EuiFlexItem grow = { false } > { isInvalid && isTouched ? ( < EuiToolTip content = { i18n . translate ( 'visDefaultEditor.sidebar.errorButtonTooltip' , { defaultMessage : 'Errors in the highlighted fields need to be resolved.' , } ) } > < EuiButton color = "danger" iconType = "alert" size = "s" disabled > < FormattedMessage id = "visDefaultEditor.sidebar.updateChartButtonLabel" defaultMessage = "Update" / > < /EuiButton> < /EuiToolTip>) : (<EuiButton data-test-subj="visualizeEditorRenderButton" disabled={!isDirty} fill iconType="play" onClick={applyChanges} size="s"> < FormattedMessage id = "visDefaultEditor.sidebar.updateChartButtonLabel" defaultMessage = "Update" / > < /EuiButton>)} < /EuiFlexItem> < /EuiFlexGroup>)} { enableAutoApply && ( < EuiToolTip title = { autoApplyEnabled ? i18n . translate ( 'visDefaultEditor.sidebar.autoApplyChangesOnLabel' , { defaultMessage : 'Auto apply is on' , } ) : i18n . translate ( 'visDefaultEditor.sidebar.autoApplyChangesOffLabel' , { defaultMessage : 'Auto apply is off' , } ) } content = { i18n . translate ( 'visDefaultEditor.sidebar.autoApplyChangesTooltip' , { defaultMessage : 'Auto updates the visualization on every change.' , } ) } > < EuiButtonToggle label = { i18n . translate ( 'visDefaultEditor.sidebar.autoApplyChangesAriaLabel' , { defaultMessage : 'Auto apply editor changes' , } ) } className = "visEditorSidebar__autoApplyButton" data - test - subj = "visualizeEditorAutoButton" fill = { autoApplyEnabled } iconType = "refresh" isSelected = { autoApplyEnabled } onChange = { toggleAutoApply } size = "s" isIconOnly / > < /EuiToolTip>)} < /div>); } export { DefaultEditorControls } ;