import React , { FC } from 'react' ; import { EuiForm } from '@elastic/eui' ; import { CreateAnalyticsStepProps } from '../../../analytics_management/hooks/use_create_analytics_form' ; import { AdvancedStepForm } from './advanced_step_form' ; import { AdvancedStepDetails } from './advanced_step_details' ; import { ANALYTICS_STEPS } from '../../page' ; export const AdvancedStep = ( { actions , state , step , setCurrentStep , stepActivated , } ) => { const showForm = step === ANALYTICS_STEPS . ADVANCED ; const showDetails = step !== ANALYTICS_STEPS . ADVANCED && stepActivated === true ; const dataTestSubj = `mlAnalyticsCreateJobWizardAdvancedStep${ showForm ? ' active' : '' }${ showDetails ? ' summary' : '' }` ; return ( < EuiForm data - test - subj = { dataTestSubj } > { showForm && ( < AdvancedStepForm actions = { actions } state = { state } setCurrentStep = { setCurrentStep } / > ) } { showDetails && < AdvancedStepDetails setCurrentStep = { setCurrentStep } state = { state } / > } < /EuiForm>); } ;