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 (
-
-