import React , { useState } from 'react' ; import { ButtonBorder } from 'design' ; import Table , { Cell , LabelCell } from 'design/DataTableNext' ; import { AuthType } from 'teleport/services/user' ; import { Database , DbProtocol } from 'teleport/services/databases' ; import ConnectDialog from 'teleport/Databases/ConnectDialog' ; function DatabaseList ( props ) { const { databases = [ ] , pageSize = 100 , username , clusterId , authType , } = props ; const [ dbConnectInfo , setDbConnectInfo ] = useState < { name : string ; protocol : DbProtocol ; } > ( null ) ; return ( < > < Table data = { databases } columns = { [ { key : 'name' , headerText : 'Name' , isSortable : true , } , { key : 'desc' , headerText : 'Description' , isSortable : true , } , { key : 'title' , headerText : 'Type' , isSortable : true , } , { key : 'tags' , headerText : 'Labels' , render : ( { tags } ) => < LabelCell data = { tags } / > , } , { altKey : 'connect-btn' , render : database => renderConnectButton ( database , setDbConnectInfo ) , } , ] } pagination = { { pageSize } } isSearchable emptyText = "No Databases Found" / > { dbConnectInfo && ( < ConnectDialog username = { username } clusterId = { clusterId } dbName = { dbConnectInfo . name } dbProtocol = { dbConnectInfo . protocol } onClose = { ( ) => setDbConnectInfo ( null ) } authType = { authType } / > ) } < />); } function renderConnectButton ( { name , protocol } , setDbConnectInfo ) { return ( < Cell align = "right" > < ButtonBorder size = "small" onClick = { ( ) => { setDbConnectInfo ( { name , protocol } ) ; } } > Connect < /ButtonBorder> < /Cell>); } type Props = { databases : Database [ ] ; pageSize ? : number ; username : string ; clusterId : string ; authType : AuthType ; } ; export default DatabaseList ;