import React , { useState } from 'react' ; import Table , { Cell , LabelCell } from 'design/DataTableNext' ; import { ButtonBorder } from 'design' ; import { Kube } from 'teleport/services/kube' ; import { AuthType } from 'teleport/services/user' ; import ConnectDialog from '../ConnectDialog' ; function KubeList ( props ) { const { kubes = [ ] , pageSize = 100 , username , authType } = props ; const [ kubeConnectName , setKubeConnectName ] = useState ( '' ) ; return ( < > < Table data = { kubes } columns = { [ { key : 'name' , headerText : 'Name' , isSortable : true , } , { key : 'tags' , headerText : 'Labels' , render : ( { tags } ) => < LabelCell data = { tags } / > , } , { altKey : 'connect-btn' , render : kube => renderConnectButtonCell ( kube , setKubeConnectName ) , } , ] } isSearchable emptyText = "No Kubernetes Clusters Found" pagination = { { pageSize } } /> { kubeConnectName && ( < ConnectDialog onClose = { ( ) => setKubeConnectName ( '' ) } username = { username } authType = { authType } kubeConnectName = { kubeConnectName } / > ) } < />); } export const renderConnectButtonCell = ( { name } , setKubeConnectName ) => { return ( < Cell align = "right" > < ButtonBorder size = "small" onClick = { ( ) => setKubeConnectName ( name ) } > Connect < /ButtonBorder> < /Cell>); } ; type Props = { kubes : Kube [ ] ; pageSize ? : number ; username : string ; authType : AuthType ; } ; export default KubeList ;