import React from 'react' ; import type { IALBListenerCertificate } from '../../../index' ; import { AmazonCertificateSelectField } from '../../../index' ; import type { INLBCertificateSelectorProps } from '../network/NLBListeners' ; export function CertificateSelector ( { availableCertificates , certificates , formik , app , certificateTypes , } ) { function certificateTypeChanged ( certificate , newType ) { certificate . type = newType ; updateListeners ( ) ; } function updateListeners ( ) { formik . setFieldValue ( 'listeners' , formik . values . listeners ) ; } function handleCertificateChanged ( certificate , newCertificateName ) { certificate . name = newCertificateName ; updateListeners ( ) ; } function showCertificateSelect ( certificate ) { return certificate . type === 'iam' && certificates && Object . keys ( certificates ) . length > 0 ; } const { values } = formik ; return ( < div className = "wizard-pod-row" > < div className = "wizard-pod-row-title" > Certificate < /div> < div className = "wizard-pod-row-contents" > { availableCertificates . map ( ( certificate , cIndex ) => ( < div key = { cIndex } style = { { width : '100%' , display : 'flex' , flexDirection : 'row' } } > < select className = "form-control input-sm inline-number" style = { { width : '45px' } } value = { certificate . type } onChange = { ( event ) => certificateTypeChanged ( certificate , event . target . value ) } > { certificateTypes . map ( ( t ) => ( < option key = { t } > { t } < /option>))} < /select> { showCertificateSelect ( certificate ) && ( < AmazonCertificateSelectField certificates = { certificates } accountName = { values . credentials } currentValue = { certificate . name } app = { app } onCertificateSelect = { ( value ) => handleCertificateChanged ( certificate , value ) } / > ) } { ! showCertificateSelect ( certificate ) && ( < input className = "form-control input-sm no-spel" style = { { display : 'inline-block' } } type = "text" value = { certificate . name } onChange = { ( event ) => handleCertificateChanged ( certificate , event . target . value ) } required = { true } / > ) } < /div>))} < /div> < /div>); }