UX improvements

__tests__/components/DataListToolbar.test.jsx

@@ -211,29 +211,43 @@ describe('<DataListToolbar />', () => {
     const columns = [{ name: 'Name', key: 'name', isSortable: true }];
     const onOpenDeleteModal = jest.fn();
     const openDeleteModalButton = 'button[aria-label="Delete"]';
-    const onSearch = jest.fn();
-    const onSort = jest.fn();
-    const onSelectAll = jest.fn();
-    const showDelete = true;
-    const disableTrashCanIcon = false;
 
     toolbar = mountWithContexts(
       <DataListToolbar
-        isAllSelected={false}
-        selected={() => [1, 2, 3, 4]}
-        sortedColumnKey="name"
-        sortOrder="ascending"
         columns={columns}
-        onSearch={onSearch}
-        onSort={onSort}
-        onSelectAll={onSelectAll}
         onOpenDeleteModal={onOpenDeleteModal}
-        showDelete={showDelete}
+        showDelete
-        disableTrashCanIcon={disableTrashCanIcon}
       />
     );
 
     toolbar.find(openDeleteModalButton).simulate('click');
     expect(onOpenDeleteModal).toBeCalled();
   });
+
+  test('Tooltip says "Select a row to delete" when trash can icon is disabled', () => {
+    toolbar = mountWithContexts(
+      <DataListToolbar
+        columns={[{ name: 'Name', key: 'name', isSortable: true }]}
+        showDelete
+        disableTrashCanIcon
+      />
+    );
+
+    const toolTip = toolbar.find('.pf-c-tooltip__content');
+    toolTip.simulate('mouseover');
+    expect(toolTip.text()).toBe('Select a row to delete');
+  });
+
+  test('Delete Org tooltip says "Delete" when trash can icon is enabled', () => {
+    toolbar = mountWithContexts(
+      <DataListToolbar
+        columns={[{ name: 'Name', key: 'name', isSortable: true }]}
+        showDelete
+        disableTrashCanIcon={false}
+      />
+    );
+    const toolTip = toolbar.find('.pf-c-tooltip__content');
+    toolTip.simulate('mouseover');
+    expect(toolTip.text()).toBe('Delete');
+  });
 });

src/components/AddRole/styles.scss

@@ -16,6 +16,7 @@
     flex: 1;
     align-items: center;
     padding: 20px;
+    cursor: pointer;
   }
 }
 

src/components/DataListToolbar/DataListToolbar.jsx

@@ -114,12 +114,14 @@ class DataListToolbar extends React.Component {
               <LevelItem>
                 { showDelete && (
                   <Tooltip
-                    content={deleteTooltip}
+                    content={disableTrashCanIcon ? i18n._(t`Select a row to delete`) : i18n._(t`Delete`)}
-                    position="left"
+                    position="top"
                   >
-                    <span>
+                    <div
+                      className={disableTrashCanIcon ? 'awx-ToolBarTrashCanIcon-disabled'
+                        : 'awx-ToolBarBtn'}
+                    >
                       <Button
-                        className="awx-ToolBarBtn"
                         variant="plain"
                         aria-label={i18n._(t`Delete`)}
                         onClick={onOpenDeleteModal}
@@ -127,17 +129,21 @@ class DataListToolbar extends React.Component {
                       >
                         <TrashAltIcon className="awx-ToolBarTrashCanIcon" />
                       </Button>
-                    </span>
+                    </div>
                   </Tooltip>
                 )}
                 {showAdd && addUrl && (
                   <Link to={addUrl}>
-                    <Button
+                    <Tooltip
-                      variant="primary"
+                      content={i18n._(t`Add Organization`)}
-                      aria-label={i18n._(t`Add`)}
                     >
-                      <PlusIcon />
+                      <Button
-                    </Button>
+                        variant="primary"
+                        aria-label={i18n._(t`Add`)}
+                      >
+                        <PlusIcon />
+                      </Button>
+                    </Tooltip>
                   </Link>
                 )}
                 {showAdd && add && (

src/components/DataListToolbar/styles.scss

@@ -76,18 +76,18 @@
   margin-right: 20px;
 }
 
-.awx-toolbar .pf-c-button {
-  margin-right: 20px;
-}
-
 .awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
   font-size: 18px;
 }
-.pf-c-button--disabled--BackgroundColor{
+
-  background-color: #b7b7b7;
-}
 .awx-ToolBarBtn{
   width: 30px;
+  position: absolute;
+  right: 80px;
+  display: flex;
+  justify-content: center;
+  margin-right: 20px;
+  border-radius: 3px;
 }
 .awx-ToolBarBtn:hover{
   .awx-ToolBarTrashCanIcon {
@@ -95,4 +95,17 @@
   }
   background-color:#d9534f;
 }
+.awx-ToolBarTrashCanIcon-disabled{
+  width: 30px;
+  position: absolute;
+  right: 80px;
+  display: flex;
+  justify-content: center;
+  margin-right: 20px;
+}
+.pf-l-toolbar >div{
+  &:last-child{
+    display:none;
+  }
+}
 

src/pages/Organizations/components/DeleteRoleConfirmationModal.jsx

@@ -33,7 +33,7 @@ class DeleteRoleConfirmationModal extends React.Component {
             variant="danger"
             title={i18nMark(title)}
             isOpen
-            onClose={this.hideWarning}
+            onClose={onCancel}
             actions={[
               <Button
                 key="delete"