import React , { useState , useEffect } from 'react' ; import { EuiIconTip , EuiInMemoryTable , EuiBasicTableColumn } from '@elastic/eui' ; import type { EuiSearchBarOnChangeArgs } from '@elastic/eui' ; import { ASRoleMapping } from '../../app_search/types' ; import { WSRoleMapping } from '../../workplace_search/types' ; import { ACTIONS_HEADER } from '../constants' ; import { RoleRules } from '../types' ; import './role_mappings_table.scss' ; import { ROLE_LABEL , ALL_LABEL , EXTERNAL_ATTRIBUTE_LABEL , ATTRIBUTE_VALUE_LABEL , FILTER_ROLE_MAPPINGS_PLACEHOLDER , ROLE_MAPPINGS_NO_RESULTS_MESSAGE , EXTERNAL_ATTRIBUTE_TOOLTIP , } from './constants' ; import { UsersAndRolesRowActions } from './users_and_roles_row_actions' ; interface AccessItem { name : string ; } interface SharedRoleMapping extends ASRoleMapping , WSRoleMapping { accessItems : AccessItem [ ] ; } interface Props { accessItemKey : 'groups' | 'engines' ; accessHeader : string ; roleMappings : Array < ASRoleMapping | WSRoleMapping > ; accessAllEngines ? : boolean ; initializeRoleMapping ( roleMappingId ) : void ; handleDeleteMapping ( roleMappingId ) : void ; } export const RoleMappingsTable = ( { accessItemKey , accessHeader , roleMappings , initializeRoleMapping , handleDeleteMapping , } ) => { const getFirstAttributeName = ( rules ) : string => Object . entries ( rules ) [ 0 ] [ 0 ] ; const getFirstAttributeValue = ( rules ) : string => Object . entries ( rules ) [ 0 ] [ 1 ] ; const standardizedRoleMappings = ( roleMappings as SharedRoleMapping [ ] ) . map ( ( rm ) => { const _rm = { ... rm } as SharedRoleMapping ; _rm . accessItems = rm [ accessItemKey ] ; return _rm ; } ) as SharedRoleMapping [ ] ; const [ items , setItems ] = useState ( [ ] as SharedRoleMapping [ ] ) ; useEffect ( ( ) => { setItems ( standardizedRoleMappings ) ; } , [ roleMappings ] ) ; const attributeNameCol = { field : 'attribute' , name : ( < span > { EXTERNAL_ATTRIBUTE_LABEL } { ' ' } < EuiIconTip type = "iInCircle" color = "subdued" content = { EXTERNAL_ATTRIBUTE_TOOLTIP } iconProps = { { className : 'eui-alignTop' , } } /> < /span>), render : ( _ , { rules } ) => getFirstAttributeName ( rules ) , } ; const attributeValueCol = { field : 'attributeValue' , name : ATTRIBUTE_VALUE_LABEL , render : ( _ , { rules } ) => getFirstAttributeValue ( rules ) , } ; const roleCol = { field : 'roleType' , name : ROLE_LABEL , render : ( _ , { roleType } ) => roleType , } ; const accessItemsCol = { field : 'accessItems' , name : accessHeader , render : ( _ , { accessAllEngines , accessItems } ) => { const numItems = accessItems . length ; if ( accessAllEngines || numItems === 0 ) return < span data - test - subj = "AllItems" > { ALL_LABEL } < /span>; const additionalItems = numItems > 2 ? ` + ${ numItems - 2 }` : '' ; const names = accessItems . map ( ( item ) => item . name ) ; return ( < span data - test - subj = "AccessItems" > { names . slice ( 0 , 2 ) . join ( ', ' ) + additionalItems } < /span>); } , } ; const actionsCol = { field : 'id' , name : ACTIONS_HEADER , align : 'right' , render : ( _ , { id , toolTip } ) => ( < > { id && ( < UsersAndRolesRowActions onManageClick = { ( ) => initializeRoleMapping ( id ) } onDeleteClick = { ( ) => handleDeleteMapping ( id ) } />)} { toolTip && < EuiIconTip position = "left" content = { toolTip . content } / > } < />), } ; const columns = [ attributeNameCol , attributeValueCol , roleCol , accessItemsCol , actionsCol ] ; const pagination = { hidePerPageOptions : true , pageSize : 10 , } ; const onQueryChange = ( { queryText } ) => { const filteredItems = standardizedRoleMappings . filter ( ( rm ) => { const normalizedTableItemString = JSON . stringify ( rm ) . toLowerCase ( ) ; const normalizedQuery = queryText . toLowerCase ( ) ; return normalizedTableItemString . indexOf ( normalizedQuery ) !== - 1 ; } ) ; setItems ( filteredItems ) ; } ; const search = { onChange : onQueryChange , box : { incremental : true , fullWidth : false , placeholder : FILTER_ROLE_MAPPINGS_PLACEHOLDER , 'data-test-subj' : 'RoleMappingsTableSearchInput' , } , } ; return ( < EuiInMemoryTable data - test - subj = "RoleMappingsTable" columns = { columns } items = { items } search = { search } pagination = { pagination } message = { ROLE_MAPPINGS_NO_RESULTS_MESSAGE } responsive = { false } / > ) ; } ;