Remove ListActionButton component

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>
     );
   }

awx/ui_next/src/components/ListActionButton/ListActionButton.jsx

@@ -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;
-  }
-`;

awx/ui_next/src/components/ListActionButton/ListActionButton.test.jsx

@@ -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);
-  });
-});

awx/ui_next/src/components/ListActionButton/index.js

@@ -1 +0,0 @@
-export { default } from './ListActionButton';

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,

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}
@@ -323,55 +323,12 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                         label="Start"
                         labelOff="Start"
                         onChange={[Function]}
-                      >
-                        <StyledComponent
-                          aria-label="Toggle notification start"
-                          forwardedComponent={
-                            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],
-                            }
-                          }
-                          forwardedRef={null}
-                          id="notification-9000-started-toggle"
-                          isChecked={false}
-                          isDisabled={false}
-                          label="Start"
-                          labelOff="Start"
-                          onChange={[Function]}
-                        >
-                          <PFSwitch
-                            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]}
                       >
                         <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,
@@ -384,7 +341,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                         >
                           <Switch
                             aria-label="Toggle notification start"
-                                className="Switch-sc-1xwas62-0 eJQXYh"
+                            className=""
                             id="notification-9000-started-toggle"
                             isChecked={false}
                             isDisabled={false}
@@ -399,7 +356,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                             }
                           >
                             <label
-                                  className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
+                              className="pf-c-switch"
                               htmlFor="notification-9000-started-toggle"
                             >
                               <input
@@ -432,10 +389,8 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                             </label>
                           </Switch>
                         </ComponentWithOuia>
-                          </PFSwitch>
+                      </Component>
-                        </StyledComponent>
+                      <Component
-                      </Switch>
-                      <Switch
                         aria-label="Toggle notification success"
                         id="notification-9000-success-toggle"
                         isChecked={false}
@@ -443,55 +398,12 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                         label="Success"
                         labelOff="Success"
                         onChange={[Function]}
-                      >
-                        <StyledComponent
-                          aria-label="Toggle notification success"
-                          forwardedComponent={
-                            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],
-                            }
-                          }
-                          forwardedRef={null}
-                          id="notification-9000-success-toggle"
-                          isChecked={false}
-                          isDisabled={false}
-                          label="Success"
-                          labelOff="Success"
-                          onChange={[Function]}
-                        >
-                          <PFSwitch
-                            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]}
                       >
                         <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,
@@ -504,7 +416,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                         >
                           <Switch
                             aria-label="Toggle notification success"
-                                className="Switch-sc-1xwas62-0 eJQXYh"
+                            className=""
                             id="notification-9000-success-toggle"
                             isChecked={false}
                             isDisabled={false}
@@ -519,7 +431,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                             }
                           >
                             <label
-                                  className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
+                              className="pf-c-switch"
                               htmlFor="notification-9000-success-toggle"
                             >
                               <input
@@ -552,10 +464,8 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                             </label>
                           </Switch>
                         </ComponentWithOuia>
-                          </PFSwitch>
+                      </Component>
-                        </StyledComponent>
+                      <Component
-                      </Switch>
-                      <Switch
                         aria-label="Toggle notification failure"
                         id="notification-9000-error-toggle"
                         isChecked={false}
@@ -563,55 +473,12 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                         label="Failure"
                         labelOff="Failure"
                         onChange={[Function]}
-                      >
-                        <StyledComponent
-                          aria-label="Toggle notification failure"
-                          forwardedComponent={
-                            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],
-                            }
-                          }
-                          forwardedRef={null}
-                          id="notification-9000-error-toggle"
-                          isChecked={false}
-                          isDisabled={false}
-                          label="Failure"
-                          labelOff="Failure"
-                          onChange={[Function]}
-                        >
-                          <PFSwitch
-                            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]}
                       >
                         <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,
@@ -624,7 +491,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                         >
                           <Switch
                             aria-label="Toggle notification failure"
-                                className="Switch-sc-1xwas62-0 eJQXYh"
+                            className=""
                             id="notification-9000-error-toggle"
                             isChecked={false}
                             isDisabled={false}
@@ -639,7 +506,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                             }
                           >
                             <label
-                                  className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
+                              className="pf-c-switch"
                               htmlFor="notification-9000-error-toggle"
                             >
                               <input
@@ -672,9 +539,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                             </label>
                           </Switch>
                         </ComponentWithOuia>
-                          </PFSwitch>
+                      </Component>
-                        </StyledComponent>
-                      </Switch>
                     </div>
                   </DataListCell>
                 </StyledComponent>

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>,

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>,

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
+                  <Button variant="plain" component={Link} to={editUrl}>
-                    variant="plain"
-                    component={Link}
-                    to={editUrl}
-                  >
                     <PencilAltIcon />
-                  </ListActionButton>
+                  </Button>
                 </Tooltip>
               )}
             </DataListCell>,

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
+                  <Button variant="plain" component={Link} to={`${editUrl}`}>
-                    variant="plain"
-                    component={Link}
-                    to={`${editUrl}`}
-                  >
                     <PencilAltIcon />
-                  </ListActionButton>
+                  </Button>
                 </Tooltip>
               )}
             </DataListCell>,

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(

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>,

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
+                          <Button variant="plain" onClick={handleRelaunch}>
-                            variant="plain"
-                            onClick={handleRelaunch}
-                          >
                             <RocketIcon />
-                          </ListActionButton>
+                          </Button>
                         )}
                       </LaunchButton>
                     </Tooltip>

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>,

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>,

awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx

@@ -37,7 +37,7 @@ const ManualSubForm = ({
 
   return (
     <>
-      {/* {options.length === 1 && ( */}
+      {options.length === 1 && (
         <Alert
           title={i18n._(t`WARNING: `)}
           css="grid-column: 1/-1"
@@ -52,7 +52,7 @@ const ManualSubForm = ({
             or have ${brandName} directly retrieve your playbooks from
             source control using the SCM Type option above.`)}
         </Alert>
-      {/* )} */}
+      )}
       <FormField
         id="project-base-dir"
         label={i18n._(t`Project Base Path`)}

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>,

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>,

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>,