Remove DataList component overrides

awx/ui_next/src/app.scss

@@ -1,4 +0,0 @@
-// https://github.com/patternfly/patternfly-react/issues/1294
-#app {
-  height: 100%;
-}

awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx

@@ -6,19 +6,21 @@ import {
   DataListItemCells,
   DataListCell,
   DataListCheck,
+  Radio,
 } from '@patternfly/react-core';
-import DataListRadio from '@components/DataListRadio';
 
 const CheckboxListItem = ({
+  isDisabled = false,
+  isRadio = false,
+  isSelected = false,
   itemId,
-  name,
   label,
-  isSelected,
+  name,
-  onSelect,
   onDeselect,
-  isRadio,
+  onSelect,
 }) => {
-  const CheckboxRadio = isRadio ? DataListRadio : DataListCheck;
+  const CheckboxRadio = isRadio ? Radio : DataListCheck;
+
   return (
     <DataListItem
       key={itemId}
@@ -27,11 +29,14 @@ const CheckboxListItem = ({
     >
       <DataListItemRow>
         <CheckboxRadio
-          id={`selected-${itemId}`}
+          aria-label={`check-action-item-${itemId}`}
-          checked={isSelected}
-          onChange={isSelected ? onDeselect : onSelect}
           aria-labelledby={`check-action-item-${itemId}`}
+          checked={isSelected}
+          disabled={isDisabled}
+          id={`selected-${itemId}`}
+          isChecked={isSelected}
           name={name}
+          onChange={isSelected ? onDeselect : onSelect}
           value={itemId}
         />
         <DataListItemCells
@@ -53,12 +58,12 @@ const CheckboxListItem = ({
 };
 
 CheckboxListItem.propTypes = {
-  itemId: PropTypes.number.isRequired,
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
   isSelected: PropTypes.bool.isRequired,
-  onSelect: PropTypes.func.isRequired,
+  itemId: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
   onDeselect: PropTypes.func.isRequired,
+  onSelect: PropTypes.func.isRequired,
 };
 
 export default CheckboxListItem;

awx/ui_next/src/components/DataListCell/DataListCell.jsx

@@ -1,14 +0,0 @@
-import { DataListCell as PFDataListCell } from '@patternfly/react-core';
-import styled from 'styled-components';
-
-const DataListCell = styled(PFDataListCell)`
-  display: flex;
-  align-items: center;
-  padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
-  @media screen and (min-width: 768px) {
-    padding-bottom: 0;
-    justify-content: ${props => (props.lastcolumn ? 'flex-end' : 'inherit')};
-  }
-`;
-
-export default DataListCell;

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import { mountWithContexts } from '@testUtils/enzymeHelpers';
-
-import DataListCell from './DataListCell';
-
-describe('DataListCell', () => {
-  test('renders without failing', () => {
-    const wrapper = mountWithContexts(<DataListCell />);
-    expect(wrapper).toHaveLength(1);
-  });
-});

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

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

awx/ui_next/src/components/DataListCheck/DataListCheck.jsx

@@ -1,15 +0,0 @@
-import { DataListCheck as PFDataListCheck } from '@patternfly/react-core';
-import styled from 'styled-components';
-
-PFDataListCheck.displayName = 'PFDataListCheck';
-export default styled(PFDataListCheck)`
-  padding-top: 18px;
-  @media screen and (min-width: 768px) {
-    padding-top: 16px;
-    justify-content: ${props => (props.lastcolumn ? 'flex-end' : 'inherit')};
-    .pf-c-data-list__check {
-      display: flex;
-      align-items: center;
-    }
-  }
-`;

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import DataListCheck from './DataListCheck';
-
-describe('DataListCheck', () => {
-  test('renders the expected content', () => {
-    const wrapper = mount(<DataListCheck checked aria-labelledby="Checkbox" />);
-    expect(wrapper).toHaveLength(1);
-  });
-});

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

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

awx/ui_next/src/components/DataListRadio/DataListRadio.jsx

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { string, bool, func } from 'prop-types';
-
-function DataListRadio({
-  className = '',
-  onChange,
-  isValid = true,
-  isDisabled = false,
-  isChecked = null,
-  checked = null,
-  ...props
-}) {
-  return (
-    <div className={`pf-c-data-list__item-control ${className}`}>
-      <div className="pf-c-data-list__check">
-        <input
-          {...props}
-          type="radio"
-          onChange={event => onChange(event.currentTarget.checked, event)}
-          aria-invalid={!isValid}
-          disabled={isDisabled}
-          checked={isChecked || checked}
-        />
-      </div>
-    </div>
-  );
-}
-DataListRadio.propTypes = {
-  className: string,
-  isValid: bool,
-  isDisabled: bool,
-  isChecked: bool,
-  checked: bool,
-  onChange: func,
-  'aria-labelledby': string,
-};
-DataListRadio.defaultProps = {
-  className: '',
-  isValid: true,
-  isDisabled: false,
-  isChecked: false,
-  checked: false,
-  onChange: () => {},
-  'aria-labelledby': '',
-};
-
-export default DataListRadio;

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import { mountWithContexts } from '@testUtils/enzymeHelpers';
-import DataListRadio from './DataListRadio';
-
-describe('DataListRadio', () => {
-  test('should call onChange', () => {
-    const onChange = jest.fn();
-    const wrapper = mountWithContexts(<DataListRadio onChange={onChange} />);
-    wrapper.find('input[type="radio"]').prop('onChange')({
-      currentTarget: { checked: true },
-    });
-    expect(onChange).toHaveBeenCalledWith(true, {
-      currentTarget: { checked: true },
-    });
-  });
-
-  test('should pass props to correct children', () => {
-    const onChange = jest.fn();
-    const wrapper = mountWithContexts(
-      <DataListRadio
-        onChange={onChange}
-        className="foo"
-        isValid
-        isDisabled
-        checked
-      />
-    );
-    const div = wrapper.find('.pf-c-data-list__item-control');
-    const input = wrapper.find('input[type="radio"]');
-
-    expect(div.prop('className')).toEqual('pf-c-data-list__item-control foo');
-    expect(input.prop('disabled')).toBe(true);
-    expect(input.prop('checked')).toBe(true);
-    expect(input.prop('aria-invalid')).toBe(false);
-  });
-});

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

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

awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx

@@ -7,10 +7,10 @@ import styled from 'styled-components';
 import { SearchIcon } from '@patternfly/react-icons';
 import {
   DataToolbar,
-  DataToolbarContent,
+  DataToolbarContent as _DataToolbarContent,
-  DataToolbarGroup,
+  DataToolbarGroup as _DataToolbarGroup,
-  DataToolbarToggleGroup,
   DataToolbarItem,
+  DataToolbarToggleGroup,
 } from '@patternfly/react-core/dist/umd/experimental';
 import ExpandCollapse from '../ExpandCollapse';
 import Search from '../Search';
@@ -18,20 +18,12 @@ import Sort from '../Sort';
 
 import { SearchColumns, SortColumns, QSConfig } from '@types';
 
-const AdditionalControlsWrapper = styled.div`
+const DataToolbarContent = styled(_DataToolbarContent)`
-  display: flex;
+  --pf-c-data-toolbar__content--PaddingLeft: 24px;
-  flex-grow: 1;
+  --pf-c-data-toolbar__content--PaddingRight: 8px;
-  justify-content: flex-end;
-  align-items: center;
-
-  & > :not(:first-child) {
-    margin-left: 20px;
-  }
 `;
-
+const DataToolbarGroup = styled(_DataToolbarGroup)`
-const AdditionalControlsDataToolbarGroup = styled(DataToolbarGroup)`
+  --pf-c-data-toolbar__group--spacer: 24px;
-  margin-left: auto;
-  margin-right: 0 !important;
 `;
 
 class DataListToolbar extends React.Component {
@@ -102,13 +94,11 @@ class DataListToolbar extends React.Component {
               </Fragment>
             )}
           </DataToolbarGroup>
-          <AdditionalControlsDataToolbarGroup>
+          <DataToolbarGroup css="margin-left: auto">
-            <DataToolbarItem>
+            {additionalControls.map(control => (
-              <AdditionalControlsWrapper>
+              <DataToolbarItem key={control.key}>{control}</DataToolbarItem>
-                {additionalControls}
+            ))}
-              </AdditionalControlsWrapper>
+          </DataToolbarGroup>
-            </DataToolbarItem>
-          </AdditionalControlsDataToolbarGroup>
         </DataToolbarContent>
       </DataToolbar>
     );

awx/ui_next/src/components/NotificationList/NotificationListItem.jsx

@@ -4,24 +4,20 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import {
+  DataListAction as _DataListAction,
+  DataListCell,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
-  DataListCell as PFDataListCell,
+  DataListItemRow,
   Switch,
 } from '@patternfly/react-core';
-
 import styled from 'styled-components';
 
-const DataListCell = styled(PFDataListCell)`
+const DataListAction = styled(_DataListAction)`
-  display: flex;
+  align-items: center;
-  justify-content: ${props => (props.righthalf ? 'flex-start' : 'inherit')};
+  display: grid;
-  padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
+  grid-gap: 16px;
-
+  grid-template-columns: repeat(3, max-content);
-  @media screen and (min-width: 768px) {
-    justify-content: ${props => (props.righthalf ? 'flex-end' : 'inherit')};
-    padding-bottom: 0;
-  }
 `;
 
 function NotificationListItem(props) {
@@ -51,7 +47,6 @@ function NotificationListItem(props) {
                 to={{
                   pathname: detailUrl,
                 }}
-                css="margin-right: 1.5em;"
               >
                 <b id={`items-list-item-${notification.id}`}>
                   {notification.name}
@@ -61,51 +56,47 @@ function NotificationListItem(props) {
             <DataListCell key="type">
               {typeLabels[notification.notification_type]}
             </DataListCell>,
-            <DataListCell righthalf="true" key="toggles">
-              <Switch
-                id={`notification-${notification.id}-started-toggle`}
-                label={i18n._(t`Start`)}
-                labelOff={i18n._(t`Start`)}
-                isChecked={startedTurnedOn}
-                isDisabled={!canToggleNotifications}
-                onChange={() =>
-                  toggleNotification(
-                    notification.id,
-                    startedTurnedOn,
-                    'started'
-                  )
-                }
-                aria-label={i18n._(t`Toggle notification start`)}
-              />
-              <Switch
-                id={`notification-${notification.id}-success-toggle`}
-                label={i18n._(t`Success`)}
-                labelOff={i18n._(t`Success`)}
-                isChecked={successTurnedOn}
-                isDisabled={!canToggleNotifications}
-                onChange={() =>
-                  toggleNotification(
-                    notification.id,
-                    successTurnedOn,
-                    'success'
-                  )
-                }
-                aria-label={i18n._(t`Toggle notification success`)}
-              />
-              <Switch
-                id={`notification-${notification.id}-error-toggle`}
-                label={i18n._(t`Failure`)}
-                labelOff={i18n._(t`Failure`)}
-                isChecked={errorTurnedOn}
-                isDisabled={!canToggleNotifications}
-                onChange={() =>
-                  toggleNotification(notification.id, errorTurnedOn, 'error')
-                }
-                aria-label={i18n._(t`Toggle notification failure`)}
-              />
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={`items-list-item-${notification.id}`}
+          id={`items-list-item-${notification.id}`}
+        >
+          <Switch
+            id={`notification-${notification.id}-started-toggle`}
+            label={i18n._(t`Start`)}
+            labelOff={i18n._(t`Start`)}
+            isChecked={startedTurnedOn}
+            isDisabled={!canToggleNotifications}
+            onChange={() =>
+              toggleNotification(notification.id, startedTurnedOn, 'started')
+            }
+            aria-label={i18n._(t`Toggle notification start`)}
+          />
+          <Switch
+            id={`notification-${notification.id}-success-toggle`}
+            label={i18n._(t`Success`)}
+            labelOff={i18n._(t`Success`)}
+            isChecked={successTurnedOn}
+            isDisabled={!canToggleNotifications}
+            onChange={() =>
+              toggleNotification(notification.id, successTurnedOn, 'success')
+            }
+            aria-label={i18n._(t`Toggle notification success`)}
+          />
+          <Switch
+            id={`notification-${notification.id}-error-toggle`}
+            label={i18n._(t`Failure`)}
+            labelOff={i18n._(t`Failure`)}
+            isChecked={errorTurnedOn}
+            isDisabled={!canToggleNotifications}
+            onChange={() =>
+              toggleNotification(notification.id, errorTurnedOn, 'error')
+            }
+            aria-label={i18n._(t`Toggle notification failure`)}
+          />
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );

awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap

@@ -42,7 +42,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
           <DataListItemCells
             dataListCells={
               Array [
-                <ForwardRef>
+                <DataListCell>
                   <ForwardRef
                     to={
                       Object {
@@ -56,41 +56,10 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
                       Foo
                     </b>
                   </ForwardRef>
-                </ForwardRef>,
+                </DataListCell>,
-                <ForwardRef>
+                <DataListCell>
                   Slack
-                </ForwardRef>,
+                </DataListCell>,
-                <ForwardRef
-                  righthalf="true"
-                >
-                  <Unknown
-                    aria-label="Toggle notification start"
-                    id="notification-9000-started-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Start"
-                    labelOff="Start"
-                    onChange={[Function]}
-                  />
-                  <Unknown
-                    aria-label="Toggle notification success"
-                    id="notification-9000-success-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Success"
-                    labelOff="Success"
-                    onChange={[Function]}
-                  />
-                  <Unknown
-                    aria-label="Toggle notification failure"
-                    id="notification-9000-error-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Failure"
-                    labelOff="Failure"
-                    onChange={[Function]}
-                  />
-                </ForwardRef>,
               ]
             }
             key=".0"
@@ -99,453 +68,324 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
             <div
               className="pf-c-data-list__item-content"
             >
-              <NotificationListItem__DataListCell
+              <DataListCell
                 key="name"
               >
-                <StyledComponent
+                <div
-                  forwardedComponent={
+                  className="pf-c-data-list__cell"
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "NotificationListItem__DataListCell-w674ng-0",
-                        "isStatic": false,
-                        "lastClassName": "dXsFLF",
-                        "rules": Array [
-                          "display:flex;justify-content:",
-                          [Function],
-                          ";padding-bottom:",
-                          [Function],
-                          ";@media screen and (min-width:768px){justify-content:",
-                          [Function],
-                          ";padding-bottom:0;}",
-                        ],
-                      },
-                      "displayName": "NotificationListItem__DataListCell",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "NotificationListItem__DataListCell-w674ng-0",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
                 >
-                  <DataListCell
+                  <Link
-                    className="NotificationListItem__DataListCell-w674ng-0 faYgxF"
+                    to={
+                      Object {
+                        "pathname": "/foo",
+                      }
+                    }
                   >
-                    <div
+                    <LinkAnchor
-                      className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 faYgxF"
+                      href="/foo"
+                      navigate={[Function]}
                     >
-                      <Styled(Link)
+                      <a
-                        to={
+                        href="/foo"
-                          Object {
+                        onClick={[Function]}
-                            "pathname": "/foo",
-                          }
-                        }
                       >
-                        <StyledComponent
+                        <b
-                          forwardedComponent={
+                          id="items-list-item-9000"
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-bdVaJa",
-                                "isStatic": true,
-                                "lastClassName": "eBseNd",
-                                "rules": Array [
-                                  "margin-right: 1.5em;",
-                                ],
-                              },
-                              "displayName": "Styled(Link)",
-                              "foldedComponentIds": Array [],
-                              "propTypes": Object {
-                                "innerRef": [Function],
-                                "onClick": [Function],
-                                "replace": [Function],
-                                "target": [Function],
-                                "to": [Function],
-                              },
-                              "render": [Function],
-                              "styledComponentId": "sc-bdVaJa",
-                              "target": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "displayName": "Link",
-                                "propTypes": Object {
-                                  "innerRef": [Function],
-                                  "onClick": [Function],
-                                  "replace": [Function],
-                                  "target": [Function],
-                                  "to": [Function],
-                                },
-                                "render": [Function],
-                              },
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                          to={
-                            Object {
-                              "pathname": "/foo",
-                            }
-                          }
                         >
-                          <Link
+                          Foo
-                            className="sc-bdVaJa eBseNd"
+                        </b>
-                            to={
+                      </a>
-                              Object {
+                    </LinkAnchor>
-                                "pathname": "/foo",
+                  </Link>
-                              }
+                </div>
-                            }
+              </DataListCell>
-                          >
+              <DataListCell
-                            <LinkAnchor
-                              className="sc-bdVaJa eBseNd"
-                              href="/foo"
-                              navigate={[Function]}
-                            >
-                              <a
-                                className="sc-bdVaJa eBseNd"
-                                href="/foo"
-                                onClick={[Function]}
-                              >
-                                <b
-                                  id="items-list-item-9000"
-                                >
-                                  Foo
-                                </b>
-                              </a>
-                            </LinkAnchor>
-                          </Link>
-                        </StyledComponent>
-                      </Styled(Link)>
-                    </div>
-                  </DataListCell>
-                </StyledComponent>
-              </NotificationListItem__DataListCell>
-              <NotificationListItem__DataListCell
                 key="type"
               >
-                <StyledComponent
+                <div
-                  forwardedComponent={
+                  className="pf-c-data-list__cell"
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "NotificationListItem__DataListCell-w674ng-0",
-                        "isStatic": false,
-                        "lastClassName": "dXsFLF",
-                        "rules": Array [
-                          "display:flex;justify-content:",
-                          [Function],
-                          ";padding-bottom:",
-                          [Function],
-                          ";@media screen and (min-width:768px){justify-content:",
-                          [Function],
-                          ";padding-bottom:0;}",
-                        ],
-                      },
-                      "displayName": "NotificationListItem__DataListCell",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "NotificationListItem__DataListCell-w674ng-0",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
                 >
-                  <DataListCell
+                  Slack
-                    className="NotificationListItem__DataListCell-w674ng-0 faYgxF"
+                </div>
-                  >
+              </DataListCell>
-                    <div
+            </div>
-                      className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 faYgxF"
+          </DataListItemCells>
-                    >
+          <NotificationListItem__DataListAction
-                      Slack
+            aria-label="actions"
-                    </div>
+            aria-labelledby="items-list-item-9000"
-                  </DataListCell>
+            id="items-list-item-9000"
-                </StyledComponent>
+            key=".1"
-              </NotificationListItem__DataListCell>
+            rowid="items-list-item-9000"
-              <NotificationListItem__DataListCell
+          >
-                key="toggles"
+            <StyledComponent
-                righthalf="true"
+              aria-label="actions"
+              aria-labelledby="items-list-item-9000"
+              forwardedComponent={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "attrs": Array [],
+                  "componentStyle": ComponentStyle {
+                    "componentId": "NotificationListItem__DataListAction-w674ng-0",
+                    "isStatic": true,
+                    "lastClassName": "hhZchj",
+                    "rules": Array [
+                      "align-items:center;display:grid;grid-gap:16px;grid-template-columns:repeat(3,max-content);",
+                    ],
+                  },
+                  "displayName": "NotificationListItem__DataListAction",
+                  "foldedComponentIds": Array [],
+                  "render": [Function],
+                  "styledComponentId": "NotificationListItem__DataListAction-w674ng-0",
+                  "target": [Function],
+                  "toString": [Function],
+                  "warnTooManyClasses": [Function],
+                  "withComponent": [Function],
+                }
+              }
+              forwardedRef={null}
+              id="items-list-item-9000"
+              rowid="items-list-item-9000"
+            >
+              <DataListAction
+                aria-label="actions"
+                aria-labelledby="items-list-item-9000"
+                className="NotificationListItem__DataListAction-w674ng-0 hhZchj"
+                id="items-list-item-9000"
+                rowid="items-list-item-9000"
               >
-                <StyledComponent
+                <div
-                  forwardedComponent={
+                  className="pf-c-data-list__item-action NotificationListItem__DataListAction-w674ng-0 hhZchj"
-                    Object {
+                  rowid="items-list-item-9000"
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "NotificationListItem__DataListCell-w674ng-0",
-                        "isStatic": false,
-                        "lastClassName": "dXsFLF",
-                        "rules": Array [
-                          "display:flex;justify-content:",
-                          [Function],
-                          ";padding-bottom:",
-                          [Function],
-                          ";@media screen and (min-width:768px){justify-content:",
-                          [Function],
-                          ";padding-bottom:0;}",
-                        ],
-                      },
-                      "displayName": "NotificationListItem__DataListCell",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "NotificationListItem__DataListCell-w674ng-0",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                  righthalf="true"
                 >
-                  <DataListCell
+                  <Component
-                    className="NotificationListItem__DataListCell-w674ng-0 dXsFLF"
+                    aria-label="Toggle notification start"
-                    righthalf="true"
+                    id="notification-9000-started-toggle"
+                    isChecked={false}
+                    isDisabled={false}
+                    label="Start"
+                    labelOff="Start"
+                    onChange={[Function]}
                   >
-                    <div
+                    <ComponentWithOuia
-                      className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 dXsFLF"
+                      component={[Function]}
-                      righthalf="true"
+                      componentProps={
+                        Object {
+                          "aria-label": "Toggle notification start",
+                          "id": "notification-9000-started-toggle",
+                          "isChecked": false,
+                          "isDisabled": false,
+                          "label": "Start",
+                          "labelOff": "Start",
+                          "onChange": [Function],
+                        }
+                      }
+                      consumerContext={null}
                     >
-                      <Component
+                      <Switch
                         aria-label="Toggle notification start"
+                        className=""
                         id="notification-9000-started-toggle"
                         isChecked={false}
                         isDisabled={false}
                         label="Start"
                         labelOff="Start"
                         onChange={[Function]}
-                      >
+                        ouiaContext={
-                        <ComponentWithOuia
+                          Object {
-                          component={[Function]}
+                            "isOuia": false,
-                          componentProps={
+                            "ouiaId": null,
-                            Object {
-                              "aria-label": "Toggle notification start",
-                              "id": "notification-9000-started-toggle",
-                              "isChecked": false,
-                              "isDisabled": false,
-                              "label": "Start",
-                              "labelOff": "Start",
-                              "onChange": [Function],
-                            }
                           }
-                          consumerContext={null}
+                        }
+                      >
+                        <label
+                          className="pf-c-switch"
+                          htmlFor="notification-9000-started-toggle"
                         >
-                          <Switch
+                          <input
                             aria-label="Toggle notification start"
-                            className=""
+                            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={
+                            type="checkbox"
-                              Object {
+                          />
-                                "isOuia": false,
+                          <span
-                                "ouiaId": null,
+                            className="pf-c-switch__toggle"
-                              }
+                          />
-                            }
+                          <span
+                            aria-hidden="true"
+                            className="pf-c-switch__label pf-m-on"
+                            id={null}
                           >
-                            <label
+                            Start
-                              className="pf-c-switch"
+                          </span>
-                              htmlFor="notification-9000-started-toggle"
+                          <span
-                            >
+                            aria-hidden="true"
-                              <input
+                            className="pf-c-switch__label pf-m-off"
-                                aria-label="Toggle notification start"
+                            id={null}
-                                aria-labelledby={null}
+                          >
-                                checked={false}
+                            Start
-                                className="pf-c-switch__input"
+                          </span>
-                                disabled={false}
+                        </label>
-                                id="notification-9000-started-toggle"
+                      </Switch>
-                                onChange={[Function]}
+                    </ComponentWithOuia>
-                                type="checkbox"
+                  </Component>
-                              />
+                  <Component
-                              <span
+                    aria-label="Toggle notification success"
-                                className="pf-c-switch__toggle"
+                    id="notification-9000-success-toggle"
-                              />
+                    isChecked={false}
-                              <span
+                    isDisabled={false}
-                                aria-hidden="true"
+                    label="Success"
-                                className="pf-c-switch__label pf-m-on"
+                    labelOff="Success"
-                                id={null}
+                    onChange={[Function]}
-                              >
+                  >
-                                Start
+                    <ComponentWithOuia
-                              </span>
+                      component={[Function]}
-                              <span
+                      componentProps={
-                                aria-hidden="true"
+                        Object {
-                                className="pf-c-switch__label pf-m-off"
+                          "aria-label": "Toggle notification success",
-                                id={null}
+                          "id": "notification-9000-success-toggle",
-                              >
+                          "isChecked": false,
-                                Start
+                          "isDisabled": false,
-                              </span>
+                          "label": "Success",
-                            </label>
+                          "labelOff": "Success",
-                          </Switch>
+                          "onChange": [Function],
-                        </ComponentWithOuia>
+                        }
-                      </Component>
+                      }
-                      <Component
+                      consumerContext={null}
+                    >
+                      <Switch
                         aria-label="Toggle notification success"
+                        className=""
                         id="notification-9000-success-toggle"
                         isChecked={false}
                         isDisabled={false}
                         label="Success"
                         labelOff="Success"
                         onChange={[Function]}
-                      >
+                        ouiaContext={
-                        <ComponentWithOuia
+                          Object {
-                          component={[Function]}
+                            "isOuia": false,
-                          componentProps={
+                            "ouiaId": null,
-                            Object {
-                              "aria-label": "Toggle notification success",
-                              "id": "notification-9000-success-toggle",
-                              "isChecked": false,
-                              "isDisabled": false,
-                              "label": "Success",
-                              "labelOff": "Success",
-                              "onChange": [Function],
-                            }
                           }
-                          consumerContext={null}
+                        }
+                      >
+                        <label
+                          className="pf-c-switch"
+                          htmlFor="notification-9000-success-toggle"
                         >
-                          <Switch
+                          <input
                             aria-label="Toggle notification success"
-                            className=""
+                            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={
+                            type="checkbox"
-                              Object {
+                          />
-                                "isOuia": false,
+                          <span
-                                "ouiaId": null,
+                            className="pf-c-switch__toggle"
-                              }
+                          />
-                            }
+                          <span
+                            aria-hidden="true"
+                            className="pf-c-switch__label pf-m-on"
+                            id={null}
                           >
-                            <label
+                            Success
-                              className="pf-c-switch"
+                          </span>
-                              htmlFor="notification-9000-success-toggle"
+                          <span
-                            >
+                            aria-hidden="true"
-                              <input
+                            className="pf-c-switch__label pf-m-off"
-                                aria-label="Toggle notification success"
+                            id={null}
-                                aria-labelledby={null}
+                          >
-                                checked={false}
+                            Success
-                                className="pf-c-switch__input"
+                          </span>
-                                disabled={false}
+                        </label>
-                                id="notification-9000-success-toggle"
+                      </Switch>
-                                onChange={[Function]}
+                    </ComponentWithOuia>
-                                type="checkbox"
+                  </Component>
-                              />
+                  <Component
-                              <span
+                    aria-label="Toggle notification failure"
-                                className="pf-c-switch__toggle"
+                    id="notification-9000-error-toggle"
-                              />
+                    isChecked={false}
-                              <span
+                    isDisabled={false}
-                                aria-hidden="true"
+                    label="Failure"
-                                className="pf-c-switch__label pf-m-on"
+                    labelOff="Failure"
-                                id={null}
+                    onChange={[Function]}
-                              >
+                  >
-                                Success
+                    <ComponentWithOuia
-                              </span>
+                      component={[Function]}
-                              <span
+                      componentProps={
-                                aria-hidden="true"
+                        Object {
-                                className="pf-c-switch__label pf-m-off"
+                          "aria-label": "Toggle notification failure",
-                                id={null}
+                          "id": "notification-9000-error-toggle",
-                              >
+                          "isChecked": false,
-                                Success
+                          "isDisabled": false,
-                              </span>
+                          "label": "Failure",
-                            </label>
+                          "labelOff": "Failure",
-                          </Switch>
+                          "onChange": [Function],
-                        </ComponentWithOuia>
+                        }
-                      </Component>
+                      }
-                      <Component
+                      consumerContext={null}
+                    >
+                      <Switch
                         aria-label="Toggle notification failure"
+                        className=""
                         id="notification-9000-error-toggle"
                         isChecked={false}
                         isDisabled={false}
                         label="Failure"
                         labelOff="Failure"
                         onChange={[Function]}
-                      >
+                        ouiaContext={
-                        <ComponentWithOuia
+                          Object {
-                          component={[Function]}
+                            "isOuia": false,
-                          componentProps={
+                            "ouiaId": null,
-                            Object {
-                              "aria-label": "Toggle notification failure",
-                              "id": "notification-9000-error-toggle",
-                              "isChecked": false,
-                              "isDisabled": false,
-                              "label": "Failure",
-                              "labelOff": "Failure",
-                              "onChange": [Function],
-                            }
                           }
-                          consumerContext={null}
+                        }
+                      >
+                        <label
+                          className="pf-c-switch"
+                          htmlFor="notification-9000-error-toggle"
                         >
-                          <Switch
+                          <input
                             aria-label="Toggle notification failure"
-                            className=""
+                            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={
+                            type="checkbox"
-                              Object {
+                          />
-                                "isOuia": false,
+                          <span
-                                "ouiaId": null,
+                            className="pf-c-switch__toggle"
-                              }
+                          />
-                            }
+                          <span
+                            aria-hidden="true"
+                            className="pf-c-switch__label pf-m-on"
+                            id={null}
                           >
-                            <label
+                            Failure
-                              className="pf-c-switch"
+                          </span>
-                              htmlFor="notification-9000-error-toggle"
+                          <span
-                            >
+                            aria-hidden="true"
-                              <input
+                            className="pf-c-switch__label pf-m-off"
-                                aria-label="Toggle notification failure"
+                            id={null}
-                                aria-labelledby={null}
+                          >
-                                checked={false}
+                            Failure
-                                className="pf-c-switch__input"
+                          </span>
-                                disabled={false}
+                        </label>
-                                id="notification-9000-error-toggle"
+                      </Switch>
-                                onChange={[Function]}
+                    </ComponentWithOuia>
-                                type="checkbox"
+                  </Component>
-                              />
+                </div>
-                              <span
+              </DataListAction>
-                                className="pf-c-switch__toggle"
+            </StyledComponent>
-                              />
+          </NotificationListItem__DataListAction>
-                              <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>
-                      </Component>
-                    </div>
-                  </DataListCell>
-                </StyledComponent>
-              </NotificationListItem__DataListCell>
-            </div>
-          </DataListItemCells>
         </div>
       </DataListItemRow>
     </li>

awx/ui_next/src/components/SelectedList/SelectedList.jsx

@@ -15,6 +15,7 @@ const Split = styled(PFSplit)`
 
 const SplitLabelItem = styled(SplitItem)`
   font-weight: bold;
+  margin-right: 32px;
   word-break: initial;
 `;
 
@@ -39,7 +40,7 @@ class SelectedList extends Component {
 
     return (
       <Split>
-        <SplitLabelItem css="margin-right: 32px">{label}</SplitLabelItem>
+        <SplitLabelItem>{label}</SplitLabelItem>
         <SplitItem>
           <ChipGroup numChips={5}>
             {selected.map(item =>

awx/ui_next/src/components/Sparkline/Sparkline.jsx

@@ -13,6 +13,10 @@ import { JOB_TYPE_URL_SEGMENTS } from '@constants';
 const Link = styled(props => <_Link {...props} />)`
   margin-right: 5px;
 `;
+
+const Wrapper = styled.div`
+  display: inline-flex;
+`;
 /* eslint-enable react/jsx-pascal-case */
 
 const Sparkline = ({ i18n, jobs }) => {
@@ -32,13 +36,15 @@ const Sparkline = ({ i18n, jobs }) => {
     </Fragment>
   );
 
-  return jobs.map(job => (
+  const statusIcons = jobs.map(job => (
     <Tooltip position="top" content={generateTooltip(job)} key={job.id}>
       <Link to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}>
         <StatusIcon status={job.status} />
       </Link>
     </Tooltip>
   ));
+
+  return <Wrapper>{statusIcons}</Wrapper>;
 };
 
 Sparkline.propTypes = {

awx/ui_next/src/index.jsx

@@ -5,7 +5,6 @@ import { I18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import '@patternfly/react-core/dist/styles/base.css';
-import './app.scss';
 
 import { isAuthenticated } from '@util/auth';
 import Background from '@components/Background';

awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx

@@ -125,9 +125,9 @@ function CredentialList({ i18n }) {
                   itemsToDelete={selected}
                   pluralizedItemName={i18n._(t`Credentials`)}
                 />,
-                canAdd && (
+                ...(canAdd
-                  <ToolbarAddButton key="add" linkTo="/credentials/add" />
+                  ? [<ToolbarAddButton key="add" linkTo="/credentials/add" />]
-                ),
+                  : []),
               ]}
             />
           )}

awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx

@@ -5,24 +5,18 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import {
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
   DataListItemRow,
-  DataListItemCells as _DataListItemCells,
+  DataListItemCells,
   Tooltip,
 } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
-import styled from 'styled-components';
 import { Credential } from '@types';
 
-const DataListItemCells = styled(_DataListItemCells)`
-  ${DataListCell}:first-child {
-    flex-grow: 2;
-  }
-`;
-
 function CredentialListItem({
   credential,
   detailUrl,
@@ -56,21 +50,25 @@ function CredentialListItem({
             <DataListCell key="type">
               {credential.summary_fields.credential_type.name}
             </DataListCell>,
-            <DataListCell key="edit" alignRight isFilled={false}>
-              {canEdit && (
-                <Tooltip content={i18n._(t`Edit Credential`)} position="top">
-                  <Button
-                    variant="plain"
-                    component={Link}
-                    to={`/credentials/${credential.id}/edit`}
-                  >
-                    <PencilAltIcon />
-                  </Button>
-                </Tooltip>
-              )}
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {canEdit && (
+            <Tooltip content={i18n._(t`Edit Credential`)} position="top">
+              <Button
+                variant="plain"
+                component={Link}
+                to={`/credentials/${credential.id}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );

awx/ui_next/src/screens/Host/HostList/HostList.jsx

@@ -224,9 +224,14 @@ class HostsList extends Component {
                     itemsToDelete={selected}
                     pluralizedItemName={i18n._(t`Hosts`)}
                   />,
-                  canAdd ? (
+                  ...(canAdd
-                    <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
+                    ? [
-                  ) : null,
+                        <ToolbarAddButton
+                          key="add"
+                          linkTo={`${match.url}/add`}
+                        />,
+                      ]
+                    : []),
                 ]}
               />
             )}

awx/ui_next/src/screens/Host/HostList/HostListItem.jsx

@@ -4,6 +4,8 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListAction as _DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
   DataListItemRow,
@@ -14,9 +16,16 @@ import {
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import { Sparkline } from '@components/Sparkline';
 import { Host } from '@types';
+import styled from 'styled-components';
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 24px;
+  grid-template-columns: min-content 40px;
+`;
 
 class HostListItem extends React.Component {
   static propTypes = {
@@ -65,9 +74,7 @@ class HostListItem extends React.Component {
               <DataListCell key="inventory">
                 {host.summary_fields.inventory && (
                   <Fragment>
-                    <b style={{ marginRight: '20px' }}>
+                    <b css="margin-right: 24px">{i18n._(t`Inventory`)}</b>
-                      {i18n._(t`Inventory`)}
-                    </b>
                     <Link
                       to={`/inventories/${
                         host.summary_fields.inventory.kind === 'smart'
@@ -80,43 +87,44 @@ class HostListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
-              <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.`
-                  )}
-                  position="top"
-                >
-                  <Switch
-                    css="display: inline-flex;"
-                    id={`host-${host.id}-toggle`}
-                    label={i18n._(t`On`)}
-                    labelOff={i18n._(t`Off`)}
-                    isChecked={host.enabled}
-                    isDisabled={
-                      toggleLoading ||
-                      !host.summary_fields.user_capabilities.edit
-                    }
-                    onChange={() => onToggleHost(host)}
-                    aria-label={i18n._(t`Toggle host`)}
-                  />
-                </Tooltip>
-              </DataListCell>,
-              <DataListCell key="edit" alignRight isFilled={false}>
-                {host.summary_fields.user_capabilities.edit && (
-                  <Tooltip content={i18n._(t`Edit Host`)} position="top">
-                    <Button
-                      variant="plain"
-                      component={Link}
-                      to={`/hosts/${host.id}/edit`}
-                    >
-                      <PencilAltIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
             ]}
           />
+          <DataListAction
+            aria-label="actions"
+            aria-labelledby={labelId}
+            id={labelId}
+          >
+            <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.`
+              )}
+              position="top"
+            >
+              <Switch
+                css="display: inline-flex;"
+                id={`host-${host.id}-toggle`}
+                label={i18n._(t`On`)}
+                labelOff={i18n._(t`Off`)}
+                isChecked={host.enabled}
+                isDisabled={
+                  toggleLoading || !host.summary_fields.user_capabilities.edit
+                }
+                onChange={() => onToggleHost(host)}
+                aria-label={i18n._(t`Toggle host`)}
+              />
+            </Tooltip>
+            {host.summary_fields.user_capabilities.edit && (
+              <Tooltip content={i18n._(t`Edit Host`)} position="top">
+                <Button
+                  variant="plain"
+                  component={Link}
+                  to={`/hosts/${host.id}/edit`}
+                >
+                  <PencilAltIcon />
+                </Button>
+              </Tooltip>
+            )}
+          </DataListAction>
         </DataListItemRow>
       </DataListItem>
     );

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx

@@ -6,17 +6,17 @@ import { Group } from '@types';
 
 import {
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
-
 function InventoryGroupItem({
   i18n,
   group,
@@ -39,22 +39,26 @@ function InventoryGroupItem({
         />
         <DataListItemCells
           dataListCells={[
-            <DataListCell key="divider">
+            <DataListCell key="name">
               <Link to={`${detailUrl}`} id={labelId}>
                 <b>{group.name}</b>
               </Link>
             </DataListCell>,
-            <DataListCell key="edit" alignRight isFilled={false}>
-              {group.summary_fields.user_capabilities.edit && (
-                <Tooltip content={i18n._(t`Edit Group`)} position="top">
-                  <Button variant="plain" component={Link} to={editUrl}>
-                    <PencilAltIcon />
-                  </Button>
-                </Tooltip>
-              )}
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {group.summary_fields.user_capabilities.edit && (
+            <Tooltip content={i18n._(t`Edit Group`)} position="top">
+              <Button variant="plain" component={Link} to={editUrl}>
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx

@@ -238,12 +238,14 @@ function InventoryGroupsList({ i18n, location, match }) {
                   </DeleteButton>
                 </div>
               </Tooltip>,
-              canAdd && (
+              ...(canAdd
-                <ToolbarAddButton
+                ? [
-                  key="add"
+                    <ToolbarAddButton
-                  linkTo={`/inventories/inventory/${inventoryId}/groups/add`}
+                      key="add"
-                />
+                      linkTo={`/inventories/inventory/${inventoryId}/groups/add`}
-              ),
+                    />,
+                  ]
+                : []),
             ]}
           />
         )}

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx

@@ -4,19 +4,27 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListAction as _DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Switch,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
-
-import DataListCell from '@components/DataListCell';
 import { Sparkline } from '@components/Sparkline';
 import { Host } from '@types';
+import styled from 'styled-components';
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 24px;
+  grid-template-columns: min-content 40px;
+`;
 
 function InventoryHostItem(props) {
   const {
@@ -56,41 +64,42 @@ function InventoryHostItem(props) {
             <DataListCell key="recentJobs">
               <Sparkline jobs={recentPlaybookJobs} />
             </DataListCell>,
-            <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.`
-                )}
-                position="top"
-              >
-                <Switch
-                  css="display: inline-flex;"
-                  id={`host-${host.id}-toggle`}
-                  label={i18n._(t`On`)}
-                  labelOff={i18n._(t`Off`)}
-                  isChecked={host.enabled}
-                  isDisabled={
-                    toggleLoading ||
-                    !host.summary_fields.user_capabilities?.edit
-                  }
-                  onChange={() => toggleHost(host)}
-                  aria-label={i18n._(t`Toggle host`)}
-                />
-              </Tooltip>
-            </DataListCell>,
-            <DataListCell key="edit" alignRight isFilled={false}>
-              {host.summary_fields.user_capabilities?.edit && (
-                <Tooltip content={i18n._(t`Edit Host`)} position="top">
-                  <Button variant="plain" component={Link} to={`${editUrl}`}>
-                    <PencilAltIcon />
-                  </Button>
-                </Tooltip>
-              )}
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          <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.`
+            )}
+            position="top"
+          >
+            <Switch
+              css="display: inline-flex;"
+              id={`host-${host.id}-toggle`}
+              label={i18n._(t`On`)}
+              labelOff={i18n._(t`Off`)}
+              isChecked={host.enabled}
+              isDisabled={
+                toggleLoading || !host.summary_fields.user_capabilities?.edit
+              }
+              onChange={() => toggleHost(host)}
+              aria-label={i18n._(t`Toggle host`)}
+            />
+          </Tooltip>
+          {host.summary_fields.user_capabilities?.edit && (
+            <Tooltip content={i18n._(t`Edit Host`)} position="top">
+              <Button variant="plain" component={Link} to={`${editUrl}`}>
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );

awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx

@@ -165,12 +165,14 @@ function InventoryHostList({ i18n, location, match }) {
                 itemsToDelete={selected}
                 pluralizedItemName={i18n._(t`Hosts`)}
               />,
-              canAdd && (
+              ...(canAdd
-                <ToolbarAddButton
+                ? [
-                  key="add"
+                    <ToolbarAddButton
-                  linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
+                      key="add"
-                />
+                      linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
-              ),
+                    />,
+                  ]
+                : []),
             ]}
           />
         )}

awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx

@@ -208,7 +208,7 @@ class InventoriesList extends Component {
                     itemsToDelete={selected}
                     pluralizedItemName="Inventories"
                   />,
-                  canAdd && addButton,
+                  ...(canAdd ? [addButton] : []),
                 ]}
               />
             )}

awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx

@@ -3,17 +3,18 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import { Inventory } from '@types';
 
 class InventoryListItem extends React.Component {
@@ -52,25 +53,27 @@ class InventoryListItem extends React.Component {
                   ? i18n._(t`Smart Inventory`)
                   : i18n._(t`Inventory`)}
               </DataListCell>,
-              <DataListCell key="edit" alignRight isFilled={false}>
-                {inventory.summary_fields.user_capabilities.edit && (
-                  <Tooltip content={i18n._(t`Edit Inventory`)} position="top">
-                    <Button
-                      variant="plain"
-                      component={Link}
-                      to={`/inventories/${
-                        inventory.kind === 'smart'
-                          ? 'smart_inventory'
-                          : 'inventory'
-                      }/${inventory.id}/edit`}
-                    >
-                      <PencilAltIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
             ]}
           />
+          <DataListAction
+            aria-label="actions"
+            aria-labelledby={labelId}
+            id={labelId}
+          >
+            {inventory.summary_fields.user_capabilities.edit && (
+              <Tooltip content={i18n._(t`Edit Inventory`)} position="top">
+                <Button
+                  variant="plain"
+                  component={Link}
+                  to={`/inventories/${
+                    inventory.kind === 'smart' ? 'smart_inventory' : 'inventory'
+                  }/${inventory.id}/edit`}
+                >
+                  <PencilAltIcon />
+                </Button>
+              </Tooltip>
+            )}
+          </DataListAction>
         </DataListItemRow>
       </DataListItem>
     );

awx/ui_next/src/screens/Job/JobList/JobList.test.jsx

@@ -23,6 +23,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        start: true,
       },
     },
   },
@@ -34,6 +35,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        start: true,
       },
     },
   },
@@ -45,6 +47,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        start: true,
       },
     },
   },
@@ -56,6 +59,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        start: true,
       },
     },
   },
@@ -67,6 +71,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        edit: true,
       },
     },
   },
@@ -78,6 +83,7 @@ const mockResults = [
     summary_fields: {
       user_capabilities: {
         delete: true,
+        edit: true,
       },
     },
   },

awx/ui_next/src/screens/Job/JobList/JobListItem.jsx

@@ -5,6 +5,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListAction,
   DataListCell,
   DataListCheck,
   DataListItem,
@@ -20,28 +21,26 @@ import { formatDateString } from '@util/dates';
 import { JOB_TYPE_URL_SEGMENTS } from '@constants';
 
 const PaddedIcon = styled(StatusIcon)`
-  margin-right: 20px;
+  margin: 6px 20px 0 0;
 `;
 
 class JobListItem extends Component {
   render() {
     const { i18n, job, isSelected, onSelect } = this.props;
+    const labelId = `check-action-${job.id}`;
 
     return (
-      <DataListItem aria-labelledby={`check-action-${job.id}`} id={`${job.id}`}>
+      <DataListItem aria-labelledby={labelId} id={`${job.id}`}>
         <DataListItemRow>
           <DataListCheck
             id={`select-job-${job.id}`}
             checked={isSelected}
             onChange={onSelect}
-            aria-labelledby={`check-action-${job.id}`}
+            aria-labelledby={labelId}
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell
+              <DataListCell key="name" css="display: inline-flex;">
-                key="name"
-                css="display: inline-flex; align-items: center;"
-              >
                 {job.status && <PaddedIcon status={job.status} />}
                 <span>
                   <Link
@@ -57,22 +56,26 @@ class JobListItem extends Component {
               <DataListCell key="finished">
                 {formatDateString(job.finished)}
               </DataListCell>,
-              <DataListCell isFilled={false} alignRight key="relaunch">
-                {job.type !== 'system_job' &&
-                  job.summary_fields.user_capabilities.start && (
-                    <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
-                      <LaunchButton resource={job}>
-                        {({ handleRelaunch }) => (
-                          <Button variant="plain" onClick={handleRelaunch}>
-                            <RocketIcon />
-                          </Button>
-                        )}
-                      </LaunchButton>
-                    </Tooltip>
-                  )}
-              </DataListCell>,
             ]}
           />
+          {job.type !== 'system_job' &&
+            job.summary_fields?.user_capabilities?.start && (
+              <DataListAction
+                aria-label="actions"
+                aria-labelledby={labelId}
+                id={labelId}
+              >
+                <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
+                  <LaunchButton resource={job}>
+                    {({ handleRelaunch }) => (
+                      <Button variant="plain" onClick={handleRelaunch}>
+                        <RocketIcon />
+                      </Button>
+                    )}
+                  </LaunchButton>
+                </Tooltip>
+              </DataListAction>
+            )}
         </DataListItemRow>
       </DataListItem>
     );

awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx

@@ -146,9 +146,9 @@ function OrganizationsList({ i18n }) {
                     itemsToDelete={selected}
                     pluralizedItemName="Organizations"
                   />,
-                  canAdd ? (
+                  ...(canAdd
-                    <ToolbarAddButton key="add" linkTo={addUrl} />
+                    ? [<ToolbarAddButton key="add" linkTo={addUrl} />]
-                  ) : null,
+                    : []),
                 ]}
               />
             )}

awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.test.jsx

@@ -23,6 +23,7 @@ const mockOrganizations = {
           },
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },
@@ -37,6 +38,7 @@ const mockOrganizations = {
           },
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },
@@ -51,6 +53,7 @@ const mockOrganizations = {
           },
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },

awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx

@@ -5,36 +5,29 @@ import { t } from '@lingui/macro';
 import {
   Badge as PFBadge,
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import { Organization } from '@types';
 
 const Badge = styled(PFBadge)`
-  align-items: center;
+  margin-left: 8px;
-  display: flex;
-  justify-content: center;
-  margin-left: 10px;
 `;
 
 const ListGroup = styled.span`
-  display: flex;
+  margin-left: 24px;
-  margin-left: 40px;
 
-  @media screen and (min-width: 768px) {
+  &:first-of-type {
-    margin-left: 20px;
+    margin-left: 0;
-
-    &:first-of-type {
-      margin-left: 0;
-    }
   }
 `;
 
@@ -82,21 +75,25 @@ function OrganizationListItem({
                 </Badge>
               </ListGroup>
             </DataListCell>,
-            <DataListCell key="edit" alignRight isFilled={false}>
-              {organization.summary_fields.user_capabilities.edit && (
-                <Tooltip content={i18n._(t`Edit Organization`)} position="top">
-                  <Button
-                    variant="plain"
-                    component={Link}
-                    to={`/organizations/${organization.id}/edit`}
-                  >
-                    <PencilAltIcon />
-                  </Button>
-                </Tooltip>
-              )}
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {organization.summary_fields.user_capabilities.edit && (
+            <Tooltip content={i18n._(t`Edit Organization`)} position="top">
+              <Button
+                variant="plain"
+                component={Link}
+                to={`/organizations/${organization.id}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );

awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx

@@ -206,9 +206,14 @@ class ProjectsList extends Component {
                       itemsToDelete={selected}
                       pluralizedItemName={i18n._(t`Projects`)}
                     />,
-                    canAdd ? (
+                    ...(canAdd
-                      <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
+                      ? [
-                    ) : null,
+                          <ToolbarAddButton
+                            key="add"
+                            linkTo={`${match.url}/add`}
+                          />,
+                        ]
+                      : []),
                   ]}
                 />
               )}

awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx

@@ -3,6 +3,8 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import {
   Button,
+  DataListAction as _DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
   DataListItemRow,
@@ -12,14 +14,24 @@ import {
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
+import styled from 'styled-components';
 
 import ClipboardCopyButton from '@components/ClipboardCopyButton';
-import DataListCell from '@components/DataListCell';
 import ProjectSyncButton from '../shared/ProjectSyncButton';
 import { StatusIcon } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
 import { Project } from '@types';
 
+const PaddedIcon = styled(StatusIcon)`
+  margin: 6px 20px 0 0;
+`;
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(2, 40px);
+`;
 class ProjectListItem extends React.Component {
   static propTypes = {
     project: Project.isRequired,
@@ -72,7 +84,7 @@ class ProjectListItem extends React.Component {
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell key="divider">
+              <DataListCell key="name" css="display: inline-flex">
                 {project.summary_fields.last_job && (
                   <Tooltip
                     position="top"
@@ -84,17 +96,13 @@ class ProjectListItem extends React.Component {
                     <Link
                       to={`/jobs/project/${project.summary_fields.last_job.id}`}
                     >
-                      <StatusIcon
+                      <PaddedIcon
                         status={project.summary_fields.last_job.status}
                       />
                     </Link>
                   </Tooltip>
                 )}
-                <Link
+                <Link id={labelId} to={`${detailUrl}`}>
-                  id={labelId}
-                  to={`${detailUrl}`}
-                  css={{ marginLeft: '10px' }}
-                >
                   <b>{project.name}</b>
                 </Link>
               </DataListCell>,
@@ -103,7 +111,7 @@ class ProjectListItem extends React.Component {
                   ? i18n._(t`Manual`)
                   : toTitleCase(project.scm_type)}
               </DataListCell>,
-              <DataListCell alignRight isFilled={false} key="revision">
+              <DataListCell key="revision">
                 {project.scm_revision.substring(0, 7)}
                 {project.scm_revision ? (
                   <ClipboardCopyButton
@@ -113,34 +121,41 @@ class ProjectListItem extends React.Component {
                   />
                 ) : null}
               </DataListCell>,
-              <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 => (
-                        <Button variant="plain" onClick={handleSync}>
-                          <SyncIcon />
-                        </Button>
-                      )}
-                    </ProjectSyncButton>
-                  </Tooltip>
-                )}
-              </DataListCell>,
-              <DataListCell key="edit" alignRight isFilled={false}>
-                {project.summary_fields.user_capabilities.edit && (
-                  <Tooltip content={i18n._(t`Edit Project`)} position="top">
-                    <Button
-                      variant="plain"
-                      component={Link}
-                      to={`/projects/${project.id}/edit`}
-                    >
-                      <PencilAltIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
             ]}
           />
+          <DataListAction
+            aria-label="actions"
+            aria-labelledby={labelId}
+            id={labelId}
+          >
+            {project.summary_fields.user_capabilities.start && (
+              <Tooltip content={i18n._(t`Sync Project`)} position="top">
+                <ProjectSyncButton projectId={project.id}>
+                  {handleSync => (
+                    <Button
+                      css="grid-column: 1"
+                      variant="plain"
+                      onClick={handleSync}
+                    >
+                      <SyncIcon />
+                    </Button>
+                  )}
+                </ProjectSyncButton>
+              </Tooltip>
+            )}
+            {project.summary_fields.user_capabilities.edit && (
+              <Tooltip content={i18n._(t`Edit Project`)} position="top">
+                <Button
+                  css="grid-column: 2"
+                  variant="plain"
+                  component={Link}
+                  to={`/projects/${project.id}/edit`}
+                >
+                  <PencilAltIcon />
+                </Button>
+              </Tooltip>
+            )}
+          </DataListAction>
         </DataListItemRow>
       </DataListItem>
     );

awx/ui_next/src/screens/Team/TeamList/TeamList.jsx

@@ -193,9 +193,14 @@ class TeamsList extends Component {
                       itemsToDelete={selected}
                       pluralizedItemName={i18n._(t`Teams`)}
                     />,
-                    canAdd ? (
+                    ...(canAdd
-                      <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
+                      ? [
-                    ) : null,
+                          <ToolbarAddButton
+                            key="add"
+                            linkTo={`${match.url}/add`}
+                          />,
+                        ]
+                      : []),
                   ]}
                 />
               )}

awx/ui_next/src/screens/Team/TeamList/TeamList.test.jsx

@@ -17,6 +17,7 @@ const mockAPITeamsList = {
         summary_fields: {
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },
@@ -27,6 +28,7 @@ const mockAPITeamsList = {
         summary_fields: {
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },
@@ -37,6 +39,7 @@ const mockAPITeamsList = {
         summary_fields: {
           user_capabilities: {
             delete: true,
+            edit: true,
           },
         },
       },

awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx

@@ -4,16 +4,17 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import { Team } from '@types';
 
 class TeamListItem extends React.Component {
@@ -27,6 +28,7 @@ class TeamListItem extends React.Component {
   render() {
     const { team, isSelected, onSelect, detailUrl, i18n } = this.props;
     const labelId = `check-action-${team.id}`;
+
     return (
       <DataListItem key={team.id} aria-labelledby={labelId} id={`${team.id}`}>
         <DataListItemRow>
@@ -38,7 +40,7 @@ class TeamListItem extends React.Component {
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell key="divider">
+              <DataListCell key="name">
                 <Link id={labelId} to={`${detailUrl}`}>
                   <b>{team.name}</b>
                 </Link>
@@ -46,9 +48,7 @@ class TeamListItem extends React.Component {
               <DataListCell key="organization">
                 {team.summary_fields.organization && (
                   <Fragment>
-                    <b css={{ marginRight: '20px' }}>
+                    <b css="margin-right: 24px">{i18n._(t`Organization`)}</b>
-                      {i18n._(t`Organization`)}
-                    </b>
                     <Link
                       to={`/organizations/${team.summary_fields.organization.id}/details`}
                     >
@@ -57,21 +57,25 @@ class TeamListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
-              <DataListCell key="edit" alignRight isFilled={false}>
-                {team.summary_fields.user_capabilities.edit && (
-                  <Tooltip content={i18n._(t`Edit Team`)} position="top">
-                    <Button
-                      variant="plain"
-                      component={Link}
-                      to={`/teams/${team.id}/edit`}
-                    >
-                      <PencilAltIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
             ]}
           />
+          <DataListAction
+            aria-label="actions"
+            aria-labelledby={labelId}
+            id={labelId}
+          >
+            {team.summary_fields.user_capabilities.edit && (
+              <Tooltip content={i18n._(t`Edit Team`)} position="top">
+                <Button
+                  variant="plain"
+                  component={Link}
+                  to={`/teams/${team.id}/edit`}
+                >
+                  <PencilAltIcon />
+                </Button>
+              </Tooltip>
+            )}
+          </DataListAction>
         </DataListItemRow>
       </DataListItem>
     );

awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx

@@ -121,21 +121,25 @@ function TemplateList({ i18n }) {
   const canAddWFJT =
     wfjtActions && Object.prototype.hasOwnProperty.call(wfjtActions, 'POST');
   const addButtonOptions = [];
+
   if (canAddJT) {
     addButtonOptions.push({
       label: i18n._(t`Template`),
       url: `/templates/job_template/add/`,
     });
   }
+
   if (canAddWFJT) {
     addButtonOptions.push({
       label: i18n._(t`Workflow Template`),
       url: `/templates/workflow_job_template/add/`,
     });
   }
+
   const addButton = (
     <AddDropDownButton key="add" dropdownItems={addButtonOptions} />
   );
+
   return (
     <>
       <Card>
@@ -215,7 +219,7 @@ function TemplateList({ i18n }) {
                   itemsToDelete={selected}
                   pluralizedItemName="Templates"
                 />,
-                (canAddJT || canAddWFJT) && addButton,
+                ...(canAddJT || canAddWFJT ? [addButton] : []),
               ]}
             />
           )}

awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import {
   Button,
+  DataListAction as _DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
   DataListItemRow,
@@ -16,12 +18,20 @@ import {
   RocketIcon,
 } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import LaunchButton from '@components/LaunchButton';
 import { Sparkline } from '@components/Sparkline';
 import { toTitleCase } from '@util/strings';
+import styled from 'styled-components';
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(2, 40px);
+`;
 
 function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
+  const labelId = `check-action-${template.id}`;
   const canLaunch = template.summary_fields.user_capabilities.start;
 
   const missingResourceIcon =
@@ -31,16 +41,13 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
         !template.ask_inventory_on_launch));
 
   return (
-    <DataListItem
+    <DataListItem aria-labelledby={labelId} id={`${template.id}`}>
-      aria-labelledby={`check-action-${template.id}`}
-      id={`${template.id}`}
-    >
       <DataListItemRow>
         <DataListCheck
           id={`select-jobTemplate-${template.id}`}
           checked={isSelected}
           onChange={onSelect}
-          aria-labelledby={`check-action-${template.id}`}
+          aria-labelledby={labelId}
         />
         <DataListItemCells
           dataListCells={[
@@ -69,34 +76,41 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
             <DataListCell key="sparkline">
               <Sparkline jobs={template.summary_fields.recent_jobs} />
             </DataListCell>,
-            <DataListCell alignRight isFilled={false} key="launch">
-              {canLaunch && template.type === 'job_template' && (
-                <Tooltip content={i18n._(t`Launch Template`)} position="top">
-                  <LaunchButton resource={template}>
-                    {({ handleLaunch }) => (
-                      <Button variant="plain" onClick={handleLaunch}>
-                        <RocketIcon />
-                      </Button>
-                    )}
-                  </LaunchButton>
-                </Tooltip>
-              )}
-            </DataListCell>,
-            <DataListCell key="edit" alignRight isFilled={false}>
-              {template.summary_fields.user_capabilities.edit && (
-                <Tooltip content={i18n._(t`Edit Template`)} position="top">
-                  <Button
-                    variant="plain"
-                    component={Link}
-                    to={`/templates/${template.type}/${template.id}/edit`}
-                  >
-                    <PencilAltIcon />
-                  </Button>
-                </Tooltip>
-              )}
-            </DataListCell>,
           ]}
         />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {canLaunch && template.type === 'job_template' && (
+            <Tooltip content={i18n._(t`Launch Template`)} position="top">
+              <LaunchButton resource={template}>
+                {({ handleLaunch }) => (
+                  <Button
+                    css="grid-column: 1"
+                    variant="plain"
+                    onClick={handleLaunch}
+                  >
+                    <RocketIcon />
+                  </Button>
+                )}
+              </LaunchButton>
+            </Tooltip>
+          )}
+          {template.summary_fields.user_capabilities.edit && (
+            <Tooltip content={i18n._(t`Edit Template`)} position="top">
+              <Button
+                css="grid-column: 2"
+                variant="plain"
+                component={Link}
+                to={`/templates/${template.type}/${template.id}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx

@@ -109,7 +109,7 @@ describe('NodeModal', () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });
       wrapper.update();
-      wrapper.find('DataListRadio').simulate('click');
+      wrapper.find('Radio').simulate('click');
       await act(async () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });
@@ -136,7 +136,7 @@ describe('NodeModal', () => {
         wrapper.find('AnsibleSelect').prop('onChange')(null, 'project_sync');
       });
       wrapper.update();
-      wrapper.find('DataListRadio').simulate('click');
+      wrapper.find('Radio').simulate('click');
       await act(async () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });
@@ -166,7 +166,7 @@ describe('NodeModal', () => {
         );
       });
       wrapper.update();
-      wrapper.find('DataListRadio').simulate('click');
+      wrapper.find('Radio').simulate('click');
       await act(async () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });
@@ -193,7 +193,7 @@ describe('NodeModal', () => {
         );
       });
       wrapper.update();
-      wrapper.find('DataListRadio').simulate('click');
+      wrapper.find('Radio').simulate('click');
       await act(async () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });
@@ -396,7 +396,7 @@ describe('NodeModal', () => {
         );
       });
       wrapper.update();
-      wrapper.find('DataListRadio').simulate('click');
+      wrapper.find('Radio').simulate('click');
       await act(async () => {
         wrapper.find('button#next-node-modal').simulate('click');
       });

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx

@@ -7,7 +7,6 @@ import { Formik, Field } from 'formik';
 import { Form, FormGroup, TextInput } from '@patternfly/react-core';
 import FormRow from '@components/FormRow';
 import AnsibleSelect from '@components/AnsibleSelect';
-import VerticalSeperator from '@components/VerticalSeparator';
 import InventorySourcesList from './InventorySourcesList';
 import JobTemplatesList from './JobTemplatesList';
 import ProjectsList from './ProjectsList';
@@ -47,9 +46,8 @@ function NodeTypeStep({
 }) {
   return (
     <>
-      <div css=" display: flex; align-items: center; margin-bottom: 20px;">
+      <div css="display: flex; align-items: center; margin-bottom: 20px;">
-        <b>{i18n._(t`Node Type`)}</b>
+        <b css="margin-right: 24px">{i18n._(t`Node Type`)}</b>
-        <VerticalSeperator />
         <div>
           <AnsibleSelect
             id="nodeResource-select"

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.test.jsx

@@ -94,7 +94,7 @@ describe('NodeTypeStep', () => {
     wrapper.update();
     expect(wrapper.find('AnsibleSelect').prop('value')).toBe('job_template');
     expect(wrapper.find('JobTemplatesList').length).toBe(1);
-    wrapper.find('DataListRadio').simulate('click');
+    wrapper.find('Radio').simulate('click');
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 1,
       name: 'Test Job Template',
@@ -119,7 +119,7 @@ describe('NodeTypeStep', () => {
     wrapper.update();
     expect(wrapper.find('AnsibleSelect').prop('value')).toBe('project_sync');
     expect(wrapper.find('ProjectsList').length).toBe(1);
-    wrapper.find('DataListRadio').simulate('click');
+    wrapper.find('Radio').simulate('click');
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 1,
       name: 'Test Project',
@@ -146,7 +146,7 @@ describe('NodeTypeStep', () => {
       'inventory_source_sync'
     );
     expect(wrapper.find('InventorySourcesList').length).toBe(1);
-    wrapper.find('DataListRadio').simulate('click');
+    wrapper.find('Radio').simulate('click');
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 1,
       name: 'Test Inventory Source',
@@ -173,7 +173,7 @@ describe('NodeTypeStep', () => {
       'workflow_job_template'
     );
     expect(wrapper.find('WorkflowJobTemplatesList').length).toBe(1);
-    wrapper.find('DataListRadio').simulate('click');
+    wrapper.find('Radio').simulate('click');
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 1,
       name: 'Test Workflow Job Template',

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx

@@ -6,7 +6,12 @@ import {
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { func, shape } from 'prop-types';
-import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
+import {
+  Badge as PFBadge,
+  Button,
+  Title,
+  Tooltip,
+} from '@patternfly/react-core';
 import {
   BookIcon,
   CompassIcon,
@@ -15,7 +20,6 @@ import {
   TrashAltIcon,
   WrenchIcon,
 } from '@patternfly/react-icons';
-import VerticalSeparator from '@components/VerticalSeparator';
 import styled from 'styled-components';
 
 const Badge = styled(PFBadge)`
@@ -51,15 +55,12 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
   return (
     <div id="visualizer-toolbar">
       <div css="align-items: center; border-bottom: 1px solid grey; display: flex; height: 56px; padding: 0px 20px;">
-        <div css="display: flex;" id="visualizer-toolbar-template-name">
+        <Title size="xl">{template.name}</Title>
-          <b>{template.name}</b>
-        </div>
         <div css="align-items: center; display: flex; flex: 1; justify-content: flex-end">
           <div>{i18n._(t`Total Nodes`)}</div>
           <Badge id="visualizer-total-nodes-badge" isRead>
             {totalNodes}
           </Badge>
-          <VerticalSeparator />
           <Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
             <ActionButton
               id="visualizer-toggle-legend"
@@ -108,16 +109,15 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
               <TrashAltIcon />
             </ActionButton>
           </Tooltip>
-          <VerticalSeparator />
           <Button
             id="visualizer-save"
+            css="margin: 0 32px"
             aria-label={i18n._(t`Save`)}
             variant="primary"
             onClick={onSave}
           >
             {i18n._(t`Save`)}
           </Button>
-          <VerticalSeparator />
           <Button
             id="visualizer-close"
             aria-label={i18n._(t`Close`)}

awx/ui_next/src/screens/User/UserList/UserList.jsx

@@ -197,9 +197,14 @@ class UsersList extends Component {
                       itemsToDelete={selected}
                       pluralizedItemName="Users"
                     />,
-                    canAdd ? (
+                    ...(canAdd
-                      <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
+                      ? [
-                    ) : null,
+                          <ToolbarAddButton
+                            key="add"
+                            linkTo={`${match.url}/add`}
+                          />,
+                        ]
+                      : []),
                   ]}
                 />
               )}

awx/ui_next/src/screens/User/UserList/UserListItem.jsx

@@ -4,16 +4,17 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
   Button,
+  DataListAction,
+  DataListCell,
   DataListCheck,
   DataListItem,
-  DataListItemRow,
   DataListItemCells,
+  DataListItemRow,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import DataListCell from '@components/DataListCell';
 import { User } from '@types';
 
 class UserListItem extends React.Component {
@@ -38,7 +39,7 @@ class UserListItem extends React.Component {
           />
           <DataListItemCells
             dataListCells={[
-              <DataListCell key="divider">
+              <DataListCell key="username">
                 <Link to={`${detailUrl}`} id={labelId}>
                   <b>{user.username}</b>
                 </Link>
@@ -46,7 +47,7 @@ class UserListItem extends React.Component {
               <DataListCell key="first-name">
                 {user.first_name && (
                   <Fragment>
-                    <b css={{ marginRight: '20px' }}>{i18n._(t`First Name`)}</b>
+                    <b css="margin-right: 24px">{i18n._(t`First Name`)}</b>
                     {user.first_name}
                   </Fragment>
                 )}
@@ -54,26 +55,30 @@ class UserListItem extends React.Component {
               <DataListCell key="last-name">
                 {user.last_name && (
                   <Fragment>
-                    <b css={{ marginRight: '20px' }}>{i18n._(t`Last Name`)}</b>
+                    <b css="margin-right: 24px">{i18n._(t`Last Name`)}</b>
                     {user.last_name}
                   </Fragment>
                 )}
               </DataListCell>,
-              <DataListCell key="edit" alignRight isFilled={false}>
-                {user.summary_fields.user_capabilities.edit && (
-                  <Tooltip content={i18n._(t`Edit User`)} position="top">
-                    <Button
-                      variant="plain"
-                      component={Link}
-                      to={`/users/${user.id}/edit`}
-                    >
-                      <PencilAltIcon />
-                    </Button>
-                  </Tooltip>
-                )}
-              </DataListCell>,
             ]}
           />
+          <DataListAction
+            aria-label="actions"
+            aria-labelledby={labelId}
+            id={labelId}
+          >
+            {user.summary_fields.user_capabilities.edit && (
+              <Tooltip content={i18n._(t`Edit User`)} position="top">
+                <Button
+                  variant="plain"
+                  component={Link}
+                  to={`/users/${user.id}/edit`}
+                >
+                  <PencilAltIcon />
+                </Button>
+              </Tooltip>
+            )}
+          </DataListAction>
         </DataListItemRow>
       </DataListItem>
     );