import React from 'react' ; import styled from 'styled-components' ; import { ButtonBorder , Text } from 'design' ; import Table , { Cell } from 'design/DataTableNext' ; import { displayDate } from 'shared/services/loc' ; import { MfaDevice } from 'teleport/services/mfa/types' ; export default function MfaDeviceList ( { devices = [ ] , remove , mostRecentDevice , mfaDisabled = false , isSearchable = false , style , } ) { return ( < StyledTable data = { devices } style = { style } columns = { [ { key : 'description' , headerText : 'Type' , } , { key : 'name' , headerText : 'Device Name' , render : renderNameCell , } , { key : 'registeredDate' , headerText : 'Registered' , isSortable : true , render : ( { registeredDate } ) => ( < Cell > { displayDate ( registeredDate ) } < /Cell>), } , { key : 'lastUsedDate' , headerText : 'Last Used' , isSortable : true , render : ( { lastUsedDate } ) => ( < Cell > { displayDate ( lastUsedDate ) } < /Cell>), } , { altKey : 'remove-btn' , render : device => renderRemoveCell ( device , remove , mostRecentDevice , mfaDisabled ) , } , ] } emptyText = "No Devices Found" isSearchable = { isSearchable } initialSort = { { key : 'registeredDate' , dir : 'DESC' , } } />); } const renderNameCell = ( { name } ) => { return ( < Cell title = { name } > < Text style = { { maxWidth : '96px' , whiteSpace : 'nowrap' , } } > { name } < /Text> < /Cell>); } ; const renderRemoveCell = ( { id , name } , remove , mostRecentDevice , mfaDisabled ) => { if ( id === mostRecentDevice ?. id ) { return null ; } return ( < Cell align = "right" > < ButtonBorder size = "small" onClick = { ( ) => remove ( { id , name } ) } disabled = { mfaDisabled } title = { mfaDisabled ? 'Two-factor authentication is disabled' : '' } > Remove < /ButtonBorder> < /Cell>); } ; type Props = { devices : MfaDevice [ ] ; remove ( { id , name } ) : void ; mostRecentDevice ? : MfaDevice ; mfaDisabled ? : boolean ; isSearchable ? : boolean ; [ key ] : any ; } ; const StyledTable = styled ( Table ) `
  & > tbody > tr {
    td {
      vertical-align: middle;
      height: 32px;
    }
  }
` as typeof Table ;