From 590199baff52d590f5c5fa342634c0a9bce8ce2e Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Tue, 11 Feb 2020 16:11:47 -0500
Subject: [PATCH] Remove ListActionButton component

---
 .../ClipboardCopyButton.jsx                   |  16 +-
 .../ListActionButton/ListActionButton.jsx     |  11 -
 .../ListActionButton.test.jsx                 |  10 -
 .../src/components/ListActionButton/index.js  |   1 -
 .../NotificationList.test.jsx                 |  12 +-
 .../NotificationListItem.test.jsx.snap        | 441 ++++++------------
 .../CredentialList/CredentialListItem.jsx     |   8 +-
 .../screens/Host/HostList/HostListItem.jsx    |  10 +-
 .../InventoryGroups/InventoryGroupItem.jsx    |  12 +-
 .../InventoryHosts/InventoryHostItem.jsx      |  14 +-
 .../InventoryHosts/InventoryHostList.test.jsx |   8 +-
 .../InventoryList/InventoryListItem.jsx       |   8 +-
 .../src/screens/Job/JobList/JobListItem.jsx   |   9 +-
 .../OrganizationList/OrganizationListItem.jsx |   8 +-
 .../Project/ProjectList/ProjectListItem.jsx   |  16 +-
 .../shared/ProjectSubForms/ManualSubForm.jsx  |  20 +-
 .../screens/Team/TeamList/TeamListItem.jsx    |   8 +-
 .../TemplateList/TemplateListItem.jsx         |  12 +-
 .../screens/User/UserList/UserListItem.jsx    |   8 +-
 19 files changed, 226 insertions(+), 406 deletions(-)
 delete mode 100644 awx/ui_next/src/components/ListActionButton/ListActionButton.jsx
 delete mode 100644 awx/ui_next/src/components/ListActionButton/ListActionButton.test.jsx
 delete mode 100644 awx/ui_next/src/components/ListActionButton/index.js

diff --git a/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx b/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx
index 9bd91fbac3..8fcac00468 100644
--- a/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx
+++ b/awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx
@@ -3,18 +3,6 @@ import PropTypes from 'prop-types';
 import { Button, Tooltip } from '@patternfly/react-core';
 import { CopyIcon } from '@patternfly/react-icons';
 
-import styled from 'styled-components';
-
-const CopyButton = styled(Button)`
-  padding: 2px 4px;
-  margin-left: 8px;
-  border: none;
-  &:hover {
-    background-color: #0066cc;
-    color: white;
-  }
-`;
-
 export const clipboardCopyFunc = (event, text) => {
   const clipboard = event.currentTarget.parentElement;
   const el = document.createElement('input');
@@ -62,13 +50,13 @@ class ClipboardCopyButton extends React.Component {
         trigger="mouseenter focus click"
         content={copied ? clickTip : hoverTip}
       >
-        <CopyButton
+        <Button
           variant="plain"
           onClick={this.handleCopyClick}
           aria-label={hoverTip}
         >
           <CopyIcon />
-        </CopyButton>
+        </Button>
       </Tooltip>
     );
   }
diff --git a/awx/ui_next/src/components/ListActionButton/ListActionButton.jsx b/awx/ui_next/src/components/ListActionButton/ListActionButton.jsx
deleted file mode 100644
index 3081b4637f..0000000000
--- a/awx/ui_next/src/components/ListActionButton/ListActionButton.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Button } from '@patternfly/react-core';
-import styled from 'styled-components';
-
-export default styled(Button)`
-  padding: 5px 8px;
-  border: none;
-  &:hover {
-    background-color: #0066cc;
-    color: white;
-  }
-`;
diff --git a/awx/ui_next/src/components/ListActionButton/ListActionButton.test.jsx b/awx/ui_next/src/components/ListActionButton/ListActionButton.test.jsx
deleted file mode 100644
index cab3534a69..0000000000
--- a/awx/ui_next/src/components/ListActionButton/ListActionButton.test.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import ListActionButton from './ListActionButton';
-
-describe('ListActionButton', () => {
-  test('renders the expected content', () => {
-    const wrapper = mount(<ListActionButton />);
-    expect(wrapper).toHaveLength(1);
-  });
-});
diff --git a/awx/ui_next/src/components/ListActionButton/index.js b/awx/ui_next/src/components/ListActionButton/index.js
deleted file mode 100644
index de229f6c76..0000000000
--- a/awx/ui_next/src/components/ListActionButton/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ListActionButton';
diff --git a/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx b/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx
index bbc0a603b8..b0485542a3 100644
--- a/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx
+++ b/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx
@@ -123,7 +123,7 @@ describe('<NotificationList />', () => {
     const items = wrapper.find('NotificationListItem');
     items
       .at(1)
-      .find('PFSwitch[aria-label="Toggle notification success"]')
+      .find('Switch[aria-label="Toggle notification success"]')
       .prop('onChange')();
     expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
       1,
@@ -150,7 +150,7 @@ describe('<NotificationList />', () => {
     const items = wrapper.find('NotificationListItem');
     items
       .at(0)
-      .find('PFSwitch[aria-label="Toggle notification failure"]')
+      .find('Switch[aria-label="Toggle notification failure"]')
       .prop('onChange')();
     expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
       1,
@@ -178,7 +178,7 @@ describe('<NotificationList />', () => {
     const items = wrapper.find('NotificationListItem');
     items
       .at(0)
-      .find('PFSwitch[aria-label="Toggle notification start"]')
+      .find('Switch[aria-label="Toggle notification start"]')
       .prop('onChange')();
     expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
       1,
@@ -205,7 +205,7 @@ describe('<NotificationList />', () => {
     const items = wrapper.find('NotificationListItem');
     items
       .at(0)
-      .find('PFSwitch[aria-label="Toggle notification success"]')
+      .find('Switch[aria-label="Toggle notification success"]')
       .prop('onChange')();
     expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
       1,
@@ -232,7 +232,7 @@ describe('<NotificationList />', () => {
     const items = wrapper.find('NotificationListItem');
     items
       .at(1)
-      .find('PFSwitch[aria-label="Toggle notification failure"]')
+      .find('Switch[aria-label="Toggle notification failure"]')
       .prop('onChange')();
     expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
       1,
@@ -259,7 +259,7 @@ describe('<NotificationList />', () => {
     const items = wrapper.find('NotificationListItem');
     items
       .at(2)
-      .find('PFSwitch[aria-label="Toggle notification start"]')
+      .find('Switch[aria-label="Toggle notification start"]')
       .prop('onChange')();
     expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
       1,
diff --git a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
index 7f6acb15b1..c531e44c0c 100644
--- a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
+++ b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
@@ -63,7 +63,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                 <ForwardRef
                   righthalf="true"
                 >
-                  <ForwardRef
+                  <Unknown
                     aria-label="Toggle notification start"
                     id="notification-9000-started-toggle"
                     isChecked={false}
@@ -72,7 +72,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                     labelOff="Start"
                     onChange={[Function]}
                   />
-                  <ForwardRef
+                  <Unknown
                     aria-label="Toggle notification success"
                     id="notification-9000-success-toggle"
                     isChecked={false}
@@ -81,7 +81,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                     labelOff="Success"
                     onChange={[Function]}
                   />
-                  <ForwardRef
+                  <Unknown
                     aria-label="Toggle notification failure"
                     id="notification-9000-error-toggle"
                     isChecked={false}
@@ -315,7 +315,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                       className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 dXsFLF"
                       righthalf="true"
                     >
-                      <Switch
+                      <Component
                         aria-label="Toggle notification start"
                         id="notification-9000-started-toggle"
                         isChecked={false}
@@ -324,118 +324,73 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                         labelOff="Start"
                         onChange={[Function]}
                       >
-                        <StyledComponent
-                          aria-label="Toggle notification start"
-                          forwardedComponent={
+                        <ComponentWithOuia
+                          component={[Function]}
+                          componentProps={
                             Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "Switch-sc-1xwas62-0",
-                                "isStatic": true,
-                                "lastClassName": "eJQXYh",
-                                "rules": Array [
-                                  "display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;",
-                                ],
-                              },
-                              "displayName": "Switch",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "Switch-sc-1xwas62-0",
-                              "target": [Function],
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
+                              "aria-label": "Toggle notification start",
+                              "id": "notification-9000-started-toggle",
+                              "isChecked": false,
+                              "isDisabled": false,
+                              "label": "Start",
+                              "labelOff": "Start",
+                              "onChange": [Function],
                             }
                           }
-                          forwardedRef={null}
-                          id="notification-9000-started-toggle"
-                          isChecked={false}
-                          isDisabled={false}
-                          label="Start"
-                          labelOff="Start"
-                          onChange={[Function]}
+                          consumerContext={null}
                         >
-                          <PFSwitch
+                          <Switch
                             aria-label="Toggle notification start"
-                            className="Switch-sc-1xwas62-0 eJQXYh"
+                            className=""
                             id="notification-9000-started-toggle"
                             isChecked={false}
                             isDisabled={false}
                             label="Start"
                             labelOff="Start"
                             onChange={[Function]}
-                          >
-                            <ComponentWithOuia
-                              component={[Function]}
-                              componentProps={
-                                Object {
-                                  "aria-label": "Toggle notification start",
-                                  "className": "Switch-sc-1xwas62-0 eJQXYh",
-                                  "id": "notification-9000-started-toggle",
-                                  "isChecked": false,
-                                  "isDisabled": false,
-                                  "label": "Start",
-                                  "labelOff": "Start",
-                                  "onChange": [Function],
-                                }
+                            ouiaContext={
+                              Object {
+                                "isOuia": false,
+                                "ouiaId": null,
                               }
-                              consumerContext={null}
+                            }
+                          >
+                            <label
+                              className="pf-c-switch"
+                              htmlFor="notification-9000-started-toggle"
                             >
-                              <Switch
+                              <input
                                 aria-label="Toggle notification start"
-                                className="Switch-sc-1xwas62-0 eJQXYh"
+                                aria-labelledby={null}
+                                checked={false}
+                                className="pf-c-switch__input"
+                                disabled={false}
                                 id="notification-9000-started-toggle"
-                                isChecked={false}
-                                isDisabled={false}
-                                label="Start"
-                                labelOff="Start"
                                 onChange={[Function]}
-                                ouiaContext={
-                                  Object {
-                                    "isOuia": false,
-                                    "ouiaId": null,
-                                  }
-                                }
+                                type="checkbox"
+                              />
+                              <span
+                                className="pf-c-switch__toggle"
+                              />
+                              <span
+                                aria-hidden="true"
+                                className="pf-c-switch__label pf-m-on"
+                                id={null}
                               >
-                                <label
-                                  className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
-                                  htmlFor="notification-9000-started-toggle"
-                                >
-                                  <input
-                                    aria-label="Toggle notification start"
-                                    aria-labelledby={null}
-                                    checked={false}
-                                    className="pf-c-switch__input"
-                                    disabled={false}
-                                    id="notification-9000-started-toggle"
-                                    onChange={[Function]}
-                                    type="checkbox"
-                                  />
-                                  <span
-                                    className="pf-c-switch__toggle"
-                                  />
-                                  <span
-                                    aria-hidden="true"
-                                    className="pf-c-switch__label pf-m-on"
-                                    id={null}
-                                  >
-                                    Start
-                                  </span>
-                                  <span
-                                    aria-hidden="true"
-                                    className="pf-c-switch__label pf-m-off"
-                                    id={null}
-                                  >
-                                    Start
-                                  </span>
-                                </label>
-                              </Switch>
-                            </ComponentWithOuia>
-                          </PFSwitch>
-                        </StyledComponent>
-                      </Switch>
-                      <Switch
+                                Start
+                              </span>
+                              <span
+                                aria-hidden="true"
+                                className="pf-c-switch__label pf-m-off"
+                                id={null}
+                              >
+                                Start
+                              </span>
+                            </label>
+                          </Switch>
+                        </ComponentWithOuia>
+                      </Component>
+                      <Component
                         aria-label="Toggle notification success"
                         id="notification-9000-success-toggle"
                         isChecked={false}
@@ -444,118 +399,73 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                         labelOff="Success"
                         onChange={[Function]}
                       >
-                        <StyledComponent
-                          aria-label="Toggle notification success"
-                          forwardedComponent={
+                        <ComponentWithOuia
+                          component={[Function]}
+                          componentProps={
                             Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "Switch-sc-1xwas62-0",
-                                "isStatic": true,
-                                "lastClassName": "eJQXYh",
-                                "rules": Array [
-                                  "display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;",
-                                ],
-                              },
-                              "displayName": "Switch",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "Switch-sc-1xwas62-0",
-                              "target": [Function],
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
+                              "aria-label": "Toggle notification success",
+                              "id": "notification-9000-success-toggle",
+                              "isChecked": false,
+                              "isDisabled": false,
+                              "label": "Success",
+                              "labelOff": "Success",
+                              "onChange": [Function],
                             }
                           }
-                          forwardedRef={null}
-                          id="notification-9000-success-toggle"
-                          isChecked={false}
-                          isDisabled={false}
-                          label="Success"
-                          labelOff="Success"
-                          onChange={[Function]}
+                          consumerContext={null}
                         >
-                          <PFSwitch
+                          <Switch
                             aria-label="Toggle notification success"
-                            className="Switch-sc-1xwas62-0 eJQXYh"
+                            className=""
                             id="notification-9000-success-toggle"
                             isChecked={false}
                             isDisabled={false}
                             label="Success"
                             labelOff="Success"
                             onChange={[Function]}
-                          >
-                            <ComponentWithOuia
-                              component={[Function]}
-                              componentProps={
-                                Object {
-                                  "aria-label": "Toggle notification success",
-                                  "className": "Switch-sc-1xwas62-0 eJQXYh",
-                                  "id": "notification-9000-success-toggle",
-                                  "isChecked": false,
-                                  "isDisabled": false,
-                                  "label": "Success",
-                                  "labelOff": "Success",
-                                  "onChange": [Function],
-                                }
+                            ouiaContext={
+                              Object {
+                                "isOuia": false,
+                                "ouiaId": null,
                               }
-                              consumerContext={null}
+                            }
+                          >
+                            <label
+                              className="pf-c-switch"
+                              htmlFor="notification-9000-success-toggle"
                             >
-                              <Switch
+                              <input
                                 aria-label="Toggle notification success"
-                                className="Switch-sc-1xwas62-0 eJQXYh"
+                                aria-labelledby={null}
+                                checked={false}
+                                className="pf-c-switch__input"
+                                disabled={false}
                                 id="notification-9000-success-toggle"
-                                isChecked={false}
-                                isDisabled={false}
-                                label="Success"
-                                labelOff="Success"
                                 onChange={[Function]}
-                                ouiaContext={
-                                  Object {
-                                    "isOuia": false,
-                                    "ouiaId": null,
-                                  }
-                                }
+                                type="checkbox"
+                              />
+                              <span
+                                className="pf-c-switch__toggle"
+                              />
+                              <span
+                                aria-hidden="true"
+                                className="pf-c-switch__label pf-m-on"
+                                id={null}
                               >
-                                <label
-                                  className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
-                                  htmlFor="notification-9000-success-toggle"
-                                >
-                                  <input
-                                    aria-label="Toggle notification success"
-                                    aria-labelledby={null}
-                                    checked={false}
-                                    className="pf-c-switch__input"
-                                    disabled={false}
-                                    id="notification-9000-success-toggle"
-                                    onChange={[Function]}
-                                    type="checkbox"
-                                  />
-                                  <span
-                                    className="pf-c-switch__toggle"
-                                  />
-                                  <span
-                                    aria-hidden="true"
-                                    className="pf-c-switch__label pf-m-on"
-                                    id={null}
-                                  >
-                                    Success
-                                  </span>
-                                  <span
-                                    aria-hidden="true"
-                                    className="pf-c-switch__label pf-m-off"
-                                    id={null}
-                                  >
-                                    Success
-                                  </span>
-                                </label>
-                              </Switch>
-                            </ComponentWithOuia>
-                          </PFSwitch>
-                        </StyledComponent>
-                      </Switch>
-                      <Switch
+                                Success
+                              </span>
+                              <span
+                                aria-hidden="true"
+                                className="pf-c-switch__label pf-m-off"
+                                id={null}
+                              >
+                                Success
+                              </span>
+                            </label>
+                          </Switch>
+                        </ComponentWithOuia>
+                      </Component>
+                      <Component
                         aria-label="Toggle notification failure"
                         id="notification-9000-error-toggle"
                         isChecked={false}
@@ -564,117 +474,72 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                         labelOff="Failure"
                         onChange={[Function]}
                       >
-                        <StyledComponent
-                          aria-label="Toggle notification failure"
-                          forwardedComponent={
+                        <ComponentWithOuia
+                          component={[Function]}
+                          componentProps={
                             Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "Switch-sc-1xwas62-0",
-                                "isStatic": true,
-                                "lastClassName": "eJQXYh",
-                                "rules": Array [
-                                  "display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;",
-                                ],
-                              },
-                              "displayName": "Switch",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "Switch-sc-1xwas62-0",
-                              "target": [Function],
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
+                              "aria-label": "Toggle notification failure",
+                              "id": "notification-9000-error-toggle",
+                              "isChecked": false,
+                              "isDisabled": false,
+                              "label": "Failure",
+                              "labelOff": "Failure",
+                              "onChange": [Function],
                             }
                           }
-                          forwardedRef={null}
-                          id="notification-9000-error-toggle"
-                          isChecked={false}
-                          isDisabled={false}
-                          label="Failure"
-                          labelOff="Failure"
-                          onChange={[Function]}
+                          consumerContext={null}
                         >
-                          <PFSwitch
+                          <Switch
                             aria-label="Toggle notification failure"
-                            className="Switch-sc-1xwas62-0 eJQXYh"
+                            className=""
                             id="notification-9000-error-toggle"
                             isChecked={false}
                             isDisabled={false}
                             label="Failure"
                             labelOff="Failure"
                             onChange={[Function]}
-                          >
-                            <ComponentWithOuia
-                              component={[Function]}
-                              componentProps={
-                                Object {
-                                  "aria-label": "Toggle notification failure",
-                                  "className": "Switch-sc-1xwas62-0 eJQXYh",
-                                  "id": "notification-9000-error-toggle",
-                                  "isChecked": false,
-                                  "isDisabled": false,
-                                  "label": "Failure",
-                                  "labelOff": "Failure",
-                                  "onChange": [Function],
-                                }
+                            ouiaContext={
+                              Object {
+                                "isOuia": false,
+                                "ouiaId": null,
                               }
-                              consumerContext={null}
+                            }
+                          >
+                            <label
+                              className="pf-c-switch"
+                              htmlFor="notification-9000-error-toggle"
                             >
-                              <Switch
+                              <input
                                 aria-label="Toggle notification failure"
-                                className="Switch-sc-1xwas62-0 eJQXYh"
+                                aria-labelledby={null}
+                                checked={false}
+                                className="pf-c-switch__input"
+                                disabled={false}
                                 id="notification-9000-error-toggle"
-                                isChecked={false}
-                                isDisabled={false}
-                                label="Failure"
-                                labelOff="Failure"
                                 onChange={[Function]}
-                                ouiaContext={
-                                  Object {
-                                    "isOuia": false,
-                                    "ouiaId": null,
-                                  }
-                                }
+                                type="checkbox"
+                              />
+                              <span
+                                className="pf-c-switch__toggle"
+                              />
+                              <span
+                                aria-hidden="true"
+                                className="pf-c-switch__label pf-m-on"
+                                id={null}
                               >
-                                <label
-                                  className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
-                                  htmlFor="notification-9000-error-toggle"
-                                >
-                                  <input
-                                    aria-label="Toggle notification failure"
-                                    aria-labelledby={null}
-                                    checked={false}
-                                    className="pf-c-switch__input"
-                                    disabled={false}
-                                    id="notification-9000-error-toggle"
-                                    onChange={[Function]}
-                                    type="checkbox"
-                                  />
-                                  <span
-                                    className="pf-c-switch__toggle"
-                                  />
-                                  <span
-                                    aria-hidden="true"
-                                    className="pf-c-switch__label pf-m-on"
-                                    id={null}
-                                  >
-                                    Failure
-                                  </span>
-                                  <span
-                                    aria-hidden="true"
-                                    className="pf-c-switch__label pf-m-off"
-                                    id={null}
-                                  >
-                                    Failure
-                                  </span>
-                                </label>
-                              </Switch>
-                            </ComponentWithOuia>
-                          </PFSwitch>
-                        </StyledComponent>
-                      </Switch>
+                                Failure
+                              </span>
+                              <span
+                                aria-hidden="true"
+                                className="pf-c-switch__label pf-m-off"
+                                id={null}
+                              >
+                                Failure
+                              </span>
+                            </label>
+                          </Switch>
+                        </ComponentWithOuia>
+                      </Component>
                     </div>
                   </DataListCell>
                 </StyledComponent>
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
index c1f1a7d095..937dde8607 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import {
+  Button,
   DataListItem,
   DataListItemRow,
   DataListItemCells as _DataListItemCells,
@@ -13,7 +14,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
-import ListActionButton from '@components/ListActionButton';
 import VerticalSeparator from '@components/VerticalSeparator';
 import styled from 'styled-components';
 import { Credential } from '@types';
@@ -58,16 +58,16 @@ function CredentialListItem({
             <DataListCell key="type">
               {credential.summary_fields.credential_type.name}
             </DataListCell>,
-            <DataListCell alignRight isFilled={false}>
+            <DataListCell key="edit" alignRight isFilled={false}>
               {canEdit && (
                 <Tooltip content={i18n._(t`Edit Credential`)} position="top">
-                  <ListActionButton
+                  <Button
                     variant="plain"
                     component={Link}
                     to={`/credentials/${credential.id}/edit`}
                   >
                     <PencilAltIcon />
-                  </ListActionButton>
+                  </Button>
                 </Tooltip>
               )}
             </DataListCell>,
diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
index a9420a7032..cb81224fd3 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
+  Button,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -14,7 +15,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
-import ListActionButton from '@components/ListActionButton';
 import { Sparkline } from '@components/Sparkline';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { Host } from '@types';
@@ -82,7 +82,7 @@ class HostListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
-              <DataListCell alignRight isFilled={false}>
+              <DataListCell key="enable" alignRight isFilled={false}>
                 <Tooltip
                   content={i18n._(
                     t`Indicates if a host is available and should be included in running jobs.  For hosts that are part of an external inventory, this may be reset by the inventory sync process.`
@@ -104,16 +104,16 @@ class HostListItem extends React.Component {
                   />
                 </Tooltip>
               </DataListCell>,
-              <DataListCell alignRight isFilled={false}>
+              <DataListCell key="edit" alignRight isFilled={false}>
                 {host.summary_fields.user_capabilities.edit && (
                   <Tooltip content={i18n._(t`Edit Host`)} position="top">
-                    <ListActionButton
+                    <Button
                       variant="plain"
                       component={Link}
                       to={`/hosts/${host.id}/edit`}
                     >
                       <PencilAltIcon />
-                    </ListActionButton>
+                    </Button>
                   </Tooltip>
                 )}
               </DataListCell>,
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
index 95dcb0eabc..94c4edb7f4 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
@@ -5,6 +5,7 @@ import { t } from '@lingui/macro';
 import { Group } from '@types';
 
 import {
+  Button,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -15,7 +16,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
-import ListActionButton from '@components/ListActionButton';
 import VerticalSeparator from '@components/VerticalSeparator';
 
 function InventoryGroupItem({
@@ -46,16 +46,12 @@ function InventoryGroupItem({
                 <b>{group.name}</b>
               </Link>
             </DataListCell>,
-            <DataListCell alignRight isFilled={false}>
+            <DataListCell key="edit" alignRight isFilled={false}>
               {group.summary_fields.user_capabilities.edit && (
                 <Tooltip content={i18n._(t`Edit Group`)} position="top">
-                  <ListActionButton
-                    variant="plain"
-                    component={Link}
-                    to={editUrl}
-                  >
+                  <Button variant="plain" component={Link} to={editUrl}>
                     <PencilAltIcon />
-                  </ListActionButton>
+                  </Button>
                 </Tooltip>
               )}
             </DataListCell>,
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
index 9d737af3b3..305fdfca92 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
+  Button,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -14,7 +15,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
-import ListActionButton from '@components/ListActionButton';
 import { Sparkline } from '@components/Sparkline';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { Host } from '@types';
@@ -58,7 +58,7 @@ function InventoryHostItem(props) {
             <DataListCell key="recentJobs">
               <Sparkline jobs={recentPlaybookJobs} />
             </DataListCell>,
-            <DataListCell alignRight isFilled={false}>
+            <DataListCell key="enable" alignRight isFilled={false}>
               <Tooltip
                 content={i18n._(
                   t`Indicates if a host is available and should be included
@@ -82,16 +82,12 @@ function InventoryHostItem(props) {
                 />
               </Tooltip>
             </DataListCell>,
-            <DataListCell alignRight isFilled={false}>
+            <DataListCell key="edit" alignRight isFilled={false}>
               {host.summary_fields.user_capabilities?.edit && (
                 <Tooltip content={i18n._(t`Edit Host`)} position="top">
-                  <ListActionButton
-                    variant="plain"
-                    component={Link}
-                    to={`${editUrl}`}
-                  >
+                  <Button variant="plain" component={Link} to={`${editUrl}`}>
                     <PencilAltIcon />
-                  </ListActionButton>
+                  </Button>
                 </Tooltip>
               )}
             </DataListCell>,
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
index e5d01c256d..0a60a71ada 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
@@ -154,14 +154,14 @@ describe('<InventoryHostList />', () => {
     HostsAPI.update.mockResolvedValueOnce({
       data: { ...mockHosts[1], enabled: false },
     });
-    expect(wrapper.find('PFSwitch[id="host-2-toggle"]').props().isChecked).toBe(
+    expect(wrapper.find('Switch[id="host-2-toggle"]').props().isChecked).toBe(
       true
     );
     await act(async () => {
-      wrapper.find('PFSwitch[id="host-2-toggle"]').invoke('onChange')();
+      wrapper.find('Switch[id="host-2-toggle"]').invoke('onChange')();
     });
     wrapper.update();
-    expect(wrapper.find('PFSwitch[id="host-2-toggle"]').props().isChecked).toBe(
+    expect(wrapper.find('Switch[id="host-2-toggle"]').props().isChecked).toBe(
       false
     );
     expect(HostsAPI.update).toHaveBeenCalledTimes(1);
@@ -170,7 +170,7 @@ describe('<InventoryHostList />', () => {
   test('should show error modal if host is not successfully toggled', async () => {
     HostsAPI.update.mockImplementationOnce(() => Promise.reject(new Error()));
     await act(async () => {
-      wrapper.find('PFSwitch[id="host-2-toggle"]').invoke('onChange')();
+      wrapper.find('Switch[id="host-2-toggle"]').invoke('onChange')();
     });
     wrapper.update();
     await waitForElement(
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
index 3eef420580..168ac9e61b 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
+  Button,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -13,7 +14,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
-import ListActionButton from '@components/ListActionButton';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { Inventory } from '@types';
 
@@ -54,10 +54,10 @@ class InventoryListItem extends React.Component {
                   ? i18n._(t`Smart Inventory`)
                   : i18n._(t`Inventory`)}
               </DataListCell>,
-              <DataListCell alignRight isFilled={false}>
+              <DataListCell key="edit" alignRight isFilled={false}>
                 {inventory.summary_fields.user_capabilities.edit && (
                   <Tooltip content={i18n._(t`Edit Inventory`)} position="top">
-                    <ListActionButton
+                    <Button
                       variant="plain"
                       component={Link}
                       to={`/inventories/${
@@ -67,7 +67,7 @@ class InventoryListItem extends React.Component {
                       }/${inventory.id}/edit`}
                     >
                       <PencilAltIcon />
-                    </ListActionButton>
+                    </Button>
                   </Tooltip>
                 )}
               </DataListCell>,
diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
index 51ec77b57c..47acd95865 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
+  Button,
   DataListCell,
   DataListCheck,
   DataListItem,
@@ -13,7 +14,6 @@ import {
 } from '@patternfly/react-core';
 import { RocketIcon } from '@patternfly/react-icons';
 import LaunchButton from '@components/LaunchButton';
-import ListActionButton from '@components/ListActionButton';
 import { StatusIcon } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
 import { formatDateString } from '@util/dates';
@@ -60,12 +60,9 @@ class JobListItem extends Component {
                     <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
                       <LaunchButton resource={job}>
                         {({ handleRelaunch }) => (
-                          <ListActionButton
-                            variant="plain"
-                            onClick={handleRelaunch}
-                          >
+                          <Button variant="plain" onClick={handleRelaunch}>
                             <RocketIcon />
-                          </ListActionButton>
+                          </Button>
                         )}
                       </LaunchButton>
                     </Tooltip>
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
index f376ae8bb4..261dee5700 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Badge as PFBadge,
+  Button,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -15,7 +16,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
-import ListActionButton from '@components/ListActionButton';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { Organization } from '@types';
 
@@ -84,16 +84,16 @@ function OrganizationListItem({
                 </Badge>
               </ListGroup>
             </DataListCell>,
-            <DataListCell alignRight isFilled={false}>
+            <DataListCell key="edit" alignRight isFilled={false}>
               {organization.summary_fields.user_capabilities.edit && (
                 <Tooltip content={i18n._(t`Edit Organization`)} position="top">
-                  <ListActionButton
+                  <Button
                     variant="plain"
                     component={Link}
                     to={`/organizations/${organization.id}/edit`}
                   >
                     <PencilAltIcon />
-                  </ListActionButton>
+                  </Button>
                 </Tooltip>
               )}
             </DataListCell>,
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
index 4348fe7da5..10626c5c70 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
+  Button,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -14,7 +15,6 @@ import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
 import ClipboardCopyButton from '@components/ClipboardCopyButton';
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
-import ListActionButton from '@components/ListActionButton';
 import ProjectSyncButton from '../shared/ProjectSyncButton';
 import { StatusIcon } from '@components/Sparkline';
 import VerticalSeparator from '@components/VerticalSeparator';
@@ -105,7 +105,7 @@ class ProjectListItem extends React.Component {
                   ? i18n._(t`Manual`)
                   : toTitleCase(project.scm_type)}
               </DataListCell>,
-              <DataListCell key="revision">
+              <DataListCell alignRight isFilled={false} key="revision">
                 {project.scm_revision.substring(0, 7)}
                 {project.scm_revision ? (
                   <ClipboardCopyButton
@@ -115,29 +115,29 @@ class ProjectListItem extends React.Component {
                   />
                 ) : null}
               </DataListCell>,
-              <DataListCell lastcolumn="true" key="action">
+              <DataListCell alignRight isFilled={false} key="sync">
                 {project.summary_fields.user_capabilities.start && (
                   <Tooltip content={i18n._(t`Sync Project`)} position="top">
                     <ProjectSyncButton projectId={project.id}>
                       {handleSync => (
-                        <ListActionButton variant="plain" onClick={handleSync}>
+                        <Button variant="plain" onClick={handleSync}>
                           <SyncIcon />
-                        </ListActionButton>
+                        </Button>
                       )}
                     </ProjectSyncButton>
                   </Tooltip>
                 )}
               </DataListCell>,
-              <DataListCell alignRight isFilled={false}>
+              <DataListCell key="edit" alignRight isFilled={false}>
                 {project.summary_fields.user_capabilities.edit && (
                   <Tooltip content={i18n._(t`Edit Project`)} position="top">
-                    <ListActionButton
+                    <Button
                       variant="plain"
                       component={Link}
                       to={`/projects/${project.id}/edit`}
                     >
                       <PencilAltIcon />
-                    </ListActionButton>
+                    </Button>
                   </Tooltip>
                 )}
               </DataListCell>,
diff --git a/awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx b/awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx
index 688d3eecc9..94a624b380 100644
--- a/awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx
+++ b/awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx
@@ -37,22 +37,22 @@ const ManualSubForm = ({
 
   return (
     <>
-      {/* {options.length === 1 && ( */}
-      <Alert
-        title={i18n._(t`WARNING: `)}
-        css="grid-column: 1/-1"
-        variant="warning"
-        isInline
-      >
-        {i18n._(t`
+      {options.length === 1 && (
+        <Alert
+          title={i18n._(t`WARNING: `)}
+          css="grid-column: 1/-1"
+          variant="warning"
+          isInline
+        >
+          {i18n._(t`
             There are no available playbook directories in ${project_base_dir}.
             Either that directory is empty, or all of the contents are already
             assigned to other projects. Create a new directory there and make
             sure the playbook files can be read by the "awx" system user,
             or have ${brandName} directly retrieve your playbooks from
             source control using the SCM Type option above.`)}
-      </Alert>
-      {/* )} */}
+        </Alert>
+      )}
       <FormField
         id="project-base-dir"
         label={i18n._(t`Project Base Path`)}
diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
index b13bccff3b..6668547824 100644
--- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
+  Button,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -13,7 +14,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
-import ListActionButton from '@components/ListActionButton';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { Team } from '@types';
 
@@ -59,16 +59,16 @@ class TeamListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
-              <DataListCell alignRight isFilled={false}>
+              <DataListCell key="edit" alignRight isFilled={false}>
                 {team.summary_fields.user_capabilities.edit && (
                   <Tooltip content={i18n._(t`Edit Team`)} position="top">
-                    <ListActionButton
+                    <Button
                       variant="plain"
                       component={Link}
                       to={`/teams/${team.id}/edit`}
                     >
                       <PencilAltIcon />
-                    </ListActionButton>
+                    </Button>
                   </Tooltip>
                 )}
               </DataListCell>,
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index 73f5991ff9..b3742dc574 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import {
+  Button,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -17,7 +18,6 @@ import {
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
 import LaunchButton from '@components/LaunchButton';
-import ListActionButton from '@components/ListActionButton';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { Sparkline } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
@@ -76,24 +76,24 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
                 <Tooltip content={i18n._(t`Launch Template`)} position="top">
                   <LaunchButton resource={template}>
                     {({ handleLaunch }) => (
-                      <ListActionButton variant="plain" onClick={handleLaunch}>
+                      <Button variant="plain" onClick={handleLaunch}>
                         <RocketIcon />
-                      </ListActionButton>
+                      </Button>
                     )}
                   </LaunchButton>
                 </Tooltip>
               )}
             </DataListCell>,
-            <DataListCell alignRight isFilled={false}>
+            <DataListCell key="edit" alignRight isFilled={false}>
               {template.summary_fields.user_capabilities.edit && (
                 <Tooltip content={i18n._(t`Edit Template`)} position="top">
-                  <ListActionButton
+                  <Button
                     variant="plain"
                     component={Link}
                     to={`/templates/${template.type}/${template.id}/edit`}
                   >
                     <PencilAltIcon />
-                  </ListActionButton>
+                  </Button>
                 </Tooltip>
               )}
             </DataListCell>,
diff --git a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
index e856564222..cf9ee9a382 100644
--- a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
+  Button,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
@@ -13,7 +14,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
 
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
-import ListActionButton from '@components/ListActionButton';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { User } from '@types';
 
@@ -61,16 +61,16 @@ class UserListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
-              <DataListCell alignRight isFilled={false}>
+              <DataListCell key="edit" alignRight isFilled={false}>
                 {user.summary_fields.user_capabilities.edit && (
                   <Tooltip content={i18n._(t`Edit User`)} position="top">
-                    <ListActionButton
+                    <Button
                       variant="plain"
                       component={Link}
                       to={`/users/${user.id}/edit`}
                     >
                       <PencilAltIcon />
-                    </ListActionButton>
+                    </Button>
                   </Tooltip>
                 )}
               </DataListCell>,