Merge pull request #187 from AlexSCorey/177-UXImprovements

UX improvements
2026-01-16 20:30:46 -03:30 · 2019-05-02 16:22:13 -04:00 · 2019-05-02 16:22:13 -04:00 · fed24ed6df
commit fed24ed6df
parent 0ec274d13c c9c7d2c2a5
12 changed files with 187 additions and 144 deletions
--- a/tests/components/DataListToolbar.test.jsx
+++ b/tests/components/DataListToolbar.test.jsx
@ -69,19 +69,14 @@ describe('<DataListToolbar />', () => {
      { name: 'Baz', key: 'baz' }
    ];

-    const onSearch = jest.fn();
    const onSort = jest.fn();
-    const onSelectAll = jest.fn();

    toolbar = mountWithContexts(
      <DataListToolbar
-        isAllSelected={false}
        sortedColumnKey="foo"
        sortOrder="ascending"
        columns={multipleColumns}
-        onSearch={onSearch}
        onSort={onSort}
-        onSelectAll={onSelectAll}
      />
    );
    const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector);
@ -97,13 +92,10 @@ describe('<DataListToolbar />', () => {
    sortDropdownItems.at(0).simulate('click', mockedSortEvent);
    toolbar = mountWithContexts(
      <DataListToolbar
-        isAllSelected={false}
        sortedColumnKey="foo"
        sortOrder="descending"
        columns={multipleColumns}
-        onSearch={onSearch}
        onSort={onSort}
-        onSelectAll={onSelectAll}
      />
    );
    toolbar.update();
@ -141,20 +133,12 @@ describe('<DataListToolbar />', () => {

    const numericColumns = [{ name: 'ID', key: 'id', isSortable: true, isNumeric: true }];
    const alphaColumns = [{ name: 'Name', key: 'name', isSortable: true, isNumeric: false }];
-    const onSearch = jest.fn();
-    const onSort = jest.fn();
-    const onSelectAll = jest.fn();

    toolbar = mountWithContexts(
      <DataListToolbar
-        isAllSelected={false}
        sortedColumnKey="id"
        sortOrder="descending"
        columns={numericColumns}
-        onSearch={onSearch}
-        onSort={onSort}
-        onSelectAll={onSelectAll}
-        showDelete
      />
    );

@ -163,13 +147,9 @@ describe('<DataListToolbar />', () => {

    toolbar = mountWithContexts(
      <DataListToolbar
-        isAllSelected={false}
        sortedColumnKey="id"
        sortOrder="ascending"
        columns={numericColumns}
-        onSearch={onSearch}
-        onSort={onSort}
-        onSelectAll={onSelectAll}
      />
    );

@ -178,13 +158,9 @@ describe('<DataListToolbar />', () => {

    toolbar = mountWithContexts(
      <DataListToolbar
-        isAllSelected={false}
        sortedColumnKey="name"
        sortOrder="descending"
        columns={alphaColumns}
-        onSearch={onSearch}
-        onSort={onSort}
-        onSelectAll={onSelectAll}
      />
    );

@ -193,13 +169,9 @@ describe('<DataListToolbar />', () => {

    toolbar = mountWithContexts(
      <DataListToolbar
-        isAllSelected={false}
        sortedColumnKey="name"
        sortOrder="ascending"
        columns={alphaColumns}
-        onSearch={onSearch}
-        onSort={onSort}
-        onSelectAll={onSelectAll}
      />
    );

@ -211,29 +183,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}
-        disableTrashCanIcon={disableTrashCanIcon}
+        showDelete
+        disableDelete={false}
+      />
+    );
+    toolbar.find(openDeleteModalButton).simulate('click');
+    expect(onOpenDeleteModal).toHaveBeenCalled();
+  });
+
+  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
+        deleteTooltip="Select a row to delete"
      />
    );

-    toolbar.find(openDeleteModalButton).simulate('click');
-    expect(onOpenDeleteModal).toBeCalled();
+    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
+        deleteTooltip="Delete"
+      />
+    );
+    const toolTip = toolbar.find('.pf-c-tooltip__content');
+    toolTip.simulate('mouseover');
+    expect(toolTip.text()).toBe('Delete');
  });
 });
--- a/tests/pages/Organizations/components/snapshots/DeleteRoleConfirmationModal.test.jsx.snap
+++ b/tests/pages/Organizations/components/snapshots/DeleteRoleConfirmationModal.test.jsx.snap
@ -56,6 +56,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
        ]
      }
      isOpen={true}
+      onClose={[Function]}
      title="Remove Team Access"
      variant="danger"
    >
--- a/tests/pages/Organizations/screens/Organization/snapshots/OrganizationNotifications.test.jsx.snap
+++ b/tests/pages/Organizations/screens/Organization/snapshots/OrganizationNotifications.test.jsx.snap
@ -205,6 +205,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                            ]
                          }
                          deleteTooltip="Delete"
+                          disableDelete={true}
                          isAllSelected={false}
                          isCompact={false}
                          noLeftMargin={false}
@ -916,8 +917,20 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                      </Toolbar>
                                    </div>
                                  </LevelItem>
-                                  <LevelItem>
-                                    <div />
+                                  <LevelItem
+                                    style={
+                                      Object {
+                                        "display": "flex",
+                                      }
+                                    }
+                                  >
+                                    <div
+                                      style={
+                                        Object {
+                                          "display": "flex",
+                                        }
+                                      }
+                                    />
                                  </LevelItem>
                                </div>
                              </Level>
--- a/package-lock.json
+++ b/package-lock.json
@ -2219,7 +2219,7 @@
    },
    "ansi-colors": {
      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
      "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
      "requires": {
        "ansi-wrap": "^0.1.0"
@ -2616,7 +2616,7 @@
        },
        "readable-stream": {
          "version": "2.3.6",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
          "dev": true,
          "requires": {
@ -3239,12 +3239,12 @@
    },
    "babel-plugin-syntax-class-properties": {
      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
+      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
      "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
    },
    "babel-plugin-syntax-flow": {
      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
+      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
      "integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0="
    },
    "babel-plugin-syntax-jsx": {
@ -4138,7 +4138,7 @@
    },
    "camelcase-keys": {
      "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
      "dev": true,
      "requires": {
@ -5421,7 +5421,7 @@
        },
        "readable-stream": {
          "version": "2.3.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
          "requires": {
            "core-util-is": "~1.0.0",
@ -6640,7 +6640,7 @@
        },
        "readable-stream": {
          "version": "2.3.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
          "requires": {
            "core-util-is": "~1.0.0",
@ -7027,7 +7027,8 @@
        "ansi-regex": {
          "version": "2.1.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
@ -7048,12 +7049,14 @@
        "balanced-match": {
          "version": "1.0.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@ -7068,17 +7071,20 @@
        "code-point-at": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
@ -7195,7 +7201,8 @@
        "inherits": {
          "version": "2.0.3",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "ini": {
          "version": "1.3.5",
@ -7207,6 +7214,7 @@
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@ -7221,6 +7229,7 @@
          "version": "3.0.4",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@ -7228,12 +7237,14 @@
        "minimist": {
          "version": "0.0.8",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "minipass": {
          "version": "2.3.5",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.2",
            "yallist": "^3.0.0"
@ -7252,6 +7263,7 @@
          "version": "0.5.1",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@ -7332,7 +7344,8 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
@ -7344,6 +7357,7 @@
          "version": "1.4.0",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@ -7429,7 +7443,8 @@
        "safe-buffer": {
          "version": "5.1.2",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@ -7465,6 +7480,7 @@
          "version": "1.0.2",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@ -7484,6 +7500,7 @@
          "version": "3.0.1",
          "bundled": true,
          "dev": true,
+          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@ -7527,12 +7544,14 @@
        "wrappy": {
          "version": "1.0.2",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "yallist": {
          "version": "3.0.3",
          "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
        }
      }
    },
@ -10606,7 +10625,7 @@
    },
    "kind-of": {
      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
      "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ="
    },
    "kleur": {
@ -10646,7 +10665,7 @@
    },
    "load-json-file": {
      "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
      "dev": true,
      "requires": {
@ -10705,18 +10724,6 @@
      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.11.tgz",
      "integrity": "sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q=="
    },
-    "lodash.assign": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
-      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
-      "dev": true
-    },
-    "lodash.clonedeep": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
-      "dev": true
-    },
    "lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@ -10741,12 +10748,6 @@
      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
      "dev": true
    },
-    "lodash.mergewith": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
-      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
-      "dev": true
-    },
    "lodash.sortby": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@ -10994,7 +10995,7 @@
    },
    "meow": {
      "version": "3.7.0",
-      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
      "dev": true,
      "requires": {
@ -11012,7 +11013,7 @@
      "dependencies": {
        "minimist": {
          "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
          "dev": true
        }
@ -11372,7 +11373,8 @@
      "version": "2.11.1",
      "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.1.tgz",
      "integrity": "sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA==",
-      "dev": true
+      "dev": true,
+      "optional": true
    },
    "nanomatch": {
      "version": "1.2.13",
@ -11523,7 +11525,7 @@
        },
        "semver": {
          "version": "5.3.0",
-          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
          "dev": true
        }
@ -11639,9 +11641,9 @@
      }
    },
    "node-sass": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
-      "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.12.0.tgz",
+      "integrity": "sha512-A1Iv4oN+Iel6EPv77/HddXErL2a+gZ4uBeZUy+a8O35CFYTXhgA8MgLCWBtwpGZdCvTvQ9d+bQxX/QC36GDPpQ==",
      "dev": true,
      "requires": {
        "async-foreach": "^0.1.3",
@ -11651,12 +11653,10 @@
        "get-stdin": "^4.0.1",
        "glob": "^7.0.3",
        "in-publish": "^2.0.0",
-        "lodash.assign": "^4.2.0",
-        "lodash.clonedeep": "^4.3.2",
-        "lodash.mergewith": "^4.6.0",
+        "lodash": "^4.17.11",
        "meow": "^3.7.0",
        "mkdirp": "^0.5.1",
-        "nan": "^2.10.0",
+        "nan": "^2.13.2",
        "node-gyp": "^3.8.0",
        "npmlog": "^4.0.0",
        "request": "^2.88.0",
@ -11674,6 +11674,12 @@
            "lru-cache": "^4.0.1",
            "which": "^1.2.9"
          }
+        },
+        "nan": {
+          "version": "2.13.2",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.2.tgz",
+          "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==",
+          "dev": true
        }
      }
    },
@ -13884,7 +13890,7 @@
        },
        "os-locale": {
          "version": "1.4.0",
-          "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
          "dev": true,
          "requires": {
@ -14660,7 +14666,7 @@
        },
        "readable-stream": {
          "version": "2.3.6",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
          "dev": true,
          "requires": {
--- a/package.json
+++ b/package.json
@ -40,7 +40,7 @@
    "file-loader": "^2.0.0",
    "history": "^4.9.0",
    "jest": "^24.7.1",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.12.0",
    "react-hot-loader": "^4.3.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
--- a/src/components/AddRole/AddResourceRole.jsx
+++ b/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}
--- a/src/components/AddRole/styles.scss
+++ b/src/components/AddRole/styles.scss
@ -5,6 +5,7 @@
  margin-right: 20px;
  font-weight: bold;
  display: flex;
+  cursor: pointer;

  .awx-selectableCard__indicator {
    display: flex;
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/src/components/DataListToolbar/DataListToolbar.jsx
@ -29,10 +29,11 @@ class DataListToolbar extends React.Component {
  render () {
    const {
      add,
+      addBtnToolTipContent,
      addUrl,
      columns,
      deleteTooltip,
-      disableTrashCanIcon,
+      disableDelete,
      isAllSelected,
      isCompact,
      noLeftMargin,
@ -46,9 +47,12 @@ class DataListToolbar extends React.Component {
      showDelete,
      showSelectAll,
      sortOrder,
-      sortedColumnKey
+      sortedColumnKey,
    } = this.props;

+    const deleteIconStyling = disableDelete ? 'awx-ToolBarBtn awx-ToolBarBtn--disabled'
+      : 'awx-ToolBarBtn';
+
    const showExpandCollapse = (onCompact && onExpand);
    return (
      <I18n>
@ -111,33 +115,38 @@ class DataListToolbar extends React.Component {
                  )}
                </Toolbar>
              </LevelItem>
-              <LevelItem>
-                { showDelete && (
+              <LevelItem style={{ display: 'flex' }}>
+                {showDelete && (
                  <Tooltip
                    content={deleteTooltip}
-                    position="left"
+                    position="top"
                  >
-                    <span>
+                    <div
+                      className={deleteIconStyling}
+                    >
                      <Button
-                        className="awx-ToolBarBtn"
                        variant="plain"
                        aria-label={i18n._(t`Delete`)}
                        onClick={onOpenDeleteModal}
-                        isDisabled={disableTrashCanIcon}
+                        isDisabled={disableDelete}
                      >
                        <TrashAltIcon className="awx-ToolBarTrashCanIcon" />
                      </Button>
-                    </span>
+                    </div>
                  </Tooltip>
                )}
                {showAdd && addUrl && (
                  <Link to={addUrl}>
-                    <Button
-                      variant="primary"
-                      aria-label={i18n._(t`Add`)}
+                    <Tooltip
+                      content={addBtnToolTipContent}
                    >
-                      <PlusIcon />
-                    </Button>
+                      <Button
+                        variant="primary"
+                        aria-label={i18n._(t`Add`)}
+                      >
+                        <PlusIcon />
+                      </Button>
+                    </Tooltip>
                  </Link>
                )}
                {showAdd && add && (
@ -154,14 +163,17 @@ class DataListToolbar extends React.Component {

 DataListToolbar.propTypes = {
  add: PropTypes.node,
+  addBtnToolTipContent: PropTypes.string,
  addUrl: PropTypes.string,
  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
  deleteTooltip: PropTypes.node,
+  disableDelete: PropTypes.bool,
  isAllSelected: PropTypes.bool,
  isCompact: PropTypes.bool,
  noLeftMargin: PropTypes.bool,
  onCompact: PropTypes.func,
  onExpand: PropTypes.func,
+  onOpenDeleteModal: PropTypes.func,
  onSearch: PropTypes.func,
  onSelectAll: PropTypes.func,
  onSort: PropTypes.func,
@ -169,18 +181,21 @@ DataListToolbar.propTypes = {
  showDelete: PropTypes.bool,
  showSelectAll: PropTypes.bool,
  sortOrder: PropTypes.string,
-  sortedColumnKey: PropTypes.string
+  sortedColumnKey: PropTypes.string,
 };

 DataListToolbar.defaultProps = {
  add: null,
+  addBtnToolTipContent: i18nMark('Add'),
  addUrl: null,
  deleteTooltip: i18nMark('Delete'),
+  disableDelete: true,
  isAllSelected: false,
  isCompact: false,
  noLeftMargin: false,
  onCompact: null,
  onExpand: null,
+  onOpenDeleteModal: null,
  onSearch: null,
  onSelectAll: null,
  onSort: null,
@ -188,7 +203,7 @@ DataListToolbar.defaultProps = {
  showDelete: false,
  showSelectAll: false,
  sortOrder: 'ascending',
-  sortedColumnKey: 'name'
+  sortedColumnKey: 'name',
 };

 export default DataListToolbar;
--- 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;
 }

@ -76,19 +77,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;
+  display: flex;
+  justify-content: center;
+  margin-right: 20px;
+  border-radius: 3px;
 }
+
 .awx-ToolBarBtn:hover{
  .awx-ToolBarTrashCanIcon {
    color:white;
@ -96,3 +96,17 @@
  background-color:#d9534f;
 }

+.awx-ToolBarBtn--disabled:hover{
+  .awx-ToolBarTrashCanIcon {
+    color: #d2d2d2;
+  }
+  background-color:white;
+  cursor: not-allowed;
+}
+
+.pf-l-toolbar >div{
+  &:last-child{
+    display:none;
+  }
+}
+
--- a/src/pages/Organizations/components/DeleteRoleConfirmationModal.jsx
+++ b/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"
--- a/src/pages/Organizations/screens/Organization/Organization.jsx
+++ b/src/pages/Organizations/screens/Organization/Organization.jsx
@ -113,9 +113,7 @@ class Organization extends Component {
    } = this.state;

    const tabsPaddingOverride = {
-      paddingTop: '0',
-      paddingRight: '0',
-      paddingLeft: '0',
+      padding: '0',
    };

    const canSeeNotificationsTab = me.is_system_auditor || isNotifAdmin || isAuditorOfThisOrg;
--- a/src/pages/Organizations/screens/OrganizationsList.jsx
+++ b/src/pages/Organizations/screens/OrganizationsList.jsx
@ -281,6 +281,30 @@ class OrganizationsList extends Component {
    } = this.state;
    const { match } = this.props;

+    let deleteToolTipContent;
+
+    if (selected.some(row => !row.summary_fields.user_capabilities.delete)) {
+      deleteToolTipContent = (
+        <div>
+          <Trans>
+            You dont have permission to delete the following Organizations:
+          </Trans>
+          {selected
+            .filter(row => !row.summary_fields.user_capabilities.delete)
+            .map(row => (
+              <div key={row.id}>
+                {row.name}
+              </div>
+            ))
+          }
+        </div>
+      );
+    } else if (selected.length === 0) {
+      deleteToolTipContent = i18nMark('Select a row to delete');
+    } else {
+      deleteToolTipContent = i18nMark('Delete');
+    }
+
    const disableDelete = (
      selected.length === 0
      || selected.some(row => !row.summary_fields.user_capabilities.delete)
@ -329,6 +353,7 @@ class OrganizationsList extends Component {
                <Fragment>
                  <DataListToolbar
                    addUrl={`${match.url}/add`}
+                    addBtnToolTipContent={i18nMark('Add Organization')}
                    isAllSelected={selected.length === results.length}
                    sortedColumnKey={sortedColumnKey}
                    sortOrder={sortOrder}
@ -337,24 +362,8 @@ class OrganizationsList extends Component {
                    onSort={this.onSort}
                    onSelectAll={this.onSelectAll}
                    onOpenDeleteModal={this.handleOpenOrgDeleteModal}
-                    disableTrashCanIcon={disableDelete}
-                    deleteTooltip={
-                      selected.some(row => !row.summary_fields.user_capabilities.delete) ? (
-                        <div>
-                          <Trans>
-                            You dont have permission to delete the following Organizations:
-                          </Trans>
-                          {selected
-                            .filter(row => !row.summary_fields.user_capabilities.delete)
-                            .map(row => (
-                              <div key={row.id}>
-                                {row.name}
-                              </div>
-                            ))
-                          }
-                        </div>
-                      ) : undefined
-                    }
+                    disableDelete={disableDelete}
+                    deleteTooltip={deleteToolTipContent}
                    showDelete
                    showSelectAll
                    showAdd={canAdd}
@ -370,7 +379,6 @@ class OrganizationsList extends Component {
                        teamCount={o.summary_fields.related_field_counts.teams}
                        isSelected={selected.some(row => row.id === o.id)}
                        onSelect={() => this.onSelect(o)}
-                        onOpenOrgDeleteModal={this.handleOpenOrgDeleteModal}
                      />
                    ))}
                  </ul>