import React from 'react' ; import Table , { Cell } from 'design/DataTableNext' ; import { MenuButton , MenuItem } from 'shared/components/MenuAction' ; import { State as ResourceState } from 'teleport/components/useResources' ; import { State as RolesState } from '../useRoles' ; export default function RoleList ( { items = [ ] , pageSize = 20 , onEdit , onDelete , } ) { return ( < Table data = { items } columns = { [ { key : 'name' , headerText : 'Name' , } , { altKey : 'options-btn' , render : ( { id } ) => ( < ActionCell id = { id } onEdit = { onEdit } onDelete = { onDelete } / > ) , } , ] } emptyText = "No Roles Found" pagination = { { pageSize } } isSearchable / > ) ; } const ActionCell = ( { id , onEdit , onDelete , } ) => { return ( < Cell align = "right" > < MenuButton > < MenuItem onClick = { ( ) => onEdit ( id ) } > Edit ... < /MenuItem> < MenuItem onClick = { ( ) => onDelete ( id ) } > Delete ... < /MenuItem> < /MenuButton> < /Cell>); } ; type Props = { items : RolesState [ 'items' ] ; onEdit : ResourceState [ 'edit' ] ; onDelete : ResourceState [ 'remove' ] ; pageSize ? : number ; } ;