address pr issues

__tests__/components/DataListToolbar.test.jsx

@@ -217,11 +217,11 @@ describe('<DataListToolbar />', () => {
         columns={columns}
         onOpenDeleteModal={onOpenDeleteModal}
         showDelete
+        disableDeleteIcon={false}
       />
     );
-
     toolbar.find(openDeleteModalButton).simulate('click');
-    expect(onOpenDeleteModal).toBeCalled();
+    expect(onOpenDeleteModal).toHaveBeenCalled();
   });
 
   test('Tooltip says "Select a row to delete" when trash can icon is disabled', () => {
@@ -229,7 +229,7 @@ describe('<DataListToolbar />', () => {
       <DataListToolbar
         columns={[{ name: 'Name', key: 'name', isSortable: true }]}
         showDelete
-        disableTrashCanIcon
+        deleteTooltip="Select a row to delete"
       />
     );
 
@@ -243,7 +243,7 @@ describe('<DataListToolbar />', () => {
       <DataListToolbar
         columns={[{ name: 'Name', key: 'name', isSortable: true }]}
         showDelete
-        disableTrashCanIcon={false}
+        deleteTooltip="Delete"
       />
     );
     const toolTip = toolbar.find('.pf-c-tooltip__content');

src/components/AddRole/AddResourceRole.jsx

@@ -238,6 +238,7 @@ class AddResourceRole extends React.Component {
 
     return (
       <Wizard
+        style={{ overflow: 'scroll' }}
         isOpen
         onNext={this.handleWizardNext}
         onClose={onClose}

src/components/AddRole/styles.scss

@@ -5,6 +5,7 @@
   margin-right: 20px;
   font-weight: bold;
   display: flex;
+  cursor: pointer;
 
   .awx-selectableCard__indicator {
     display: flex;
@@ -16,7 +17,6 @@
     flex: 1;
     align-items: center;
     padding: 20px;
-    cursor: pointer;
   }
 }
 

src/components/DataListToolbar/DataListToolbar.jsx

@@ -32,7 +32,8 @@ class DataListToolbar extends React.Component {
       addUrl,
       columns,
       deleteTooltip,
-      disableTrashCanIcon,
+      disableDeleteIcon,
+      deleteIconStyling,
       isAllSelected,
       isCompact,
       noLeftMargin,
@@ -46,7 +47,8 @@ class DataListToolbar extends React.Component {
       showDelete,
       showSelectAll,
       sortOrder,
-      sortedColumnKey
+      sortedColumnKey,
+      // deleteToolTipContent
     } = this.props;
 
     const showExpandCollapse = (onCompact && onExpand);
@@ -111,21 +113,20 @@ class DataListToolbar extends React.Component {
                   )}
                 </Toolbar>
               </LevelItem>
-              <LevelItem>
+              <LevelItem style={{ display: 'flex' }}>
-                { showDelete && (
+                {showDelete && (
                   <Tooltip
-                    content={disableTrashCanIcon ? i18n._(t`Select a row to delete`) : i18n._(t`Delete`)}
+                    content={deleteTooltip}
                     position="top"
                   >
                     <div
-                      className={disableTrashCanIcon ? 'awx-ToolBarTrashCanIcon-disabled'
+                      className={deleteIconStyling}
-                        : 'awx-ToolBarBtn'}
                     >
                       <Button
                         variant="plain"
                         aria-label={i18n._(t`Delete`)}
                         onClick={onOpenDeleteModal}
-                        isDisabled={disableTrashCanIcon}
+                        isDisabled={disableDeleteIcon}
                       >
                         <TrashAltIcon className="awx-ToolBarTrashCanIcon" />
                       </Button>
@@ -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;

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;
+.awx-ToolBarBtn--disabled:hover{
-  position: absolute;
+  .awx-ToolBarTrashCanIcon {
-  right: 80px;
+    color: #d2d2d2;
-  display: flex;
+  }
-  justify-content: center;
+  background-color:white;
-  margin-right: 20px;
+  cursor: not-allowed;
 }
+
 .pf-l-toolbar >div{
   &:last-child{
     display:none;

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;

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 (
       <I18n>
@@ -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) ? (
                         <div>
@@ -353,7 +357,7 @@ class OrganizationsList extends Component {
                             ))
                           }
                         </div>
-                      ) : undefined
+                      ) : deleteToolTipContent
                     }
                     showDelete
                     showSelectAll