Updates after removing PF overrides to list components.

This commit is contained in:
mabashian
2020-02-21 12:40:21 -05:00
parent 801aaf9323
commit e6e31a9fc6
4 changed files with 36 additions and 31 deletions

View File

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

View File

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

View File

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

View File

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