import { EuiButton , EuiButtonEmpty , EuiForm , EuiFormRow , EuiModalBody , EuiModalFooter , EuiModalHeader , EuiModalHeaderTitle , EuiSwitch , } from '@elastic/eui' ; import { FormattedMessage } from '@osd/i18n/react' ; import React , { Component } from 'react' ; import { IIndexPattern } from '../..' ; import { getDisplayValueFromFilter , Filter } from '../../../common' ; import { FilterLabel } from '../filter_bar' ; import { mapAndFlattenFilters } from '../../query' ; interface Props { filters : Filter [ ] ; indexPatterns : IIndexPattern [ ] ; onCancel : ( ) => void ; onSubmit : ( filters : Filter [ ] ) => void ; } interface State { isFilterSelected : boolean [ ] ; } export default class ApplyFiltersPopoverContent extends Component < Props , State > { public static defaultProps = { filters : [ ] , } ; constructor ( props ) { super ( props ) ; this . state = { isFilterSelected : props . filters . map ( ( ) => true ) , } ; } private getLabel ( filter ) { const valueLabel = getDisplayValueFromFilter ( filter , this . props . indexPatterns ) ; return < FilterLabel filter = { filter } valueLabel = { valueLabel } / > ; } public render ( ) { if ( this . props . filters . length === 0 ) { return '' ; } const mappedFilters = mapAndFlattenFilters ( this . props . filters ) ; const form = ( < EuiForm > { mappedFilters . map ( ( filter , i ) => ( < EuiFormRow key = { i } > < EuiSwitch label = { this . getLabel ( filter ) } checked = { this . isFilterSelected ( i ) } onChange = { ( ) => this . toggleFilterSelected ( i ) } /> < /EuiFormRow>))} < /EuiForm>); return ( < React . Fragment > < EuiModalHeader > < EuiModalHeaderTitle > < FormattedMessage id = "data.filter.applyFilters.popupHeader" defaultMessage = "Select filters to apply" / > < /EuiModalHeaderTitle> < /EuiModalHeader> < EuiModalBody > { form } < /EuiModalBody> < EuiModalFooter > < EuiButtonEmpty onClick = { this . props . onCancel } > < FormattedMessage id = "data.filter.applyFiltersPopup.cancelButtonLabel" defaultMessage = "Cancel" / > < /EuiButtonEmpty> < EuiButton onClick = { this . onSubmit } data - test - subj = "applyFiltersPopoverButton" fill > < FormattedMessage id = "data.filter.applyFiltersPopup.saveButtonLabel" defaultMessage = "Apply" / > < /EuiButton> < /EuiModalFooter> < /React.Fragment>); } private isFilterSelected = ( i ) => { return this . state . isFilterSelected [ i ] ; } ; private toggleFilterSelected = ( i ) => { const isFilterSelected = [ ... this . state . isFilterSelected ] ; isFilterSelected [ i ] = ! isFilterSelected [ i ] ; this . setState ( { isFilterSelected } ) ; } ; private onSubmit = ( ) => { const selectedFilters = this . props . filters . filter ( ( filter , i ) => this . state . isFilterSelected [ i ] ) ; this . props . onSubmit ( selectedFilters ) ; } ; }