@@ -163,6 +164,7 @@ DataListToolbar.propTypes = {
addUrl: PropTypes.string,
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
deleteTooltip: PropTypes.node,
+ disableDeleteIcon: PropTypes.bool,
isAllSelected: PropTypes.bool,
isCompact: PropTypes.bool,
noLeftMargin: PropTypes.bool,
@@ -175,13 +177,14 @@ DataListToolbar.propTypes = {
showDelete: PropTypes.bool,
showSelectAll: PropTypes.bool,
sortOrder: PropTypes.string,
- sortedColumnKey: PropTypes.string
+ sortedColumnKey: PropTypes.string,
};
DataListToolbar.defaultProps = {
add: null,
addUrl: null,
deleteTooltip: i18nMark('Delete'),
+ disableDeleteIcon: true,
isAllSelected: false,
isCompact: false,
noLeftMargin: false,
@@ -194,7 +197,7 @@ DataListToolbar.defaultProps = {
showDelete: false,
showSelectAll: false,
sortOrder: 'ascending',
- sortedColumnKey: 'name'
+ sortedColumnKey: 'name',
};
export default DataListToolbar;
diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss
index 8a29cef8f1..865ec3af88 100644
--- a/src/components/DataListToolbar/styles.scss
+++ b/src/components/DataListToolbar/styles.scss
@@ -30,6 +30,7 @@
.awx-toolbar button.pf-c-button {
height: 30px;
+ width: 30px;
padding: 0px;
}
@@ -82,27 +83,27 @@
.awx-ToolBarBtn{
width: 30px;
- position: absolute;
- right: 80px;
display: flex;
justify-content: center;
margin-right: 20px;
border-radius: 3px;
}
+
.awx-ToolBarBtn:hover{
.awx-ToolBarTrashCanIcon {
color:white;
}
background-color:#d9534f;
}
-.awx-ToolBarTrashCanIcon-disabled{
- width: 30px;
- position: absolute;
- right: 80px;
- display: flex;
- justify-content: center;
- margin-right: 20px;
+
+.awx-ToolBarBtn--disabled:hover{
+ .awx-ToolBarTrashCanIcon {
+ color: #d2d2d2;
+ }
+ background-color:white;
+ cursor: not-allowed;
}
+
.pf-l-toolbar >div{
&:last-child{
display:none;
diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx
index 479a12b642..676767e8fc 100644
--- a/src/pages/Organizations/screens/Organization/Organization.jsx
+++ b/src/pages/Organizations/screens/Organization/Organization.jsx
@@ -125,7 +125,8 @@ class Organization extends Component {
} = this.state;
const tabsPaddingOverride = {
- padding: '0'
+ padding: '0',
+ borderBottom: '1px solid black'
};
const canSeeNotificationsTab = me.is_system_auditor || isNotifAdmin || isAuditorOfThisOrg;
diff --git a/src/pages/Organizations/screens/OrganizationsList.jsx b/src/pages/Organizations/screens/OrganizationsList.jsx
index 721b545e95..d19def096f 100644
--- a/src/pages/Organizations/screens/OrganizationsList.jsx
+++ b/src/pages/Organizations/screens/OrganizationsList.jsx
@@ -285,6 +285,7 @@ class OrganizationsList extends Component {
selected.length === 0
|| selected.some(row => !row.summary_fields.user_capabilities.delete)
);
+ const deleteToolTipContent = disableDelete ? i18nMark('Select a row to delete') : i18nMark('Delete');
return (
@@ -337,7 +338,10 @@ class OrganizationsList extends Component {
onSort={this.onSort}
onSelectAll={this.onSelectAll}
onOpenDeleteModal={this.handleOpenOrgDeleteModal}
- disableTrashCanIcon={disableDelete}
+ disableDeleteIcon={disableDelete}
+ deleteIconStyling={disableDelete ? 'awx-ToolBarBtn awx-ToolBarBtn--disabled'
+ : 'awx-ToolBarBtn'}
+
deleteTooltip={
selected.some(row => !row.summary_fields.user_capabilities.delete) ? (
@@ -353,7 +357,7 @@ class OrganizationsList extends Component {
))
}
- ) : undefined
+ ) : deleteToolTipContent
}
showDelete
showSelectAll