import React from 'react' ; import { EuiModal , EuiOverlayMask } from '@elastic/eui' ; import { i18n } from '@osd/i18n' ; import { METRIC_TYPE , UiStatsMetricType } from '@osd/analytics' ; import { ApplicationStart , IUiSettingsClient , SavedObjectsStart } from '../../../../core/public' ; import { SearchSelection } from './search_selection' ; import { TypeSelection } from './type_selection' ; import { TypesStart , VisType , VisTypeAlias } from '../vis_types' ; import { UsageCollectionSetup } from '../../../usage_collection/public' ; import { EmbeddableStateTransfer } from '../../../embeddable/public' ; import { VISUALIZE_ENABLE_LABS_SETTING } from '../../common/constants' ; interface TypeSelectionProps { isOpen : boolean ; onClose : ( ) => void ; visTypesRegistry : TypesStart ; editorParams ? : string [ ] ; addBasePath : ( path : string ) => string ; uiSettings : IUiSettingsClient ; savedObjects : SavedObjectsStart ; usageCollection ? : UsageCollectionSetup ; application : ApplicationStart ; outsideVisualizeApp ? : boolean ; stateTransfer ? : EmbeddableStateTransfer ; originatingApp ? : string ; } interface TypeSelectionState { showSearchVisModal : boolean ; visType ? : VisType ; } const basePath = `/create?` ; const baseUrl = `/app/visualize#${ basePath }` ; class NewVisModal extends React . Component < TypeSelectionProps , TypeSelectionState > { public static defaultProps = { editorParams : [ ] , } ; private readonly isLabsEnabled : boolean ; private readonly trackUiMetric : ( ( type : UiStatsMetricType , eventNames : string | string [ ] , count ? : number ) => void ) | undefined ; constructor ( props ) { super ( props ) ; this . isLabsEnabled = props . uiSettings . get ( VISUALIZE_ENABLE_LABS_SETTING ) ; this . state = { showSearchVisModal : false , } ; this . trackUiMetric = this . props . usageCollection ?. reportUiStats . bind ( this . props . usageCollection , 'visualize' ) ; } public render ( ) { if ( ! this . props . isOpen ) { return null ; } const visNewVisDialogAriaLabel = i18n . translate ( 'visualizations.newVisWizard.helpTextAriaLabel' , { defaultMessage : 'Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further.' , } ) ; const selectionModal = this . state . showSearchVisModal && this . state . visType ? ( < EuiModal onClose = { this . onCloseModal } className = "visNewVisSearchDialog" > < SearchSelection onSearchSelected = { this . onSearchSelected } visType = { this . state . visType } uiSettings = { this . props . uiSettings } savedObjects = { this . props . savedObjects } / > < /EuiModal>) : (<EuiModal onClose={this.onCloseModal} className="visNewVisDialog" aria-label={visNewVisDialogAriaLabel}> < TypeSelection showExperimental = { this . isLabsEnabled } onVisTypeSelected = { this . onVisTypeSelected } visTypesRegistry = { this . props . visTypesRegistry } addBasePath = { this . props . addBasePath } / > < /EuiModal>); return < EuiOverlayMask > { selectionModal } < /EuiOverlayMask>; } private onCloseModal = ( ) => { this . setState ( { showSearchVisModal : false } ) ; this . props . onClose ( ) ; } ; private onVisTypeSelected = ( visType ) => { if ( ! ( 'aliasPath' in visType ) && visType . requiresSearch && visType . options . showIndexSelection ) { this . setState ( { showSearchVisModal : true , visType , } ) ; } else { this . redirectToVis ( visType ) ; } } ; private onSearchSelected = ( searchId , searchType ) => { this . redirectToVis ( this . state . visType ! , searchType , searchId ) ; } ; private redirectToVis ( visType , searchType ? , searchId ? ) { if ( this . trackUiMetric ) { this . trackUiMetric ( METRIC_TYPE . CLICK , visType . name ) ; } let params ; if ( 'aliasPath' in visType ) { params = visType . aliasPath ; this . props . onClose ( ) ; this . navigate ( visType . aliasApp , visType . aliasPath ) ; return ; } params = [ `type=${ encodeURIComponent ( visType . name ) }` ] ; if ( searchType ) { params . push ( `${ searchType === 'search' ? 'savedSearchId' : 'indexPattern' }=${ searchId }` ) ; } params = params . concat ( this . props . editorParams ! ) ; this . props . onClose ( ) ; if ( this . props . outsideVisualizeApp ) { this . navigate ( 'visualize' , `#${ basePath }${ params . join ( '&' ) }` ) ; } else { location . assign ( this . props . addBasePath ( `${ baseUrl }${ params . join ( '&' ) }` ) ) ; } } private navigate ( appId , params ) { if ( this . props . stateTransfer && this . props . originatingApp ) { this . props . stateTransfer . navigateToEditor ( appId , { path : params , state : { originatingApp : this . props . originatingApp , } , } ) ; } else { this . props . application . navigateToApp ( appId , { path : params , } ) ; } } } export { NewVisModal } ;