import React , { useEffect , FC } from 'react' ; import { RouteComponentProps } from 'react-router-dom' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { EuiButtonEmpty , EuiCallOut , EuiPageContentBody , EuiPageHeader , EuiSpacer , } from '@elastic/eui' ; import { APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES } from '../../../../common/constants' ; import { useDocumentationLinks } from '../../hooks/use_documentation_links' ; import { useSearchItems } from '../../hooks/use_search_items' ; import { breadcrumbService , docTitleService , BREADCRUMB_SECTION } from '../../services/navigation' ; import { PrivilegesWrapper } from '../../lib/authorization' ; import { Wizard } from './components/wizard' ; type Props = RouteComponentProps < { savedObjectId : string ; } > ; export const CreateTransformSection = ( { match } ) => { useEffect ( ( ) => { breadcrumbService . setBreadcrumbs ( BREADCRUMB_SECTION . CREATE_TRANSFORM ) ; docTitleService . setTitle ( 'createTransform' ) ; } , [ ] ) ; const { esTransform } = useDocumentationLinks ( ) ; const { error : searchItemsError , searchItems } = useSearchItems ( match . params . savedObjectId ) ; const docsLink = ( < EuiButtonEmpty href = { esTransform } target = "_blank" iconType = "help" data - test - subj = "documentationLink" > < FormattedMessage id = "xpack.transform.transformsWizard.transformDocsLinkText" defaultMessage = "Transform docs" / > < /EuiButtonEmpty>); return ( < PrivilegesWrapper privileges = { APP_CREATE_TRANSFORM_CLUSTER_PRIVILEGES } > < EuiPageHeader pageTitle = { < FormattedMessage id = "xpack.transform.transformsWizard.createTransformTitle" defaultMessage = "Create transform" / > } rightSideItems = { [ docsLink ] } bottomBorder / > < EuiSpacer size = "l" / > < EuiPageContentBody data - test - subj = "transformPageCreateTransform" > { searchItemsError !== undefined && ( < > < EuiCallOut title = { searchItemsError } color = "danger" iconType = "alert" / > < EuiSpacer size = "l" / > < />)} { searchItems !== undefined && < Wizard searchItems = { searchItems } />} < /EuiPageContentBody> < /PrivilegesWrapper>); } ;