import React , { Dispatch , SetStateAction , useContext , useEffect , useState , useMemo } from 'react' ; import { EuiFormRow } from '@elastic/eui' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { JobCreatorContext } from '../../../job_creator_context' ; import { CategorizationJobCreator } from '../../../../../common/job_creator' ; import { newJobCapsService } from '../../../../../../../services/new_job_capabilities/new_job_capabilities_service' ; import { CategorizationPerPartitionFieldSelect } from './categorization_per_partition_input' ; export const CategorizationPerPartitionFieldDropdown = ( { setEnablePerPartitionCategorization , } ) => { const { jobCreator : jc , jobCreatorUpdate , jobCreatorUpdated } = useContext ( JobCreatorContext ) ; const jobCreator = jc as CategorizationJobCreator ; const [ categorizationPartitionFieldName , setCategorizationPartitionFieldName ] = useState < string | null > ( jobCreator . categorizationPerPartitionField ) ; const { categoryFields } = newJobCapsService ; const filteredCategories = useMemo ( ( ) => categoryFields . filter ( ( c ) => c . id !== jobCreator . categorizationFieldName ) , [ categoryFields , jobCreatorUpdated ] ) ; useEffect ( ( ) => { jobCreator . categorizationPerPartitionField = categorizationPartitionFieldName ; jobCreatorUpdate ( ) ; } , [ categorizationPartitionFieldName ] ) ; useEffect ( ( ) => { if ( jobCreator . perPartitionCategorization && jobCreator . categorizationPerPartitionField === null && filteredCategories . length > 0 ) { jobCreator . categorizationPerPartitionField = filteredCategories [ 0 ] . id ; } setCategorizationPartitionFieldName ( jobCreator . categorizationPerPartitionField ) ; setEnablePerPartitionCategorization ( jobCreator . perPartitionCategorization ) ; } , [ jobCreatorUpdated ] ) ; return ( < EuiFormRow label = { < FormattedMessage id = "xpack.ml.newJob.wizard.extraStep.categorizationJob.categorizationPerPartitionFieldLabel" defaultMessage = "Partition field" / > } > < CategorizationPerPartitionFieldSelect fields = { filteredCategories } changeHandler = { setCategorizationPartitionFieldName } selectedField = { categorizationPartitionFieldName || '' } /> < /EuiFormRow>); } ;