import React from 'react' ; import { i18n } from '@kbn/i18n' ; import { EuiButtonEmpty , EuiFlyoutBody , EuiFlyoutFooter , EuiFlyoutHeader , EuiFlexGroup , EuiFlexItem , EuiTitle , EuiText , EuiTextColor , EuiSpacer , } from '@elastic/eui' ; import { EnrichedDeprecationInfo } from '../../../../../../common/types' ; import { DeprecationFlyoutLearnMoreLink , DeprecationBadge } from '../../../shared' ; export interface DefaultDeprecationFlyoutProps { deprecation : EnrichedDeprecationInfo ; closeFlyout : ( ) => void ; } const i18nTexts = { getFlyoutDescription : ( indexName ) => i18n . translate ( 'xpack.upgradeAssistant.esDeprecations.deprecationDetailsFlyout.secondaryDescription' , { defaultMessage : 'Index: {indexName}' , values : { indexName , } , } ) , closeButtonLabel : i18n . translate ( 'xpack.upgradeAssistant.esDeprecations.deprecationDetailsFlyout.closeButtonLabel' , { defaultMessage : 'Close' , } ) , } ; export const DefaultDeprecationFlyout = ( { deprecation , closeFlyout , } ) => { const { message , url , details , index } = deprecation ; return ( < > < EuiFlyoutHeader hasBorder > < DeprecationBadge isCritical = { deprecation . isCritical } isResolved = { false } / > < EuiSpacer size = "s" / > < EuiTitle size = "s" data - test - subj = "flyoutTitle" > < h2 id = "defaultDeprecationDetailsFlyoutTitle" > { message } < /h2> < /EuiTitle> { index && ( < EuiText data - test - subj = "flyoutDescription" > < p > < EuiTextColor color = "subdued" > { i18nTexts . getFlyoutDescription ( index ) } < /EuiTextColor> < /p> < /EuiText>)} < /EuiFlyoutHeader> < EuiFlyoutBody > < EuiText > < p className = "eui-textBreakWord" > { details } < /p> < p > < DeprecationFlyoutLearnMoreLink documentationUrl = { url } /> < /p> < /EuiText> < /EuiFlyoutBody> < EuiFlyoutFooter > < EuiFlexGroup justifyContent = "spaceBetween" > < EuiFlexItem grow = { false } > < EuiButtonEmpty onClick = { closeFlyout } flush = "left" > { i18nTexts . closeButtonLabel } < /EuiButtonEmpty> < /EuiFlexItem> < /EuiFlexGroup> < /EuiFlyoutFooter> < />); } ;