Updates after removing PF overrides to list components.

awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleList.test.jsx

@@ -39,44 +39,44 @@ describe('ScheduleList', () => {
 
     test('should check and uncheck the row item', async () => {
       expect(
-        wrapper.find('PFDataListCheck[id="select-schedule-1"]').props().checked
+        wrapper.find('DataListCheck[id="select-schedule-1"]').props().checked
       ).toBe(false);
       await act(async () => {
         wrapper
-          .find('PFDataListCheck[id="select-schedule-1"]')
+          .find('DataListCheck[id="select-schedule-1"]')
           .invoke('onChange')(true);
       });
       wrapper.update();
       expect(
-        wrapper.find('PFDataListCheck[id="select-schedule-1"]').props().checked
+        wrapper.find('DataListCheck[id="select-schedule-1"]').props().checked
       ).toBe(true);
       await act(async () => {
         wrapper
-          .find('PFDataListCheck[id="select-schedule-1"]')
+          .find('DataListCheck[id="select-schedule-1"]')
           .invoke('onChange')(false);
       });
       wrapper.update();
       expect(
-        wrapper.find('PFDataListCheck[id="select-schedule-1"]').props().checked
+        wrapper.find('DataListCheck[id="select-schedule-1"]').props().checked
       ).toBe(false);
     });
 
     test('should check all row items when select all is checked', async () => {
-      wrapper.find('PFDataListCheck').forEach(el => {
+      wrapper.find('DataListCheck').forEach(el => {
         expect(el.props().checked).toBe(false);
       });
       await act(async () => {
         wrapper.find('Checkbox#select-all').invoke('onChange')(true);
       });
       wrapper.update();
-      wrapper.find('PFDataListCheck').forEach(el => {
+      wrapper.find('DataListCheck').forEach(el => {
         expect(el.props().checked).toBe(true);
       });
       await act(async () => {
         wrapper.find('Checkbox#select-all').invoke('onChange')(false);
       });
       wrapper.update();
-      wrapper.find('PFDataListCheck').forEach(el => {
+      wrapper.find('DataListCheck').forEach(el => {
         expect(el.props().checked).toBe(false);
       });
     });
@@ -84,7 +84,7 @@ describe('ScheduleList', () => {
     test('should call api delete schedules for each selected schedule', async () => {
       await act(async () => {
         wrapper
-          .find('PFDataListCheck[id="select-schedule-3"]')
+          .find('DataListCheck[id="select-schedule-3"]')
           .invoke('onChange')();
       });
       wrapper.update();
@@ -102,7 +102,7 @@ describe('ScheduleList', () => {
       expect(wrapper.find('Modal').length).toBe(0);
       await act(async () => {
         wrapper
-          .find('PFDataListCheck[id="select-schedule-2"]')
+          .find('DataListCheck[id="select-schedule-2"]')
           .invoke('onChange')();
       });
       wrapper.update();

awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleListItem.jsx

@@ -4,28 +4,28 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import {
+  Button,
+  DataListAction as _DataListAction,
+  DataListCell,
+  DataListCheck,
   DataListItem,
   DataListItemRow,
-  DataListItemCells as _DataListItemCells,
+  DataListItemCells,
+  Switch,
   Tooltip,
 } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons';
 
-import ActionButtonCell from '@components/ActionButtonCell';
 import { DetailList, Detail } from '@components/DetailList';
-import DataListCell from '@components/DataListCell';
-import DataListCheck from '@components/DataListCheck';
-import ListActionButton from '@components/ListActionButton';
-import Switch from '@components/Switch';
-import VerticalSeparator from '@components/VerticalSeparator';
 import styled from 'styled-components';
 import { Schedule } from '@types';
 import { formatDateString } from '@util/dates';
 
-const DataListItemCells = styled(_DataListItemCells)`
-  ${DataListCell}:first-child {
-    flex-grow: 2;
-  }
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: auto 40px;
 `;
 
 function ScheduleListItem({
@@ -84,7 +84,6 @@ function ScheduleListItem({
         <DataListItemCells
           dataListCells={[
             <DataListCell key="name">
-              <VerticalSeparator />
               <Link to={`${scheduleBaseUrl}/details`}>
                 <b>{schedule.name}</b>
               </Link>
@@ -106,7 +105,12 @@ function ScheduleListItem({
                 </DetailList>
               )}
             </DataListCell>,
-            <ActionButtonCell lastcolumn="true" key="action">
+            <DataListAction
+              aria-label="actions"
+              aria-labelledby={labelId}
+              id={labelId}
+              key="actions"
+            >
               <Tooltip
                 content={
                   schedule.enabled
@@ -130,16 +134,17 @@ function ScheduleListItem({
               </Tooltip>
               {schedule.summary_fields.user_capabilities.edit && (
                 <Tooltip content={i18n._(t`Edit Schedule`)} position="top">
-                  <ListActionButton
+                  <Button
+                    css="grid-column: 2"
                     variant="plain"
                     component={Link}
                     to={`${scheduleBaseUrl}/edit`}
                   >
                     <PencilAltIcon />
-                  </ListActionButton>
+                  </Button>
                 </Tooltip>
               )}
-            </ActionButtonCell>,
+            </DataListAction>,
           ]}
         />
       </DataListItemRow>

awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleListItem.test.jsx

@@ -81,7 +81,7 @@ describe('ScheduleListItem', () => {
       expect(
         wrapper
           .find('DataListCell')
-          .at(2)
+          .at(1)
           .text()
       ).toBe('Playbook Run');
     });
@@ -89,7 +89,7 @@ describe('ScheduleListItem', () => {
       expect(wrapper.find('PencilAltIcon').length).toBe(1);
       expect(
         wrapper
-          .find('ListActionButton')
+          .find('Button')
           .find('Link')
           .props().to
       ).toBe('/templates/job_template/12/schedules/6/edit');
@@ -112,7 +112,7 @@ describe('ScheduleListItem', () => {
     });
     test('Clicking checkbox makes expected callback', () => {
       wrapper
-        .find('PFDataListCheck')
+        .find('DataListCheck')
         .first()
         .find('input')
         .simulate('change');
@@ -161,7 +161,7 @@ describe('ScheduleListItem', () => {
       expect(
         wrapper
           .find('DataListCell')
-          .at(2)
+          .at(1)
           .text()
       ).toBe('Playbook Run');
     });

awx/ui_next/src/types.js

@@ -283,7 +283,7 @@ export const Schedule = shape({
   modified: string,
   name: string.isRequired,
   description: string,
-  extra_data: shape({}),
+  extra_data: oneOfType([string, shape({})]),
   inventory: number,
   scm_branch: string,
   job_type: string,