import * as React from 'react' ; import Add from '@material-ui/icons/Add' ; import ClearAdornment from '../helper/ClearAdornment' ; import Delete from '@material-ui/icons/Delete' ; import Lock from '@material-ui/icons/Lock' ; import { bindActionCreators } from 'redux' ; import { Button , Theme , Tooltip , Typography } from '@material-ui/core' ; import { CertificateParameters , ConnectionOptions } from '../../model/ConnectionOptions' ; import { CertificateTypes } from '../../actions/ConnectionManager' ; import { connect } from 'react-redux' ; import { connectionManagerActions } from '../../actions' ; import { withStyles } from '@material-ui/styles' ; function CertificateFileSelection ( props ) { const clearCertificate = React . useCallback ( ( ) => { props . actions . connectionManager . updateConnection ( props . connection . id , { [ props . certificateType ] : undefined , } ) ; } , [ props . connection , props . certificateType ] ) ; return ( < span > < Tooltip title = "Select certificate" placement = "top" > < Button variant = "contained" className = { props . classes . button } onClick = { ( ) => props . actions . connectionManager . selectCertificate ( props . certificateType , props . connection . id ) } > < Lock /> {props.title} < /Button> < /Tooltip> < ClearCertificate classes = { props . classes } certificate = { props . certificate } action = { clearCertificate } / > < /span>); } function ClearCertificate ( props ) { if ( ! props . certificate ) { return null ; } return ( < Tooltip title = { props . certificate . name } > < Typography className = { props . classes . certificateName } > < ClearAdornment action = { props . action } value = { props . certificate . name } / > { props . certificate . name } < /Typography> < /Tooltip>); } const mapDispatchToProps = ( dispatch ) => { return { actions : { connectionManager : bindActionCreators ( connectionManagerActions , dispatch ) , } , } ; } ; const styles = ( theme ) => ( { certificateName : { width : '100%' , height : 'calc(1em + 4px)' , overflow : 'hidden' as 'hidden' , whiteSpace : 'nowrap' as 'nowrap' , textOverflow : 'ellipsis' as 'ellipsis' , color : theme . palette . text . hint , } , button : { marginTop : theme . spacing ( 3 ) , marginRight : theme . spacing ( 2 ) , } , } ) ; export default connect ( undefined , mapDispatchToProps ) ( withStyles ( styles ) ( CertificateFileSelection ) ) ;