From f2e1e7130247ba81ea24bc1b7fb85d3cec0642c4 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Thu, 20 Feb 2020 18:50:05 -0500
Subject: [PATCH] Remove tab and button style overrides

---
 .../components/AddRole/SelectResourceStep.jsx |   2 +-
 .../src/components/Card/CardActionsRow.jsx    |   7 +-
 .../src/components/Card/TabbedCardHeader.js   |   2 +-
 .../CardCloseButton/CardCloseButton.jsx       |  12 +-
 .../DataListToolbar/DataListToolbar.jsx       |  10 +-
 .../FormActionGroup/FormActionGroup.jsx       |  21 +--
 .../PaginatedDataList/ToolbarAddButton.jsx    |  16 +--
 .../PaginatedDataList/ToolbarDeleteButton.jsx |  25 +---
 .../ToolbarDeleteButton.test.jsx              |   4 +-
 .../ToolbarDeleteButton.test.jsx.snap         | 134 +++++-------------
 .../src/components/RoutedTabs/RoutedTabs.jsx  |  35 +----
 awx/ui_next/src/components/Search/Search.jsx  |   1 -
 awx/ui_next/src/components/Sort/Sort.jsx      |   1 -
 .../src/screens/Credential/Credential.jsx     |   6 +-
 .../CredentialList/CredentialList.jsx         |   6 +-
 awx/ui_next/src/screens/Host/Host.jsx         |   6 +-
 .../src/screens/Host/HostList/HostList.jsx    |   6 +-
 .../src/screens/Inventory/Inventory.jsx       |   6 +-
 .../InventoryGroup/InventoryGroup.jsx         |  11 +-
 .../InventoryGroups/InventoryGroupsList.jsx   |  45 ++----
 .../InventoryHosts/InventoryHostList.jsx      |  12 +-
 .../Inventory/InventoryList/InventoryList.jsx |   2 +-
 .../src/screens/Inventory/SmartInventory.jsx  |   6 +-
 awx/ui_next/src/screens/Job/Job.jsx           |   6 +-
 .../src/screens/Organization/Organization.jsx |   6 +-
 .../OrganizationList/OrganizationList.jsx     |   6 +-
 awx/ui_next/src/screens/Project/Project.jsx   |   6 +-
 .../Project/ProjectList/ProjectList.jsx       |  12 +-
 awx/ui_next/src/screens/Team/Team.jsx         |   6 +-
 .../src/screens/Team/TeamList/TeamList.jsx    |  12 +-
 awx/ui_next/src/screens/Template/Template.jsx |   6 +-
 .../Template/TemplateList/TemplateList.jsx    |   2 +-
 .../screens/Template/WorkflowJobTemplate.jsx  |   6 +-
 awx/ui_next/src/screens/User/User.jsx         |   6 +-
 .../src/screens/User/UserList/UserList.jsx    |  12 +-
 35 files changed, 154 insertions(+), 308 deletions(-)

diff --git a/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx b/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
index 66bbbc634a..fd8f93bdf3 100644
--- a/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
+++ b/awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
@@ -85,7 +85,6 @@ class SelectResourceStep extends React.Component {
 
     return (
       <Fragment>
-        {isLoading && <div>{i18n._(t`Loading...`)}</div>}
         {isInitialized && (
           <Fragment>
             <div>
@@ -102,6 +101,7 @@ class SelectResourceStep extends React.Component {
               />
             )}
             <PaginatedDataList
+              hasContentLoading={isLoading}
               items={resources}
               itemCount={count}
               qsConfig={this.qsConfig}
diff --git a/awx/ui_next/src/components/Card/CardActionsRow.jsx b/awx/ui_next/src/components/Card/CardActionsRow.jsx
index 8312207fa9..3652692a81 100644
--- a/awx/ui_next/src/components/Card/CardActionsRow.jsx
+++ b/awx/ui_next/src/components/Card/CardActionsRow.jsx
@@ -3,13 +3,8 @@ import { CardActions } from '@patternfly/react-core';
 import styled from 'styled-components';
 
 const CardActionsWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
   margin-top: 20px;
-
-  & > .pf-c-card__actions > :not(:first-child) {
-    margin-left: 0.5rem;
-  }
+  --pf-c-card__actions--PaddingLeft: 0;
 `;
 
 function CardActionsRow({ children }) {
diff --git a/awx/ui_next/src/components/Card/TabbedCardHeader.js b/awx/ui_next/src/components/Card/TabbedCardHeader.js
index 2fa040a9db..b73ea8d6c8 100644
--- a/awx/ui_next/src/components/Card/TabbedCardHeader.js
+++ b/awx/ui_next/src/components/Card/TabbedCardHeader.js
@@ -7,7 +7,7 @@ const TabbedCardHeader = styled(CardHeader)`
   --pf-c-card--child--PaddingRight: 0;
   --pf-c-card__header--not-last-child--PaddingBottom: 24px;
   --pf-c-card__header--not-last-child--PaddingBottom: 0;
-  position: relative;
+  display: flex;
 `;
 
 export default TabbedCardHeader;
diff --git a/awx/ui_next/src/components/CardCloseButton/CardCloseButton.jsx b/awx/ui_next/src/components/CardCloseButton/CardCloseButton.jsx
index 3802d1e9e0..987908c316 100644
--- a/awx/ui_next/src/components/CardCloseButton/CardCloseButton.jsx
+++ b/awx/ui_next/src/components/CardCloseButton/CardCloseButton.jsx
@@ -1,24 +1,16 @@
 import React from 'react';
 import { string } from 'prop-types';
-import { Link as RRLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Button } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import styled from 'styled-components';
-
-const Link = styled(RRLink)`
-  position: absolute;
-  top: 5px;
-  right: 4px;
-  color: var(--pf-c-button--m-plain--Color);
-`;
 
 function CardCloseButton({ linkTo, i18n, i18nHash, ...props }) {
   if (linkTo) {
     return (
       <Link
-        className="pf-c-button"
+        className="pf-c-button pf-m-plain"
         aria-label={i18n._(t`Close`)}
         title={i18n._(t`Close`)}
         to={linkTo}
diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index ce1f53f053..baf03ff89d 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@@ -81,8 +81,8 @@ class DataListToolbar extends React.Component {
               <Sort qsConfig={qsConfig} columns={sortColumns} onSort={onSort} />
             </DataToolbarItem>
           </DataToolbarToggleGroup>
-          <DataToolbarGroup>
-            {showExpandCollapse && (
+          {showExpandCollapse && (
+            <DataToolbarGroup>
               <Fragment>
                 <DataToolbarItem>
                   <ExpandCollapse
@@ -92,9 +92,9 @@ class DataListToolbar extends React.Component {
                   />
                 </DataToolbarItem>
               </Fragment>
-            )}
-          </DataToolbarGroup>
-          <DataToolbarGroup css="margin-left: auto">
+            </DataToolbarGroup>
+          )}
+          <DataToolbarGroup>
             {additionalControls.map(control => (
               <DataToolbarItem key={control.key}>{control}</DataToolbarItem>
             ))}
diff --git a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
index 203de01483..7630e36653 100644
--- a/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
+++ b/awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
@@ -1,27 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { ActionGroup as PFActionGroup, Button } from '@patternfly/react-core';
-
-const ActionGroup = styled(PFActionGroup)`
-  display: flex;
-  justify-content: flex-end;
-  --pf-c-form__group--m-action--MarginTop: 0;
-  grid-column: 1 / -1;
-  margin-right: calc(var(--pf-c-form__actions--MarginRight) * -1);
-
-  .pf-c-form__actions {
-    & > button {
-      margin: 0;
-    }
-
-    & > :not(:first-child) {
-      margin-left: 24px;
-    }
-  }
-`;
+import { ActionGroup, Button } from '@patternfly/react-core';
 
 const FormActionGroup = ({ onSubmit, submitDisabled, onCancel, i18n }) => (
   <ActionGroup>
diff --git a/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx b/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx
index 95f46a1dd8..6819581c93 100644
--- a/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx
@@ -1,19 +1,9 @@
 import React from 'react';
 import { string, func } from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Button as PFButton, Tooltip } from '@patternfly/react-core';
-import { PlusIcon } from '@patternfly/react-icons';
+import { Button, Tooltip } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import styled from 'styled-components';
-
-const Button = styled(PFButton)`
-  && {
-    background-color: #5cb85c;
-    padding: 5px 8px;
-    --pf-global--FontSize--md: 14px;
-  }
-`;
 
 function ToolbarAddButton({ linkTo, onClick, i18n }) {
   if (!linkTo && !onClick) {
@@ -30,14 +20,14 @@ function ToolbarAddButton({ linkTo, onClick, i18n }) {
           variant="primary"
           aria-label={i18n._(t`Add`)}
         >
-          <PlusIcon />
+          {i18n._(t`Add`)}
         </Button>
       </Tooltip>
     );
   }
   return (
     <Button variant="primary" aria-label={i18n._(t`Add`)} onClick={onClick}>
-      <PlusIcon />
+      {i18n._(t`Add`)}
     </Button>
   );
 }
diff --git a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
index 0bad51f112..b50277c550 100644
--- a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
@@ -9,27 +9,10 @@ import {
   checkPropTypes,
 } from 'prop-types';
 import { Button, Tooltip } from '@patternfly/react-core';
-import { TrashAltIcon } from '@patternfly/react-icons';
-import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import AlertModal from '../AlertModal';
 
-const DeleteButton = styled(Button)`
-  padding: 5px 8px;
-
-  &:hover {
-    background-color: #d9534f;
-    color: white;
-  }
-
-  &[disabled] {
-    color: var(--pf-c-button--m-plain--Color);
-    pointer-events: initial;
-    cursor: not-allowed;
-  }
-`;
-
 const requireNameOrUsername = props => {
   const { name, username } = props;
   if (!name && !username) {
@@ -149,14 +132,14 @@ class ToolbarDeleteButton extends React.Component {
       <Fragment>
         <Tooltip content={this.renderTooltip()} position="top">
           <div>
-            <DeleteButton
-              variant="plain"
+            <Button
+              variant="danger"
               aria-label={i18n._(t`Delete`)}
               onClick={this.handleConfirmDelete}
               isDisabled={isDisabled}
             >
-              <TrashAltIcon />
-            </DeleteButton>
+              {i18n._(t`Delete`)}
+            </Button>
           </div>
         </Tooltip>
         {isModalOpen && (
diff --git a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.test.jsx b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.test.jsx
index d979701642..8383f4294f 100644
--- a/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.test.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.test.jsx
@@ -39,7 +39,9 @@ describe('<ToolbarDeleteButton />', () => {
     );
     wrapper.find('ToolbarDeleteButton').setState({ isModalOpen: true });
     wrapper.update();
-    wrapper.find('button.pf-m-danger').simulate('click');
+    wrapper
+      .find('ModalBoxFooter button[aria-label="confirm delete"]')
+      .simulate('click');
     expect(onDelete).toHaveBeenCalled();
     expect(wrapper.find('ToolbarDeleteButton').state('isModalOpen')).toBe(
       false
diff --git a/awx/ui_next/src/components/PaginatedDataList/__snapshots__/ToolbarDeleteButton.test.jsx.snap b/awx/ui_next/src/components/PaginatedDataList/__snapshots__/ToolbarDeleteButton.test.jsx.snap
index b5789b9e54..4894060b1a 100644
--- a/awx/ui_next/src/components/PaginatedDataList/__snapshots__/ToolbarDeleteButton.test.jsx.snap
+++ b/awx/ui_next/src/components/PaginatedDataList/__snapshots__/ToolbarDeleteButton.test.jsx.snap
@@ -97,121 +97,51 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
       zIndex={9999}
     >
       <div>
-        <ToolbarDeleteButton__DeleteButton
+        <Component
           aria-label="Delete"
           isDisabled={true}
           onClick={[Function]}
-          variant="plain"
+          variant="danger"
         >
-          <StyledComponent
-            aria-label="Delete"
-            forwardedComponent={
+          <ComponentWithOuia
+            component={[Function]}
+            componentProps={
               Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "attrs": Array [],
-                "componentStyle": ComponentStyle {
-                  "componentId": "ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0",
-                  "isStatic": true,
-                  "lastClassName": "bQjfFG",
-                  "rules": Array [
-                    "padding:5px 8px;&:hover{background-color:#d9534f;color:white;}&[disabled]{color:var(--pf-c-button--m-plain--Color);pointer-events:initial;cursor:not-allowed;}",
-                  ],
-                },
-                "displayName": "ToolbarDeleteButton__DeleteButton",
-                "foldedComponentIds": Array [],
-                "render": [Function],
-                "styledComponentId": "ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0",
-                "target": [Function],
-                "toString": [Function],
-                "warnTooManyClasses": [Function],
-                "withComponent": [Function],
+                "aria-label": "Delete",
+                "children": "Delete",
+                "isDisabled": true,
+                "onClick": [Function],
+                "variant": "danger",
               }
             }
-            forwardedRef={null}
-            isDisabled={true}
-            onClick={[Function]}
-            variant="plain"
+            consumerContext={null}
           >
-            <Component
+            <Button
               aria-label="Delete"
-              className="ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0 bQjfFG"
               isDisabled={true}
               onClick={[Function]}
-              variant="plain"
-            >
-              <ComponentWithOuia
-                component={[Function]}
-                componentProps={
-                  Object {
-                    "aria-label": "Delete",
-                    "children": <TrashAltIcon
-                      color="currentColor"
-                      noVerticalAlign={false}
-                      size="sm"
-                      title={null}
-                    />,
-                    "className": "ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0 bQjfFG",
-                    "isDisabled": true,
-                    "onClick": [Function],
-                    "variant": "plain",
-                  }
+              ouiaContext={
+                Object {
+                  "isOuia": false,
+                  "ouiaId": null,
                 }
-                consumerContext={null}
+              }
+              variant="danger"
+            >
+              <button
+                aria-disabled={null}
+                aria-label="Delete"
+                className="pf-c-button pf-m-danger"
+                disabled={true}
+                onClick={[Function]}
+                tabIndex={null}
+                type="button"
               >
-                <Button
-                  aria-label="Delete"
-                  className="ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0 bQjfFG"
-                  isDisabled={true}
-                  onClick={[Function]}
-                  ouiaContext={
-                    Object {
-                      "isOuia": false,
-                      "ouiaId": null,
-                    }
-                  }
-                  variant="plain"
-                >
-                  <button
-                    aria-disabled={null}
-                    aria-label="Delete"
-                    className="pf-c-button pf-m-plain ToolbarDeleteButton__DeleteButton-sc-1e3r0eg-0 bQjfFG"
-                    disabled={true}
-                    onClick={[Function]}
-                    tabIndex={null}
-                    type="button"
-                  >
-                    <TrashAltIcon
-                      color="currentColor"
-                      noVerticalAlign={false}
-                      size="sm"
-                      title={null}
-                    >
-                      <svg
-                        aria-hidden={true}
-                        aria-labelledby={null}
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style={
-                          Object {
-                            "verticalAlign": "-0.125em",
-                          }
-                        }
-                        viewBox="0 0 448 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
-                          transform=""
-                        />
-                      </svg>
-                    </TrashAltIcon>
-                  </button>
-                </Button>
-              </ComponentWithOuia>
-            </Component>
-          </StyledComponent>
-        </ToolbarDeleteButton__DeleteButton>
+                Delete
+              </button>
+            </Button>
+          </ComponentWithOuia>
+        </Component>
       </div>
       <Portal
         containerInfo={
diff --git a/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx b/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx
index 609df53fdc..27a0bf2940 100644
--- a/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx
+++ b/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx
@@ -1,40 +1,7 @@
 import React from 'react';
 import { shape, string, number, arrayOf, node, oneOfType } from 'prop-types';
-import { Tab, Tabs as PFTabs } from '@patternfly/react-core';
+import { Tab, Tabs } from '@patternfly/react-core';
 import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
-
-const Tabs = styled(PFTabs)`
-  --pf-c-tabs__button--PaddingLeft: 20px;
-  --pf-c-tabs__button--PaddingRight: 20px;
-
-  .pf-c-tabs__list {
-    li:first-of-type .pf-c-tabs__button {
-      &::before {
-        border-left: none;
-      }
-      &::after {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .pf-c-tabs__item.pf-m-current .pf-c-tabs__button {
-    font-weight: bold;
-  }
-
-  &:not(.pf-c-tabs__item)::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    content: '';
-    border: solid var(--pf-c-tabs__item--BorderColor);
-    border-width: var(--pf-c-tabs__item--BorderWidth) 0
-      var(--pf-c-tabs__item--BorderWidth) 0;
-  }
-`;
 
 function RoutedTabs(props) {
   const { tabsArray } = props;
diff --git a/awx/ui_next/src/components/Search/Search.jsx b/awx/ui_next/src/components/Search/Search.jsx
index 6413bfe785..10f75c4ab8 100644
--- a/awx/ui_next/src/components/Search/Search.jsx
+++ b/awx/ui_next/src/components/Search/Search.jsx
@@ -204,7 +204,6 @@ class Search extends React.Component {
               }
               isOpen={isSearchDropdownOpen}
               dropdownItems={searchDropdownItems}
-              style={{ width: '100%', maxWidth: '100px' }}
             />
           ) : (
             <NoOptionDropdown>{searchColumnName}</NoOptionDropdown>
diff --git a/awx/ui_next/src/components/Sort/Sort.jsx b/awx/ui_next/src/components/Sort/Sort.jsx
index b5f18d7eff..79e4eda02f 100644
--- a/awx/ui_next/src/components/Sort/Sort.jsx
+++ b/awx/ui_next/src/components/Sort/Sort.jsx
@@ -135,7 +135,6 @@ class Sort extends React.Component {
                 onSelect={this.handleDropdownSelect}
                 direction={up}
                 isOpen={isSortDropdownOpen}
-                style={{ width: '100%', maxWidth: '100px' }}
                 toggle={
                   <DropdownToggle
                     id="awx-sort"
diff --git a/awx/ui_next/src/screens/Credential/Credential.jsx b/awx/ui_next/src/screens/Credential/Credential.jsx
index d7f0754d97..e41eae2561 100644
--- a/awx/ui_next/src/screens/Credential/Credential.jsx
+++ b/awx/ui_next/src/screens/Credential/Credential.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card, PageSection, CardActions } from '@patternfly/react-core';
 import {
   Switch,
   useParams,
@@ -60,7 +60,9 @@ function Credential({ i18n, setBreadcrumb }) {
   let cardHeader = hasContentLoading ? null : (
     <TabbedCardHeader>
       <RoutedTabs tabsArray={tabsArray} />
-      <CardCloseButton linkTo="/credentials" />
+      <CardActions>
+        <CardCloseButton linkTo="/credentials" />
+      </CardActions>
     </TabbedCardHeader>
   );
 
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
index 40d7a65657..92a45eb677 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
@@ -119,15 +119,15 @@ function CredentialList({ i18n }) {
               onSelectAll={handleSelectAll}
               qsConfig={QS_CONFIG}
               additionalControls={[
+                ...(canAdd
+                  ? [<ToolbarAddButton key="add" linkTo="/credentials/add" />]
+                  : []),
                 <ToolbarDeleteButton
                   key="delete"
                   onDelete={handleDelete}
                   itemsToDelete={selected}
                   pluralizedItemName={i18n._(t`Credentials`)}
                 />,
-                ...(canAdd
-                  ? [<ToolbarAddButton key="add" linkTo="/credentials/add" />]
-                  : []),
               ]}
             />
           )}
diff --git a/awx/ui_next/src/screens/Host/Host.jsx b/awx/ui_next/src/screens/Host/Host.jsx
index 0b26a0ad61..57670658bc 100644
--- a/awx/ui_next/src/screens/Host/Host.jsx
+++ b/awx/ui_next/src/screens/Host/Host.jsx
@@ -9,7 +9,7 @@ import {
   useRouteMatch,
   useLocation,
 } from 'react-router-dom';
-import { Card } from '@patternfly/react-core';
+import { Card, CardActions } from '@patternfly/react-core';
 import { CaretLeftIcon } from '@patternfly/react-icons';
 
 import { TabbedCardHeader } from '@components/Card';
@@ -103,7 +103,9 @@ function Host({ inventory, i18n, setBreadcrumb }) {
   let cardHeader = (
     <TabbedCardHeader>
       <RoutedTabs tabsArray={tabsArray} />
-      <CardCloseButton linkTo={hostListUrl} />
+      <CardActions>
+        <CardCloseButton linkTo={hostListUrl} />
+      </CardActions>
     </TabbedCardHeader>
   );
 
diff --git a/awx/ui_next/src/screens/Host/HostList/HostList.jsx b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
index b4138fc26f..36d831bb7a 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostList.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
@@ -134,15 +134,15 @@ function HostList({ i18n }) {
               onSelectAll={handleSelectAll}
               qsConfig={QS_CONFIG}
               additionalControls={[
+                ...(canAdd
+                  ? [<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />]
+                  : []),
                 <ToolbarDeleteButton
                   key="delete"
                   onDelete={handleHostDelete}
                   itemsToDelete={selected}
                   pluralizedItemName={i18n._(t`Hosts`)}
                 />,
-                ...(canAdd
-                  ? [<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />]
-                  : []),
               ]}
             />
           )}
diff --git a/awx/ui_next/src/screens/Inventory/Inventory.jsx b/awx/ui_next/src/screens/Inventory/Inventory.jsx
index 3eb114a466..e28ffedc02 100644
--- a/awx/ui_next/src/screens/Inventory/Inventory.jsx
+++ b/awx/ui_next/src/screens/Inventory/Inventory.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import {
   Switch,
   Route,
@@ -66,7 +66,9 @@ function Inventory({ i18n, setBreadcrumb }) {
   let cardHeader = hasContentLoading ? null : (
     <TabbedCardHeader>
       <RoutedTabs tabsArray={tabsArray} />
-      <CardCloseButton linkTo="/inventories" />
+      <CardActions>
+        <CardCloseButton linkTo="/inventories" />
+      </CardActions>
     </TabbedCardHeader>
   );
 
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx
index 351f682755..ef5b0a7995 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroup/InventoryGroup.jsx
@@ -10,8 +10,8 @@ import {
   useLocation,
   useParams,
 } from 'react-router-dom';
+import { CardActions } from '@patternfly/react-core';
 import { CaretLeftIcon } from '@patternfly/react-icons';
-import { GroupsAPI } from '@api';
 import CardCloseButton from '@components/CardCloseButton';
 import RoutedTabs from '@components/RoutedTabs';
 import ContentError from '@components/ContentError';
@@ -19,6 +19,7 @@ import ContentLoading from '@components/ContentLoading';
 import { TabbedCardHeader } from '@components/Card';
 import InventoryGroupEdit from '../InventoryGroupEdit/InventoryGroupEdit';
 import InventoryGroupDetail from '../InventoryGroupDetail/InventoryGroupDetail';
+import { GroupsAPI } from '@api';
 
 function InventoryGroup({ i18n, setBreadcrumb, inventory }) {
   const [inventoryGroup, setInventoryGroup] = useState(null);
@@ -109,9 +110,11 @@ function InventoryGroup({ i18n, setBreadcrumb, inventory }) {
     cardHeader = (
       <TabbedCardHeader>
         <RoutedTabs tabsArray={tabsArray} />
-        <CardCloseButton
-          linkTo={`/inventories/inventory/${inventory.id}/groups`}
-        />
+        <CardActions>
+          <CardCloseButton
+            linkTo={`/inventories/inventory/${inventory.id}/groups`}
+          />
+        </CardActions>
       </TabbedCardHeader>
     );
   }
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
index f511d83156..0a8e95d677 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { TrashAltIcon } from '@patternfly/react-icons';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -12,7 +11,6 @@ import DataListToolbar from '@components/DataListToolbar';
 import PaginatedDataList, {
   ToolbarAddButton,
 } from '@components/PaginatedDataList';
-import styled from 'styled-components';
 import InventoryGroupItem from './InventoryGroupItem';
 import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';
 
@@ -22,21 +20,6 @@ const QS_CONFIG = getQSConfig('group', {
   order_by: 'name',
 });
 
-const DeleteButton = styled(Button)`
-  padding: 5px 8px;
-
-  &:hover {
-    background-color: #d9534f;
-    color: white;
-  }
-
-  &[disabled] {
-    color: var(--pf-c-button--m-plain--Color);
-    pointer-events: initial;
-    cursor: not-allowed;
-  }
-`;
-
 function cannotDelete(item) {
   return !item.summary_fields.user_capabilities.delete;
 }
@@ -224,20 +207,6 @@ function InventoryGroupsList({ i18n, location, match }) {
             onSelectAll={handleSelectAll}
             qsConfig={QS_CONFIG}
             additionalControls={[
-              <Tooltip content={renderTooltip()} position="top" key="delete">
-                <div>
-                  <DeleteButton
-                    variant="plain"
-                    aria-label={i18n._(t`Delete`)}
-                    onClick={toggleModal}
-                    isDisabled={
-                      selected.length === 0 || selected.some(cannotDelete)
-                    }
-                  >
-                    <TrashAltIcon />
-                  </DeleteButton>
-                </div>
-              </Tooltip>,
               ...(canAdd
                 ? [
                     <ToolbarAddButton
@@ -246,6 +215,20 @@ function InventoryGroupsList({ i18n, location, match }) {
                     />,
                   ]
                 : []),
+              <Tooltip content={renderTooltip()} position="top" key="delete">
+                <div>
+                  <Button
+                    variant="danger"
+                    aria-label={i18n._(t`Delete`)}
+                    onClick={toggleModal}
+                    isDisabled={
+                      selected.length === 0 || selected.some(cannotDelete)
+                    }
+                  >
+                    {i18n._(t`Delete`)}
+                  </Button>
+                </div>
+              </Tooltip>,
             ]}
           />
         )}
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
index d59890040c..4f8016a2f7 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
@@ -159,12 +159,6 @@ function InventoryHostList({ i18n, location, match }) {
             onSelectAll={handleSelectAll}
             qsConfig={QS_CONFIG}
             additionalControls={[
-              <ToolbarDeleteButton
-                key="delete"
-                onDelete={handleDelete}
-                itemsToDelete={selected}
-                pluralizedItemName={i18n._(t`Hosts`)}
-              />,
               ...(canAdd
                 ? [
                     <ToolbarAddButton
@@ -173,6 +167,12 @@ function InventoryHostList({ i18n, location, match }) {
                     />,
                   ]
                 : []),
+              <ToolbarDeleteButton
+                key="delete"
+                onDelete={handleDelete}
+                itemsToDelete={selected}
+                pluralizedItemName={i18n._(t`Hosts`)}
+              />,
             ]}
           />
         )}
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
index 6884adf4f7..39c7d503ec 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
@@ -202,13 +202,13 @@ class InventoriesList extends Component {
                 onSelectAll={this.handleSelectAll}
                 qsConfig={QS_CONFIG}
                 additionalControls={[
+                  ...(canAdd ? [addButton] : []),
                   <ToolbarDeleteButton
                     key="delete"
                     onDelete={this.handleInventoryDelete}
                     itemsToDelete={selected}
                     pluralizedItemName="Inventories"
                   />,
-                  ...(canAdd ? [addButton] : []),
                 ]}
               />
             )}
diff --git a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx
index 39560ad4a3..50907083d1 100644
--- a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx
+++ b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
 import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
@@ -77,7 +77,9 @@ class SmartInventory extends Component {
     let cardHeader = hasContentLoading ? null : (
       <TabbedCardHeader>
         <RoutedTabs tabsArray={tabsArray} />
-        <CardCloseButton linkTo="/inventories" />
+        <CardActions>
+          <CardCloseButton linkTo="/inventories" />
+        </CardActions>
       </TabbedCardHeader>
     );
 
diff --git a/awx/ui_next/src/screens/Job/Job.jsx b/awx/ui_next/src/screens/Job/Job.jsx
index 14efb2d14e..7f0da98d40 100644
--- a/awx/ui_next/src/screens/Job/Job.jsx
+++ b/awx/ui_next/src/screens/Job/Job.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Route, withRouter, Switch, Redirect, Link } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import { JobsAPI } from '@api';
 import { TabbedCardHeader } from '@components/Card';
 import ContentError from '@components/ContentError';
@@ -74,7 +74,9 @@ class Job extends Component {
     let cardHeader = (
       <TabbedCardHeader>
         <RoutedTabs tabsArray={tabsArray} />
-        <CardCloseButton linkTo="/jobs" />
+        <CardActions>
+          <CardCloseButton linkTo="/jobs" />
+        </CardActions>
       </TabbedCardHeader>
     );
 
diff --git a/awx/ui_next/src/screens/Organization/Organization.jsx b/awx/ui_next/src/screens/Organization/Organization.jsx
index c469bf0c0a..ac366fa71f 100644
--- a/awx/ui_next/src/screens/Organization/Organization.jsx
+++ b/awx/ui_next/src/screens/Organization/Organization.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import CardCloseButton from '@components/CardCloseButton';
 import { TabbedCardHeader } from '@components/Card';
 import RoutedTabs from '@components/RoutedTabs';
@@ -132,7 +132,9 @@ class Organization extends Component {
     let cardHeader = (
       <TabbedCardHeader>
         <RoutedTabs tabsArray={tabsArray} />
-        <CardCloseButton linkTo="/organizations" />
+        <CardActions>
+          <CardCloseButton linkTo="/organizations" />
+        </CardActions>
       </TabbedCardHeader>
     );
 
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
index 1b116e3096..b72c9511f0 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
@@ -140,15 +140,15 @@ function OrganizationsList({ i18n }) {
                 onSelectAll={handleSelectAll}
                 qsConfig={QS_CONFIG}
                 additionalControls={[
+                  ...(canAdd
+                    ? [<ToolbarAddButton key="add" linkTo={addUrl} />]
+                    : []),
                   <ToolbarDeleteButton
                     key="delete"
                     onDelete={handleOrgDelete}
                     itemsToDelete={selected}
                     pluralizedItemName="Organizations"
                   />,
-                  ...(canAdd
-                    ? [<ToolbarAddButton key="add" linkTo={addUrl} />]
-                    : []),
                 ]}
               />
             )}
diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx
index a6a2cf16b0..4587bfd44c 100644
--- a/awx/ui_next/src/screens/Project/Project.jsx
+++ b/awx/ui_next/src/screens/Project/Project.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import RoutedTabs from '@components/RoutedTabs';
@@ -152,7 +152,9 @@ class Project extends Component {
     let cardHeader = (
       <TabbedCardHeader>
         <RoutedTabs tabsArray={tabsArray} />
-        <CardCloseButton linkTo="/projects" />
+        <CardActions>
+          <CardCloseButton linkTo="/projects" />
+        </CardActions>
       </TabbedCardHeader>
     );
 
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
index 4311f17a61..5d305fc448 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
@@ -200,12 +200,6 @@ class ProjectsList extends Component {
                   onSelectAll={this.handleSelectAll}
                   qsConfig={QS_CONFIG}
                   additionalControls={[
-                    <ToolbarDeleteButton
-                      key="delete"
-                      onDelete={this.handleProjectDelete}
-                      itemsToDelete={selected}
-                      pluralizedItemName={i18n._(t`Projects`)}
-                    />,
                     ...(canAdd
                       ? [
                           <ToolbarAddButton
@@ -214,6 +208,12 @@ class ProjectsList extends Component {
                           />,
                         ]
                       : []),
+                    <ToolbarDeleteButton
+                      key="delete"
+                      onDelete={this.handleProjectDelete}
+                      itemsToDelete={selected}
+                      pluralizedItemName={i18n._(t`Projects`)}
+                    />,
                   ]}
                 />
               )}
diff --git a/awx/ui_next/src/screens/Team/Team.jsx b/awx/ui_next/src/screens/Team/Team.jsx
index d471a45da3..705ed88105 100644
--- a/awx/ui_next/src/screens/Team/Team.jsx
+++ b/awx/ui_next/src/screens/Team/Team.jsx
@@ -9,7 +9,7 @@ import {
   useLocation,
   useParams,
 } from 'react-router-dom';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import CardCloseButton from '@components/CardCloseButton';
 import { TabbedCardHeader } from '@components/Card';
 import RoutedTabs from '@components/RoutedTabs';
@@ -48,7 +48,9 @@ function Team({ i18n, setBreadcrumb }) {
   let cardHeader = (
     <TabbedCardHeader>
       <RoutedTabs tabsArray={tabsArray} />
-      <CardCloseButton linkTo="/teams" />
+      <CardActions>
+        <CardCloseButton linkTo="/teams" />
+      </CardActions>
     </TabbedCardHeader>
   );
 
diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
index e3912890e6..cf02be5fac 100644
--- a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
@@ -187,12 +187,6 @@ class TeamsList extends Component {
                   onSelectAll={this.handleSelectAll}
                   qsConfig={QS_CONFIG}
                   additionalControls={[
-                    <ToolbarDeleteButton
-                      key="delete"
-                      onDelete={this.handleTeamDelete}
-                      itemsToDelete={selected}
-                      pluralizedItemName={i18n._(t`Teams`)}
-                    />,
                     ...(canAdd
                       ? [
                           <ToolbarAddButton
@@ -201,6 +195,12 @@ class TeamsList extends Component {
                           />,
                         ]
                       : []),
+                    <ToolbarDeleteButton
+                      key="delete"
+                      onDelete={this.handleTeamDelete}
+                      itemsToDelete={selected}
+                      pluralizedItemName={i18n._(t`Teams`)}
+                    />,
                   ]}
                 />
               )}
diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx
index 660e7beed8..c8863edb1e 100644
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
 import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
@@ -124,7 +124,9 @@ class Template extends Component {
     let cardHeader = (
       <TabbedCardHeader>
         <RoutedTabs tabsArray={tabsArray} />
-        <CardCloseButton linkTo="/templates" />
+        <CardActions>
+          <CardCloseButton linkTo="/templates" />
+        </CardActions>
       </TabbedCardHeader>
     );
 
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index 04f19229c2..717b1b5f89 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -213,13 +213,13 @@ function TemplateList({ i18n }) {
               onSelectAll={handleSelectAll}
               qsConfig={QS_CONFIG}
               additionalControls={[
+                ...(canAddJT || canAddWFJT ? [addButton] : []),
                 <ToolbarDeleteButton
                   key="delete"
                   onDelete={handleTemplateDelete}
                   itemsToDelete={selected}
                   pluralizedItemName="Templates"
                 />,
-                ...(canAddJT || canAddWFJT ? [addButton] : []),
               ]}
             />
           )}
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index 1ab1bfe434..0922e00b84 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import { Switch, Route, Redirect, withRouter, Link } from 'react-router-dom';
 import { TabbedCardHeader } from '@components/Card';
 import AppendBody from '@components/AppendBody';
@@ -90,7 +90,9 @@ class WorkflowJobTemplate extends Component {
     let cardHeader = hasContentLoading ? null : (
       <TabbedCardHeader>
         <RoutedTabs tabsArray={tabsArray} />
-        <CardCloseButton linkTo="/templates" />
+        <CardActions>
+          <CardCloseButton linkTo="/templates" />
+        </CardActions>
       </TabbedCardHeader>
     );
 
diff --git a/awx/ui_next/src/screens/User/User.jsx b/awx/ui_next/src/screens/User/User.jsx
index 2e711bd7f2..5eb0e633a4 100644
--- a/awx/ui_next/src/screens/User/User.jsx
+++ b/awx/ui_next/src/screens/User/User.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Switch, Route, withRouter, Redirect, Link } from 'react-router-dom';
-import { Card, PageSection } from '@patternfly/react-core';
+import { Card, CardActions, PageSection } from '@patternfly/react-core';
 import { TabbedCardHeader } from '@components/Card';
 import CardCloseButton from '@components/CardCloseButton';
 import RoutedTabs from '@components/RoutedTabs';
@@ -81,7 +81,9 @@ class User extends Component {
     let cardHeader = (
       <TabbedCardHeader>
         <RoutedTabs tabsArray={tabsArray} />
-        <CardCloseButton linkTo="/users" />
+        <CardActions>
+          <CardCloseButton linkTo="/users" />
+        </CardActions>
       </TabbedCardHeader>
     );
 
diff --git a/awx/ui_next/src/screens/User/UserList/UserList.jsx b/awx/ui_next/src/screens/User/UserList/UserList.jsx
index 3ef03c3816..3c9590040c 100644
--- a/awx/ui_next/src/screens/User/UserList/UserList.jsx
+++ b/awx/ui_next/src/screens/User/UserList/UserList.jsx
@@ -191,12 +191,6 @@ class UsersList extends Component {
                   onSelectAll={this.handleSelectAll}
                   qsConfig={QS_CONFIG}
                   additionalControls={[
-                    <ToolbarDeleteButton
-                      key="delete"
-                      onDelete={this.handleUserDelete}
-                      itemsToDelete={selected}
-                      pluralizedItemName="Users"
-                    />,
                     ...(canAdd
                       ? [
                           <ToolbarAddButton
@@ -205,6 +199,12 @@ class UsersList extends Component {
                           />,
                         ]
                       : []),
+                    <ToolbarDeleteButton
+                      key="delete"
+                      onDelete={this.handleUserDelete}
+                      itemsToDelete={selected}
+                      pluralizedItemName="Users"
+                    />,
                   ]}
                 />
               )}