diff --git a/src/components/AccessList/Access.list.jsx b/src/components/AccessList/Access.list.jsx index 23e02cf497..1df8377ddf 100644 --- a/src/components/AccessList/Access.list.jsx +++ b/src/components/AccessList/Access.list.jsx @@ -16,6 +16,7 @@ import { import BasicChip from '../BasicChip/BasicChip'; import Pagination from '../Pagination'; import DataListToolbar from '../DataListToolbar'; +import Tooltip from '../Tooltip'; import { parseQueryString, @@ -46,6 +47,15 @@ const hiddenStyle = { display: 'none', }; +const badgeStyle = { + borderRadius: 'var(--pf-global--BorderRadius--sm)', + height: '24px', +} + +const badgeTextStyle = { + lineHeight: '24px', +} + const Detail = ({ label, value, url, isBadge, customStyles }) => { let detail = null; if (value) { @@ -57,8 +67,8 @@ const Detail = ({ label, value, url, isBadge, customStyles }) => { ) : ({label} )} {isBadge ? ( - - {value} + + {value} ) : ( {value} @@ -93,7 +103,7 @@ class AccessList extends React.Component { count: null, sortOrder: 'ascending', sortedColumnKey: 'username', - isCompact: true, + isCompact: false, }; this.fetchOrgAccessList = this.fetchOrgAccessList.bind(this); @@ -321,12 +331,30 @@ class AccessList extends React.Component { : userRolesWrapperStyle} > {i18n._(t`User Roles`)} - {result.userRoles.map(role => ( - - ))} + {result.userRoles.map(role => { + // Show tooltips for associated Org/Team of role name displayed + if (role.summary_fields.resource_name) { + return ( + + + + ) + } else { + return ( + + ) + } + })} )} {result.teamRoles.length > 0 && ( diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx index 074b804e58..3968d4742d 100644 --- a/src/components/DataListToolbar/DataListToolbar.jsx +++ b/src/components/DataListToolbar/DataListToolbar.jsx @@ -261,16 +261,6 @@ class DataListToolbar extends React.Component { {showExpandCollapse && ( - - - + + + { (showDelete || addUrl) && ( )} diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx index 2ecb1ce832..c3d8a2ac4f 100644 --- a/src/components/Tooltip/Tooltip.jsx +++ b/src/components/Tooltip/Tooltip.jsx @@ -1,6 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; +const toolTipContent = { + padding: '10px', + minWidth: '100px', +} + class Tooltip extends React.Component { transforms = { top: { @@ -42,7 +47,10 @@ class Tooltip extends React.Component { const { isDisplayed } = this.state; - + + if (message === '') { + return null; + } return ( -
-
+
+
{ message }