From 3b9dd3ba8c170b042c30fddb7b6aafee003c7fe5 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Tue, 11 Feb 2020 15:44:10 -0500
Subject: [PATCH] Remove ActionButtonCell component

---
 .../ActionButtonCell/ActionButtonCell.jsx     | 10 ---
 .../ActionButtonCell.test.jsx                 | 10 ---
 .../src/components/ActionButtonCell/index.js  |  1 -
 .../CheckboxListItem/CheckboxListItem.jsx     |  9 +--
 .../CredentialList/CredentialListItem.jsx     |  5 +-
 .../screens/Host/HostList/HostListItem.jsx    |  8 ++-
 .../InventoryGroups/InventoryGroupItem.jsx    |  5 +-
 .../InventoryHosts/InventoryHostItem.jsx      |  8 ++-
 .../InventoryList/InventoryListItem.jsx       |  5 +-
 .../src/screens/Job/JobList/JobListItem.jsx   | 14 ++--
 .../OrganizationList/OrganizationListItem.jsx |  5 +-
 .../Project/ProjectList/ProjectListItem.jsx   |  7 +-
 .../shared/ProjectSubForms/ManualSubForm.jsx  | 20 +++---
 .../screens/Team/TeamList/TeamListItem.jsx    |  5 +-
 .../TemplateList/TemplateListItem.jsx         | 67 +++----------------
 .../screens/User/UserList/UserListItem.jsx    |  5 +-
 16 files changed, 52 insertions(+), 132 deletions(-)
 delete mode 100644 awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.jsx
 delete mode 100644 awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.test.jsx
 delete mode 100644 awx/ui_next/src/components/ActionButtonCell/index.js

diff --git a/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.jsx b/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.jsx
deleted file mode 100644
index ce8f58ef27..0000000000
--- a/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import DataListCell from '@components/DataListCell';
-import styled from 'styled-components';
-
-const ActionButtonCell = styled(DataListCell)`
-  & > :not(:first-child) {
-    margin-left: 20px;
-  }
-`;
-ActionButtonCell.displayName = 'ActionButtonCell';
-export default ActionButtonCell;
diff --git a/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.test.jsx b/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.test.jsx
deleted file mode 100644
index 894e481a65..0000000000
--- a/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.test.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import ActionButtonCell from './ActionButtonCell';
-
-describe('ActionButtonCell', () => {
-  test('renders the expected content', () => {
-    const wrapper = mount(<ActionButtonCell />);
-    expect(wrapper).toHaveLength(1);
-  });
-});
diff --git a/awx/ui_next/src/components/ActionButtonCell/index.js b/awx/ui_next/src/components/ActionButtonCell/index.js
deleted file mode 100644
index 6eff34a9c4..0000000000
--- a/awx/ui_next/src/components/ActionButtonCell/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ActionButtonCell';
diff --git a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
index 94e8f82017..2616cf15cd 100644
--- a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
+++ b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
@@ -5,10 +5,9 @@ import {
   DataListItemRow,
   DataListItemCells,
   DataListCell,
+  DataListCheck,
 } from '@patternfly/react-core';
-import DataListCheck from '@components/DataListCheck';
 import DataListRadio from '@components/DataListRadio';
-import VerticalSeparator from '../VerticalSeparator';
 
 const CheckboxListItem = ({
   itemId,
@@ -37,12 +36,6 @@ const CheckboxListItem = ({
         />
         <DataListItemCells
           dataListCells={[
-            <DataListCell
-              key="divider"
-              className="pf-c-data-list__cell--divider"
-            >
-              <VerticalSeparator />
-            </DataListCell>,
             <DataListCell key="name">
               <label
                 id={`check-action-item-${itemId}`}
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
index 5296483db8..c1f1a7d095 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
@@ -11,7 +11,6 @@ import {
 } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import ActionButtonCell from '@components/ActionButtonCell';
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
 import ListActionButton from '@components/ListActionButton';
@@ -59,7 +58,7 @@ function CredentialListItem({
             <DataListCell key="type">
               {credential.summary_fields.credential_type.name}
             </DataListCell>,
-            <ActionButtonCell lastcolumn="true" key="action">
+            <DataListCell alignRight isFilled={false}>
               {canEdit && (
                 <Tooltip content={i18n._(t`Edit Credential`)} position="top">
                   <ListActionButton
@@ -71,7 +70,7 @@ function CredentialListItem({
                   </ListActionButton>
                 </Tooltip>
               )}
-            </ActionButtonCell>,
+            </DataListCell>,
           ]}
         />
       </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
index bda2b0a7a5..a9420a7032 100644
--- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
@@ -12,7 +12,6 @@ import {
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import ActionButtonCell from '@components/ActionButtonCell';
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
 import ListActionButton from '@components/ListActionButton';
@@ -83,7 +82,7 @@ class HostListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
-              <ActionButtonCell lastcolumn="true" key="action">
+              <DataListCell 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.`
@@ -91,6 +90,7 @@ class HostListItem extends React.Component {
                   position="top"
                 >
                   <Switch
+                    css="display: inline-flex;"
                     id={`host-${host.id}-toggle`}
                     label={i18n._(t`On`)}
                     labelOff={i18n._(t`Off`)}
@@ -103,6 +103,8 @@ class HostListItem extends React.Component {
                     aria-label={i18n._(t`Toggle host`)}
                   />
                 </Tooltip>
+              </DataListCell>,
+              <DataListCell alignRight isFilled={false}>
                 {host.summary_fields.user_capabilities.edit && (
                   <Tooltip content={i18n._(t`Edit Host`)} position="top">
                     <ListActionButton
@@ -114,7 +116,7 @@ class HostListItem extends React.Component {
                     </ListActionButton>
                   </Tooltip>
                 )}
-              </ActionButtonCell>,
+              </DataListCell>,
             ]}
           />
         </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
index 3c76f84444..95dcb0eabc 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
@@ -13,7 +13,6 @@ import {
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import ActionButtonCell from '@components/ActionButtonCell';
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
 import ListActionButton from '@components/ListActionButton';
@@ -47,7 +46,7 @@ function InventoryGroupItem({
                 <b>{group.name}</b>
               </Link>
             </DataListCell>,
-            <ActionButtonCell lastcolumn="true" key="action">
+            <DataListCell alignRight isFilled={false}>
               {group.summary_fields.user_capabilities.edit && (
                 <Tooltip content={i18n._(t`Edit Group`)} position="top">
                   <ListActionButton
@@ -59,7 +58,7 @@ function InventoryGroupItem({
                   </ListActionButton>
                 </Tooltip>
               )}
-            </ActionButtonCell>,
+            </DataListCell>,
           ]}
         />
       </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
index 46eaff8b02..9d737af3b3 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
@@ -12,7 +12,6 @@ import {
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import ActionButtonCell from '@components/ActionButtonCell';
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
 import ListActionButton from '@components/ListActionButton';
@@ -59,7 +58,7 @@ function InventoryHostItem(props) {
             <DataListCell key="recentJobs">
               <Sparkline jobs={recentPlaybookJobs} />
             </DataListCell>,
-            <ActionButtonCell lastcolumn="true" key="action">
+            <DataListCell alignRight isFilled={false}>
               <Tooltip
                 content={i18n._(
                   t`Indicates if a host is available and should be included
@@ -69,6 +68,7 @@ function InventoryHostItem(props) {
                 position="top"
               >
                 <Switch
+                  css="display: inline-flex;"
                   id={`host-${host.id}-toggle`}
                   label={i18n._(t`On`)}
                   labelOff={i18n._(t`Off`)}
@@ -81,6 +81,8 @@ function InventoryHostItem(props) {
                   aria-label={i18n._(t`Toggle host`)}
                 />
               </Tooltip>
+            </DataListCell>,
+            <DataListCell alignRight isFilled={false}>
               {host.summary_fields.user_capabilities?.edit && (
                 <Tooltip content={i18n._(t`Edit Host`)} position="top">
                   <ListActionButton
@@ -92,7 +94,7 @@ function InventoryHostItem(props) {
                   </ListActionButton>
                 </Tooltip>
               )}
-            </ActionButtonCell>,
+            </DataListCell>,
           ]}
         />
       </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
index 7772e4f21c..3eef420580 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
@@ -11,7 +11,6 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import ActionButtonCell from '@components/ActionButtonCell';
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
 import ListActionButton from '@components/ListActionButton';
@@ -55,7 +54,7 @@ class InventoryListItem extends React.Component {
                   ? i18n._(t`Smart Inventory`)
                   : i18n._(t`Inventory`)}
               </DataListCell>,
-              <ActionButtonCell lastcolumn="true" key="action">
+              <DataListCell alignRight isFilled={false}>
                 {inventory.summary_fields.user_capabilities.edit && (
                   <Tooltip content={i18n._(t`Edit Inventory`)} position="top">
                     <ListActionButton
@@ -71,7 +70,7 @@ class InventoryListItem extends React.Component {
                     </ListActionButton>
                   </Tooltip>
                 )}
-              </ActionButtonCell>,
+              </DataListCell>,
             ]}
           />
         </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
index 4d2c734a37..51ec77b57c 100644
--- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
@@ -4,17 +4,16 @@ import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
+  DataListCell,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
   DataListItemCells,
   Tooltip,
 } from '@patternfly/react-core';
 import { RocketIcon } from '@patternfly/react-icons';
-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 { StatusIcon } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
 import { formatDateString } from '@util/dates';
@@ -29,11 +28,7 @@ class JobListItem extends Component {
     const { i18n, job, isSelected, onSelect } = this.props;
 
     return (
-      <DataListItem
-        aria-labelledby={`check-action-${job.id}`}
-        css="--pf-c-data-list__expandable-content--BoxShadow: none;"
-        id={`${job.id}`}
-      >
+      <DataListItem aria-labelledby={`check-action-${job.id}`} id={`${job.id}`}>
         <DataListItemRow>
           <DataListCheck
             id={`select-job-${job.id}`}
@@ -44,7 +39,6 @@ class JobListItem extends Component {
           <DataListItemCells
             dataListCells={[
               <DataListCell key="divider">
-                <VerticalSeparator />
                 {job.status && <PaddedIcon status={job.status} />}
                 <span>
                   <Link
@@ -60,7 +54,7 @@ class JobListItem extends Component {
               <DataListCell key="finished">
                 {formatDateString(job.finished)}
               </DataListCell>,
-              <DataListCell lastcolumn="true" key="relaunch">
+              <DataListCell isFilled={false} alignRight key="relaunch">
                 {job.type !== 'system_job' &&
                   job.summary_fields.user_capabilities.start && (
                     <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
index 364b963cdb..f376ae8bb4 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
@@ -13,7 +13,6 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import ActionButtonCell from '@components/ActionButtonCell';
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
 import ListActionButton from '@components/ListActionButton';
@@ -85,7 +84,7 @@ function OrganizationListItem({
                 </Badge>
               </ListGroup>
             </DataListCell>,
-            <ActionButtonCell lastcolumn="true" key="action">
+            <DataListCell alignRight isFilled={false}>
               {organization.summary_fields.user_capabilities.edit && (
                 <Tooltip content={i18n._(t`Edit Organization`)} position="top">
                   <ListActionButton
@@ -97,7 +96,7 @@ function OrganizationListItem({
                   </ListActionButton>
                 </Tooltip>
               )}
-            </ActionButtonCell>,
+            </DataListCell>,
           ]}
         />
       </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
index 255b076f26..4348fe7da5 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -11,7 +11,6 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
 
-import ActionButtonCell from '@components/ActionButtonCell';
 import ClipboardCopyButton from '@components/ClipboardCopyButton';
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
@@ -116,7 +115,7 @@ class ProjectListItem extends React.Component {
                   />
                 ) : null}
               </DataListCell>,
-              <ActionButtonCell lastcolumn="true" key="action">
+              <DataListCell lastcolumn="true" key="action">
                 {project.summary_fields.user_capabilities.start && (
                   <Tooltip content={i18n._(t`Sync Project`)} position="top">
                     <ProjectSyncButton projectId={project.id}>
@@ -128,6 +127,8 @@ class ProjectListItem extends React.Component {
                     </ProjectSyncButton>
                   </Tooltip>
                 )}
+              </DataListCell>,
+              <DataListCell alignRight isFilled={false}>
                 {project.summary_fields.user_capabilities.edit && (
                   <Tooltip content={i18n._(t`Edit Project`)} position="top">
                     <ListActionButton
@@ -139,7 +140,7 @@ class ProjectListItem extends React.Component {
                     </ListActionButton>
                   </Tooltip>
                 )}
-              </ActionButtonCell>,
+              </DataListCell>,
             ]}
           />
         </DataListItemRow>
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 94a624b380..688d3eecc9 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 99562e5f1a..b13bccff3b 100644
--- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
@@ -11,7 +11,6 @@ import {
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import ActionButtonCell from '@components/ActionButtonCell';
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
 import ListActionButton from '@components/ListActionButton';
@@ -60,7 +59,7 @@ class TeamListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
-              <ActionButtonCell lastcolumn="true" key="action">
+              <DataListCell alignRight isFilled={false}>
                 {team.summary_fields.user_capabilities.edit && (
                   <Tooltip content={i18n._(t`Edit Team`)} position="top">
                     <ListActionButton
@@ -72,7 +71,7 @@ class TeamListItem extends React.Component {
                     </ListActionButton>
                   </Tooltip>
                 )}
-              </ActionButtonCell>,
+              </DataListCell>,
             ]}
           />
         </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index ed32babfd3..73f5991ff9 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import {
   DataListItem,
   DataListItemRow,
-  DataListItemCells as PFDataListItemCells,
+  DataListItemCells,
   Tooltip,
 } from '@patternfly/react-core';
 import { t } from '@lingui/macro';
@@ -14,7 +14,6 @@ import {
   RocketIcon,
 } from '@patternfly/react-icons';
 
-import ActionButtonCell from '@components/ActionButtonCell';
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
 import LaunchButton from '@components/LaunchButton';
@@ -22,42 +21,6 @@ import ListActionButton from '@components/ListActionButton';
 import VerticalSeparator from '@components/VerticalSeparator';
 import { Sparkline } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
-import styled from 'styled-components';
-
-const rightStyle = `
-@media screen and (max-width: 768px) {
-  && {
-    padding-top: 0px;
-    flex: 0 0 33%;
-    padding-right: 20px;
-  }
-}
-`;
-
-const DataListItemCells = styled(PFDataListItemCells)`
-  display: flex;
-  @media screen and (max-width: 768px) {
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-`;
-
-const LeftDataListCell = styled(DataListCell)`
-  @media screen and (max-width: 768px) {
-    && {
-      padding-bottom: 16px;
-      flex: 1 1 100%;
-    }
-  }
-`;
-
-const RightDataListCell = styled(DataListCell)`
-  ${rightStyle}
-`;
-
-const RightActionButtonCell = styled(ActionButtonCell)`
-  ${rightStyle}
-`;
 
 function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
   const canLaunch = template.summary_fields.user_capabilities.start;
@@ -71,7 +34,6 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
   return (
     <DataListItem
       aria-labelledby={`check-action-${template.id}`}
-      css="--pf-c-data-list__expandable-content--BoxShadow: none;"
       id={`${template.id}`}
     >
       <DataListItemRow>
@@ -83,7 +45,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
         />
         <DataListItemCells
           dataListCells={[
-            <LeftDataListCell key="divider">
+            <DataListCell key="divider">
               <VerticalSeparator />
               <span>
                 <Link to={`${detailUrl}`}>
@@ -102,23 +64,14 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
                   </Tooltip>
                 </span>
               )}
-            </LeftDataListCell>,
-            <RightDataListCell
-              css="padding-left: 40px;"
-              righthalf="true"
-              key="type"
-            >
+            </DataListCell>,
+            <DataListCell key="type">
               {toTitleCase(template.type)}
-            </RightDataListCell>,
-            <RightDataListCell css="flex: 1;" righthalf="true" key="sparkline">
+            </DataListCell>,
+            <DataListCell key="sparkline">
               <Sparkline jobs={template.summary_fields.recent_jobs} />
-            </RightDataListCell>,
-            <RightActionButtonCell
-              css="max-width: 80px;"
-              righthalf="true"
-              lastcolumn="true"
-              key="launch"
-            >
+            </DataListCell>,
+            <DataListCell alignRight isFilled={false} key="launch">
               {canLaunch && template.type === 'job_template' && (
                 <Tooltip content={i18n._(t`Launch Template`)} position="top">
                   <LaunchButton resource={template}>
@@ -130,6 +83,8 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
                   </LaunchButton>
                 </Tooltip>
               )}
+            </DataListCell>,
+            <DataListCell alignRight isFilled={false}>
               {template.summary_fields.user_capabilities.edit && (
                 <Tooltip content={i18n._(t`Edit Template`)} position="top">
                   <ListActionButton
@@ -141,7 +96,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
                   </ListActionButton>
                 </Tooltip>
               )}
-            </RightActionButtonCell>,
+            </DataListCell>,
           ]}
         />
       </DataListItemRow>
diff --git a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
index 0ae8eaf07e..e856564222 100644
--- a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
+++ b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx
@@ -11,7 +11,6 @@ import {
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import ActionButtonCell from '@components/ActionButtonCell';
 import DataListCell from '@components/DataListCell';
 import DataListCheck from '@components/DataListCheck';
 import ListActionButton from '@components/ListActionButton';
@@ -62,7 +61,7 @@ class UserListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
-              <ActionButtonCell lastcolumn="true" key="action">
+              <DataListCell alignRight isFilled={false}>
                 {user.summary_fields.user_capabilities.edit && (
                   <Tooltip content={i18n._(t`Edit User`)} position="top">
                     <ListActionButton
@@ -74,7 +73,7 @@ class UserListItem extends React.Component {
                     </ListActionButton>
                   </Tooltip>
                 )}
-              </ActionButtonCell>,
+              </DataListCell>,
             ]}
           />
         </DataListItemRow>