diff --git a/awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleList.test.jsx b/awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleList.test.jsx index aaece78d10..706f5f1bca 100644 --- a/awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleList.test.jsx +++ b/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(); diff --git a/awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleListItem.jsx b/awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleListItem.jsx index 1538d1ac91..0e6207ebe8 100644 --- a/awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleListItem.jsx +++ b/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({ - {schedule.name} @@ -106,7 +105,12 @@ function ScheduleListItem({ )} , - + {schedule.summary_fields.user_capabilities.edit && ( - - + )} - , + , ]} /> diff --git a/awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleListItem.test.jsx b/awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleListItem.test.jsx index df2b55bcbb..a835345edc 100644 --- a/awx/ui_next/src/screens/Schedule/ScheduleList/ScheduleListItem.test.jsx +++ b/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'); }); diff --git a/awx/ui_next/src/types.js b/awx/ui_next/src/types.js index 2ef6f718ba..b4270c707d 100644 --- a/awx/ui_next/src/types.js +++ b/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,