import { useFormik } from 'formik' ; import * as yup from 'yup' ; import { useAddAppProxyPortMutation } from '../../generated/graphql' ; import { Button , Modal , ModalOverlay , ModalContent , ModalCloseButton , ModalHeader , ModalBody , ModalFooter , FormControl , FormLabel , Input , FormErrorMessage , SimpleGrid , } from '@chakra-ui/react' ; import { useToast } from '../../ui/toast' ; const createAppProxyPortSchema = yup . object ( ) . shape ( { host : yup . string ( ) . required ( 'Host port is required' ) , container : yup . string ( ) . required ( 'Container port is required' ) , } ) ; interface AddAppProxyPortsProps { appId : string ; appProxyPortsRefetch : ( ) => Promise < any > ; open : boolean ; onClose : ( ) => void ; } export const AddAppProxyPorts = ( { appId , appProxyPortsRefetch , open , onClose , } ) => { const [ addAppProxyPortMutation ] = useAddAppProxyPortMutation ( ) ; const toast = useToast ( ) ; const formik = useFormik < { host : string ; container : string ; } > ( { initialValues : { host : '' , container : '' , } , validateOnChange : true , validationSchema : createAppProxyPortSchema , onSubmit : async ( values ) => { try { await addAppProxyPortMutation ( { variables : { input : { appId , host : values . host , container : values . container , } , } , } ) ; await appProxyPortsRefetch ( ) ; toast . success ( 'Port mapping created successfully' ) ; onClose ( ) ; } catch ( error ) { toast . error ( error . message ) ; } } , } ) ; if ( ! open ) { return null ; } return ( < Modal isOpen = { open } onClose = { onClose } isCentered size = "xl" > < ModalOverlay /> < ModalContent > < ModalHeader > Add port mapping < /ModalHeader> < ModalCloseButton / > < ModalBody > < SimpleGrid columns = { { sm : 1 , md : 2 } } spacing = { 3 } > < FormControl id = "host" isInvalid = { Boolean ( formik . errors . host && formik . touched . host ) } > < FormLabel > Host port : < /FormLabel> < Input name = "host" value = { formik . values . host } onChange = { formik . handleChange } onBlur = { formik . handleBlur } / > < FormErrorMessage > { formik . errors . host } < /FormErrorMessage> < /FormControl> < FormControl id = "container" isInvalid = { Boolean ( formik . errors . container && formik . touched . container ) } > < FormLabel > Container port : < /FormLabel> < Input name = "container" value = { formik . values . container } onChange = { formik . handleChange } onBlur = { formik . handleBlur } / > < FormErrorMessage > { formik . errors . container } < /FormErrorMessage> < /FormControl> < /SimpleGrid> < /ModalBody> < ModalFooter > < Button mr = { 3 } onClick = { onClose } > Cancel < /Button> < Button colorScheme = "red" isLoading = { formik . isSubmitting } onClick = { ( ) => formik . handleSubmit ( ) } > Create < /Button> < /ModalFooter> < /ModalContent> < /Modal>); } ;