import React , { Fragment } from 'react' ; import uuid from 'uuid/v4' ; import { EuiButtonEmpty , EuiTitle , EuiSpacer , EuiToolTip , EuiTextAlign , EuiCallOut , } from '@elastic/eui' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { i18n } from '@kbn/i18n' ; import { Join } from './resources/join' ; import { IVectorLayer } from '../../../classes/layers/vector_layer' ; import { JoinDescriptor } from '../../../../common/descriptor_types' ; import { SOURCE_TYPES } from '../../../../common/constants' ; export interface JoinField { label : string ; name : string ; } export interface Props { joins : JoinDescriptor [ ] ; layer : IVectorLayer ; layerDisplayName : string ; leftJoinFields : JoinField [ ] ; onChange : ( layer : IVectorLayer , joins : JoinDescriptor [ ] ) => void ; } export function JoinEditor ( { joins , layer , onChange , leftJoinFields , layerDisplayName } ) { const renderJoins = ( ) => { return joins . map ( ( joinDescriptor , index ) => { const handleOnChange = ( updatedDescriptor ) => { onChange ( layer , [ ... joins . slice ( 0 , index ) , updatedDescriptor , ... joins . slice ( index + 1 ) ] ) ; } ; const handleOnRemove = ( ) => { onChange ( layer , [ ... joins . slice ( 0 , index ) , ... joins . slice ( index + 1 ) ] ) ; } ; if ( joinDescriptor . right . type === SOURCE_TYPES . TABLE_SOURCE ) { throw new Error ( 'PEBKAC - Table sources cannot be edited in the UX and should only be used in MapEmbeddable' ) ; } else { return ( < Fragment key = { index } > < EuiSpacer size = "m" / > < Join join = { joinDescriptor } layer = { layer } onChange = { handleOnChange } onRemove = { handleOnRemove } leftFields = { leftJoinFields } leftSourceName = { layerDisplayName } / > < /Fragment>); } } ) ; } ; const addJoin = ( ) => { onChange ( layer , [ ... joins , { right : { id : uuid ( ) , applyGlobalQuery : true , applyGlobalTime : true , } , } as JoinDescriptor , ] ) ; } ; const renderContent = ( ) => { const disabledReason = layer . getJoinsDisabledReason ( ) ; return disabledReason ? ( < EuiCallOut color = "warning" > { disabledReason } < /EuiCallOut>) : (<Fragment> { renderJoins ( ) } < EuiSpacer size = "s" / > < EuiTextAlign textAlign = "center" > < EuiButtonEmpty onClick = { addJoin } size = "xs" iconType = "plusInCircleFilled" aria - label = { i18n . translate ( 'xpack.maps.layerPanel.joinEditor.addJoinAriaLabel' , { defaultMessage : 'Add join' , } ) } > < FormattedMessage id = "xpack.maps.layerPanel.joinEditor.addJoinButtonLabel" defaultMessage = "Add join" / > < /EuiButtonEmpty> < /EuiTextAlign> < /Fragment>); } ; return ( < div > < EuiTitle size = "xs" > < h5 > < EuiToolTip content = { i18n . translate ( 'xpack.maps.layerPanel.joinEditor.termJoinTooltip' , { defaultMessage : 'Use term joins to augment this layer with properties for data driven styling.' , } ) } > < FormattedMessage id = "xpack.maps.layerPanel.joinEditor.termJoinsTitle" defaultMessage = "Term joins" / > < /EuiToolTip> < /h5> < /EuiTitle> { renderContent ( ) } < /div>); }