import React , { useState } from 'react' ; import { EuiForm } from '@elastic/eui' ; import { Repository , EmptyRepository } from '../../../../common/types' ; import { flatten } from '../../../../common/lib' ; import { RepositoryValidation , validateRepository } from '../../services/validation' ; import { RepositoryFormStepOne } from './step_one' ; import { RepositoryFormStepTwo } from './step_two' ; interface Props { repository : Repository | EmptyRepository ; isManagedRepository ? : boolean ; isEditing ? : boolean ; isSaving : boolean ; saveError ? : React . ReactNode ; clearSaveError : ( ) => void ; onSave : ( repository : Repository | EmptyRepository ) => void ; } export const RepositoryForm = ( { repository : originalRepository , isManagedRepository , isEditing , isSaving , saveError , clearSaveError , onSave , } ) => { const [ currentStep , setCurrentStep ] = useState < 1 | 2 > ( isEditing ? 2 : 1 ) ; const [ repository , setRepository ] = useState < Repository | EmptyRepository > ( { ... originalRepository , settings : { ... originalRepository . settings , } , } ) ; const [ validation , setValidation ] = useState < RepositoryValidation > ( { isValid : true , errors : { } , } ) ; const updateRepository = ( updatedFields ) : void => { const newRepository = { ... repository , ... updatedFields } ; setRepository ( newRepository ) ; } ; const saveRepository = ( ) => { const newValidation = validateRepository ( repository , true ) ; const { isValid } = newValidation ; setValidation ( newValidation ) ; if ( isValid ) { onSave ( repository ) ; } } ; const goToNextStep = ( ) => { const newValidation = validateRepository ( repository , false ) ; const { isValid } = newValidation ; setValidation ( newValidation ) ; if ( isValid ) { setCurrentStep ( 2 ) ; } } ; const goToPreviousStep = ( ) => { if ( isEditing ) { return ; } setValidation ( { isValid : true , errors : { } , } ) ; setCurrentStep ( 1 ) ; clearSaveError ( ) ; } ; const hasValidationErrors = ! validation . isValid ; const validationErrors = Object . entries ( flatten ( validation . errors ) ) . reduce ( ( acc , [ key , value ] ) => { return [ ... acc , value ] ; } , [ ] ) ; const renderStepOne = ( ) => ( < RepositoryFormStepOne repository = { repository } onNext = { ( ) => goToNextStep ( ) } updateRepository = { updateRepository } validation = { validation } / > ) ; const renderStepTwo = ( ) => ( < RepositoryFormStepTwo repository = { repository as Repository } isManagedRepository = { isManagedRepository } isEditing = { isEditing } isSaving = { isSaving } onSave = { saveRepository } updateRepository = { updateRepository } validation = { validation } saveError = { saveError } onBack = { ( ) => goToPreviousStep ( ) } />); return ( < EuiForm isInvalid = { hasValidationErrors } error = { validationErrors } data - test - subj = "repositoryForm" > { currentStep === 1 && ! isEditing ? renderStepOne ( ) : renderStepTwo ( ) } < /EuiForm>); } ; RepositoryForm . defaultProps = { isEditing : false , isSaving : false , } ;