import { FormattedMessage } from '@osd/i18n/react' ; import React , { Fragment } from 'react' ; import { EuiText , EuiButton } from '@elastic/eui' ; import { VisTypeAlias } from '../../vis_types' ; interface Props { promotedTypes : VisTypeAlias [ ] ; onPromotionClicked : ( visType : VisTypeAlias ) => void ; } export function NewVisHelp ( props ) { return ( < EuiText > < p > < FormattedMessage id = "visualizations.newVisWizard.helpText" defaultMessage = "Start creating your visualization by selecting a type for that visualization." / > < /p> { props . promotedTypes . map ( ( t ) => ( < Fragment key = { t . name } > < p > < strong > { t . promotion ! . description } < /strong> < /p> < EuiButton onClick = { ( ) => props . onPromotionClicked ( t ) } fill size = "s" iconType = "popout" iconSide = "right" > { t . promotion ! . buttonText } < /EuiButton> < /Fragment>))} < /EuiText>); }