External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-09 23:12:08 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10180 from AlexSCorey/10162-ConvertOptionsList

Browse Source 
Converts Options lists and other modal lists to tables

SUMMARY
This addresses #10162.  Note this issue I found while working on this #10181
Kicked Off E2E
ISSUE TYPE

Feature Pull Request

COMPONENT NAME

UI

AWX VERSION
ADDITIONAL INFORMATION

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
Reviewed-by: Keith Grant <keithjgrant@gmail.com>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>
This commit is contained in:
softwarefactory-project-zuul[bot] 2021-05-26 15:11:46 +00:00 committed by GitHub
commit c4eceb0915
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 212 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.jsx
View File

@ -206,7 +206,8 @@ describe('<AdHocCommands />', () => {
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-2"]')
.find('td#check-action-item-2')
.find('input')
.simulate('change', { target: { checked: true } });
});
@ -224,7 +225,8 @@ describe('<AdHocCommands />', () => {
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-4"]')
.find('td#check-action-item-4')
.find('input')
.simulate('change', { target: { checked: true } });
});
@ -373,7 +375,8 @@ describe('<AdHocCommands />', () => {
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-2"]')
.find('td#check-action-item-2')
.find('input')
.simulate('change', {
target: {
checked: true,
@ -395,7 +398,8 @@ describe('<AdHocCommands />', () => {
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-4"]')
.find('td#check-action-item-4')
.find('input')
.simulate('change', {
target: {
checked: true,

6
awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.jsx
View File

@ -153,7 +153,8 @@ describe('<AdHocCommandsWizard/>', () => {
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-1"]')
.find('td#check-action-item-1')
.find('input')
.simulate('change', { target: { checked: true } });
});
@ -178,7 +179,8 @@ describe('<AdHocCommandsWizard/>', () => {
expect(wrapper.find('Button[type="submit"]').prop('isDisabled')).toBe(true);
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-1"]')
.find('td#check-action-item-1')
.find('input')
.simulate('change', { target: { checked: true } });
});

32
awx/ui_next/src/components/AddRole/AddResourceRole.test.jsx
View File

@ -96,12 +96,12 @@ describe('<_AddResourceRole />', () => {
// Step 2
await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
act(() =>
wrapper.find('DataListCheck[name="foo"]').invoke('onChange')(true)
wrapper.find('CheckboxListItem[name="foo"]').invoke('onSelect')(true)
);
wrapper.update();
expect(wrapper.find('DataListCheck[name="foo"]').prop('checked')).toBe(
true
);
expect(
wrapper.find('CheckboxListItem[name="foo"]').prop('isSelected')
).toBe(true);
act(() => wrapper.find('Button[type="submit"]').prop('onClick')());
wrapper.update();
@ -162,12 +162,12 @@ describe('<_AddResourceRole />', () => {
// Step 2
await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
act(() =>
wrapper.find('DataListCheck[name="foo"]').invoke('onChange')(true)
wrapper.find('CheckboxListItem[name="foo"]').invoke('onSelect')(true)
);
wrapper.update();
expect(wrapper.find('DataListCheck[name="foo"]').prop('checked')).toBe(
true
);
expect(
wrapper.find('CheckboxListItem[name="foo"]').prop('isSelected')
).toBe(true);
act(() => wrapper.find('Button[type="submit"]').prop('onClick')());
wrapper.update();
@ -214,12 +214,12 @@ describe('<_AddResourceRole />', () => {
// Step 2
await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
act(() =>
wrapper.find('DataListCheck[name="foo"]').invoke('onChange')(true)
wrapper.find('CheckboxListItem[name="foo"]').invoke('onSelect')(true)
);
wrapper.update();
expect(wrapper.find('DataListCheck[name="foo"]').prop('checked')).toBe(
true
);
expect(
wrapper.find('CheckboxListItem[name="foo"]').prop('isSelected')
).toBe(true);
await act(async () =>
wrapper.find('PFWizard').prop('onGoToStep')({ id: 1 })
);
@ -280,12 +280,12 @@ describe('<_AddResourceRole />', () => {
// Step 2
await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
act(() =>
wrapper.find('DataListCheck[name="foo"]').invoke('onChange')(true)
wrapper.find('CheckboxListItem[name="foo"]').invoke('onSelect')(true)
);
wrapper.update();
expect(wrapper.find('DataListCheck[name="foo"]').prop('checked')).toBe(
true
);
expect(
wrapper.find('CheckboxListItem[name="foo"]').prop('isSelected')
).toBe(true);
act(() => wrapper.find('Button[type="submit"]').prop('onClick')());
wrapper.update();

17
awx/ui_next/src/components/AddRole/SelectResourceStep.jsx
View File

@ -5,11 +5,11 @@ import { t } from '@lingui/macro';
import useRequest from '../../util/useRequest';
import { SearchColumns, SortColumns } from '../../types';
import PaginatedDataList from '../PaginatedDataList';
import DataListToolbar from '../DataListToolbar';
import CheckboxListItem from '../CheckboxListItem';
import SelectedList from '../SelectedList';
import { getQSConfig, parseQueryString } from '../../util/qs';
import PaginatedTable, { HeaderCell, HeaderRow } from '../PaginatedTable';
const QS_Config = sortColumns => {
return getQSConfig('resource', {
@ -86,7 +86,8 @@ function SelectResourceStep({
selected={selectedResourceRows}
/>
)}
<PaginatedDataList
<PaginatedTable
hasContentLoading={isLoading}
contentError={error}
items={resources}
@ -97,11 +98,21 @@ function SelectResourceStep({
toolbarSortColumns={sortColumns}
toolbarSearchableKeys={searchableKeys}
toolbarRelatedSearchableKeys={relatedSearchableKeys}
renderItem={item => (
headerRow={
<HeaderRow qsConfig={QS_Config(sortColumns)}>
{sortColumns.map(({ name, key }) => (
<HeaderCell sortKey={key}>{name}</HeaderCell>
))}
</HeaderRow>
}
renderRow={(item, index) => (
<CheckboxListItem
isSelected={selectedResourceRows.some(i => i.id === item.id)}
itemId={item.id}
item={item}
rowIndex={index}
key={item.id}
columns={sortColumns}
name={item[displayKey]}
label={item[displayKey]}
onSelect={() => onRowClick(item)}

94
awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
View File

@ -1,34 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import {
DataListItem,
DataListItemRow as PFDataListItemRow,
DataListItemCells,
DataListCheck,
Radio,
} from '@patternfly/react-core';
import _DataListCell from '../DataListCell';
const Label = styled.label`
${({ isDisabled }) =>
isDisabled &&
`
opacity: 0.5;
`}
`;
const DataListItemRow = styled(PFDataListItemRow)`
&& {
align-items: center;
}
`;
const DataListCell = styled(_DataListCell)`
&& {
margin-left: 10px;
}
`;
import { t } from '@lingui/macro';
import { Td, Tr } from '@patternfly/react-table';
const CheckboxListItem = ({
isDisabled = false,
@ -38,43 +11,38 @@ const CheckboxListItem = ({
label,
name,
onDeselect,
rowIndex,
onSelect,
columns,
item,
}) => {
const CheckboxRadio = isRadio ? Radio : DataListCheck;
return (
<DataListItem
key={itemId}
aria-labelledby={`check-action-item-${itemId}`}
id={`${itemId}`}
>
<DataListItemRow>
<CheckboxRadio
aria-label={`check-action-item-${itemId}`}
aria-labelledby={`check-action-item-${itemId}`}
checked={isSelected}
isDisabled={isDisabled}
id={`selected-${itemId}`}
isChecked={isSelected}
name={name}
onChange={isSelected ? onDeselect : onSelect}
value={itemId}
/>
<DataListItemCells
dataListCells={[
<DataListCell key="name">
<Label
id={`check-action-item-${itemId}`}
htmlFor={`selected-${itemId}`}
className="check-action-item"
isDisabled={isDisabled}
>
<b>{label}</b>
</Label>
</DataListCell>,
]}
/>
</DataListItemRow>
</DataListItem>
<Tr ouiaId={`list-item-${itemId}`} id={`list-item-${itemId}`}>
<Td
id={`check-action-item-${itemId}`}
select={{
rowIndex,
isSelected,
onSelect: isSelected ? onDeselect : onSelect,
disable: isDisabled,
variant: isRadio ? 'radio' : 'checkbox',
}}
name={name}
dataLabel={t`Selected`}
/>
{columns?.length > 0 ? (
columns.map(col => (
<Td aria-label={col.name} dataLabel={col.key}>
{item[col.key]}
</Td>
))
) : (
<Td aria-labelledby={itemId} dataLabel={label}>
<b>{label}</b>
</Td>
)}
</Tr>
);
};

9
awx/ui_next/src/components/LaunchPrompt/steps/CredentialsStep.test.jsx
View File

@ -181,7 +181,8 @@ describe('CredentialsStep', () => {
expect(wrapper.find('Alert').length).toBe(0);
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-2"]')
.find('td#check-action-item-2')
.find('input')
.simulate('change', { target: { checked: true } });
});
wrapper.update();
@ -241,7 +242,8 @@ describe('CredentialsStep', () => {
).toBe(true);
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-5"]')
.find('td#check-action-item-5')
.find('input')
.simulate('change', { target: { checked: true } });
});
wrapper.update();
@ -317,7 +319,8 @@ describe('CredentialsStep', () => {
wrapper.update();
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-33"]')
.find('td#check-action-item-33')
.find('input')
.simulate('change', { target: { checked: true } });
});
wrapper.update();

12
awx/ui_next/src/components/OptionsList/OptionsList.jsx
View File

@ -12,10 +12,10 @@ import styled from 'styled-components';
import { t } from '@lingui/macro';
import SelectedList from '../SelectedList';
import PaginatedDataList from '../PaginatedDataList';
import CheckboxListItem from '../CheckboxListItem';
import DataListToolbar from '../DataListToolbar';
import { QSConfig, SearchColumns, SortColumns } from '../../types';
import PaginatedTable, { HeaderCell, HeaderRow } from '../PaginatedTable';
const ModalList = styled.div`
.pf-c-toolbar__content {
@ -56,7 +56,7 @@ function OptionsList({
displayKey={displayKey}
/>
)}
<PaginatedDataList
<PaginatedTable
contentError={contentError}
items={options}
itemCount={optionCount}
@ -67,10 +67,16 @@ function OptionsList({
toolbarSearchableKeys={searchableKeys}
toolbarRelatedSearchableKeys={relatedSearchableKeys}
hasContentLoading={isLoading}
headerRow={
<HeaderRow qsConfig={qsConfig}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
</HeaderRow>
}
onRowClick={selectItem}
renderItem={item => (
renderRow={(item, index) => (
<CheckboxListItem
key={item.id}
rowIndex={index}
itemId={item.id}
name={multiple ? item[displayKey] : name}
label={item[displayKey]}

2
awx/ui_next/src/components/OptionsList/OptionsList.test.jsx
View File

@ -27,7 +27,7 @@ describe('<OptionsList />', () => {
name="Item"
/>
);
expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(options);
expect(wrapper.find('PaginatedTable').prop('items')).toEqual(options);
expect(wrapper.find('SelectedList')).toHaveLength(0);
});

1
awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx
View File

@ -35,7 +35,6 @@ function PaginatedTable({
toolbarRelatedSearchableKeys,
pluralizedItemName,
showPageSizeOptions,
renderToolbar,
emptyContentMessage,
ouiaId,

6
awx/ui_next/src/components/Schedule/ScheduleAdd/ScheduleAdd.test.jsx
View File

@ -339,7 +339,8 @@ describe('<ScheduleAdd />', () => {
).toBe(true);
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-1"]')
.find('td#check-action-item-1')
.find('input')
.simulate('change', {
target: {
checked: true,
@ -349,7 +350,8 @@ describe('<ScheduleAdd />', () => {
wrapper.update();
expect(
wrapper
.find('input[aria-labelledby="check-action-item-1"]')
.find('td#check-action-item-1')
.find('input')
.prop('checked')
).toBe(true);
await act(async () =>

18
awx/ui_next/src/components/Schedule/ScheduleEdit/ScheduleEdit.test.jsx
View File

@ -471,7 +471,8 @@ describe('<ScheduleEdit />', () => {
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-1"]')
.find('td#check-action-item-1')
.find('input')
.simulate('change', {
target: {
checked: true,
@ -482,7 +483,8 @@ describe('<ScheduleEdit />', () => {
expect(
wrapper
.find('input[aria-labelledby="check-action-item-1"]')
.find('td#check-action-item-1')
.find('input')
.prop('checked')
).toBe(true);
await act(async () =>
@ -502,13 +504,15 @@ describe('<ScheduleEdit />', () => {
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-2"]')
.find('td#check-action-item-2')
.find('input')
.simulate('click');
});
wrapper.update();
expect(
wrapper
.find('input[aria-labelledby="check-action-item-2"]')
.find('td#check-action-item-2')
.find('input')
.prop('checked')
).toBe(true);
await act(async () =>
@ -599,7 +603,8 @@ describe('<ScheduleEdit />', () => {
wrapper.update();
await act(async () => {
wrapper
.find('input[aria-labelledby="check-action-item-2"]')
.find('td#check-action-item-2')
.find('input')
.simulate('change', {
target: {
checked: true,
@ -610,7 +615,8 @@ describe('<ScheduleEdit />', () => {
expect(
wrapper
.find('input[aria-labelledby="check-action-item-2"]')
.find('td#check-action-item-2')
.find('input')
.prop('checked')
).toBe(true);
await act(async () =>

6
awx/ui_next/src/components/Schedule/shared/ScheduleForm.test.jsx
View File

@ -330,7 +330,8 @@ describe('<ScheduleForm />', () => {
).toBe(true);
await act(async () => {
promptWrapper
.find('input[aria-labelledby="check-action-item-1"]')
.find('td#check-action-item-1')
.find('input')
.simulate('change', {
target: {
checked: true,
@ -340,7 +341,8 @@ describe('<ScheduleForm />', () => {
promptWrapper.update();
expect(
promptWrapper
.find('input[aria-labelledby="check-action-item-1"]')
.find('td#check-action-item-1')
.find('input')
.prop('checked')
).toBe(true);
await act(async () =>

10
awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.jsx
View File

@ -19,15 +19,7 @@ import { CredentialPluginPrompt } from './CredentialPluginPrompt';
import CredentialPluginSelected from './CredentialPluginSelected';
function CredentialPluginInput(props) {
const {
children,
isDisabled,
isRequired,
validated,
fieldOptions,
} = props;
const { children, isDisabled, isRequired, validated, fieldOptions } = props;
const [showPluginWizard, setShowPluginWizard] = useState(false);
const [inputField, meta, helpers] = useField(`inputs.${fieldOptions.id}`);
const [passwordPromptField] = useField(`passwordPrompts.${fieldOptions.id}`);

28
awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.test.jsx
View File

@ -114,7 +114,7 @@ describe('<CredentialPluginPrompt />', () => {
test('credentials step renders correctly', () => {
expect(wrapper.find('CredentialsStep').length).toBe(1);
expect(wrapper.find('DataListItem').length).toBe(3);
expect(wrapper.find('CheckboxListItem').length).toBe(3);
expect(
wrapper.find('Radio').filterWhere(radio => radio.isChecked).length
).toBe(0);
@ -129,18 +129,19 @@ describe('<CredentialPluginPrompt />', () => {
expect(onClose).toHaveBeenCalledTimes(1);
});
test('clicking credential row enables next button', async () => {
await waitForElement(wrapper, 'CheckboxListItem', el => el.length > 0);
await act(async () => {
wrapper
.find('Radio')
.at(0)
.find('td#check-action-item-1')
.find('input')
.invoke('onChange')(true);
});
wrapper.update();
expect(
wrapper
.find('Radio')
.at(0)
.prop('isChecked')
.find('td#check-action-item-1')
.find('input')
.prop('checked')
).toBe(true);
expect(wrapper.find('Button[children="Next"]').prop('isDisabled')).toBe(
false
@ -168,8 +169,7 @@ describe('<CredentialPluginPrompt />', () => {
await act(async () => {
wrapper.find('Button[children="OK"]').simulate('click');
});
// expect(wrapper.debug()).toBe(false);
// wrapper.find('Button[children="OK"]').simulate('click');
expect(onSubmit).toHaveBeenCalledWith(
expect.objectContaining({
credential: selectedCredential,
@ -218,14 +218,16 @@ describe('<CredentialPluginPrompt />', () => {
expect(steps[0].name).toEqual('Credential');
expect(steps[1].name).toEqual('Metadata');
});
test('credentials step renders correctly', () => {
test('credentials step renders correctly', async () => {
await waitForElement(wrapper, 'CheckboxListItem', el => el.length > 0);
expect(wrapper.find('CredentialsStep').length).toBe(1);
expect(wrapper.find('DataListItem').length).toBe(3);
expect(wrapper.find('CheckboxListItem').length).toBe(3);
expect(
wrapper
.find('Radio')
.at(0)
.prop('isChecked')
.find('td#check-action-item-1')
.find('input')
.prop('checked')
).toBe(true);
expect(wrapper.find('Button[children="Next"]').prop('isDisabled')).toBe(
false

22
awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialsStep.jsx
View File

@ -7,9 +7,12 @@ import { CredentialsAPI } from '../../../../../api';
import CheckboxListItem from '../../../../../components/CheckboxListItem';
import ContentError from '../../../../../components/ContentError';
import DataListToolbar from '../../../../../components/DataListToolbar';
import PaginatedDataList from '../../../../../components/PaginatedDataList';
import { getQSConfig, parseQueryString } from '../../../../../util/qs';
import useRequest from '../../../../../util/useRequest';
import PaginatedTable, {
HeaderCell,
HeaderRow,
} from '../../../../../components/PaginatedTable';
const QS_CONFIG = getQSConfig('credential', {
page: 1,
@ -59,15 +62,20 @@ function CredentialsStep() {
}
return (
<PaginatedDataList
<PaginatedTable
contentError={credentialsError}
hasContentLoading={isCredentialsLoading}
itemCount={count}
items={credentials}
onRowClick={row => selectedCredentialHelper.setValue(row)}
qsConfig={QS_CONFIG}
renderItem={credential => (
headerRow={
<HeaderRow isExpandable={false} qsConfig={QS_CONFIG}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
</HeaderRow>
}
renderRow={(credential, index) => (
<CheckboxListItem
rowIndex={index}
isSelected={selectedCredential?.value?.id === credential.id}
itemId={credential.id}
key={credential.id}
@ -95,12 +103,6 @@ function CredentialsStep() {
key: 'modified_by__username__icontains',
},
]}
toolbarSortColumns={[
{
name: t`Name`,
key: 'name',
},
]}
toolbarSearchableKeys={searchableKeys}
toolbarRelatedSearchableKeys={relatedSearchableKeys}
/>

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

@ -253,10 +253,6 @@ describe('NodeModal', () => {
});
await waitForElement(wrapper, 'PFWizard');
});
afterEach(() => {
// jest.clearAllMocks();
// onSave.mockClear();
});
test('Can successfully create a new job template node', async () => {
act(() => {
@ -268,7 +264,10 @@ describe('NodeModal', () => {
});
wrapper.update();
await act(async () => {
wrapper.find('Radio').simulate('click');
wrapper
.find('td#check-action-item-1')
.find('input')
.prop('onChange')(true);
});
wrapper.update();
await act(async () => {
@ -333,8 +332,12 @@ describe('NodeModal', () => {
wrapper.find('AnsibleSelect').prop('onChange')(null, 'project');
});
wrapper.update();
await act(async () => {
wrapper.find('Radio').simulate('click');
wrapper
.find('td#check-action-item-1')
.find('input')
.prop('onChange')(true);
});
wrapper.update();
await act(async () => {
@ -370,7 +373,10 @@ describe('NodeModal', () => {
});
wrapper.update();
await act(async () => {
wrapper.find('Radio').simulate('click');
wrapper
.find('td#check-action-item-1')
.find('input')
.prop('onChange')(true);
});
wrapper.update();
await act(async () => {
@ -405,7 +411,12 @@ describe('NodeModal', () => {
);
});
wrapper.update();
await act(async () => wrapper.find('Radio').simulate('click'));
await act(async () =>
wrapper
.find('td#check-action-item-1')
.find('input')
.prop('onChange')(true)
);
wrapper.update();
await act(async () => {
@ -659,7 +670,10 @@ describe('Edit existing node', () => {
'workflow_job_template'
);
await act(async () => {
newWrapper.find('Radio').simulate('click');
newWrapper
.find('td#check-action-item-1')
.find('input')
.prop('onChange')();
newWrapper.update();
});
newWrapper.update();

22
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.jsx
View File

@ -6,9 +6,12 @@ import { func, shape } from 'prop-types';
import { InventorySourcesAPI } from '../../../../../../api';
import { getQSConfig, parseQueryString } from '../../../../../../util/qs';
import useRequest from '../../../../../../util/useRequest';
import PaginatedDataList from '../../../../../../components/PaginatedDataList';
import DataListToolbar from '../../../../../../components/DataListToolbar';
import CheckboxListItem from '../../../../../../components/CheckboxListItem';
import PaginatedTable, {
HeaderCell,
HeaderRow,
} from '../../../../../../components/PaginatedTable';
const QS_CONFIG = getQSConfig('inventory-sources', {
page: 1,
@ -55,16 +58,21 @@ function InventorySourcesList({ nodeResource, onUpdateNodeResource }) {
}, [fetchInventorySources]);
return (
<PaginatedDataList
<PaginatedTable
contentError={error}
hasContentLoading={isLoading}
itemCount={count}
items={inventorySources}
onRowClick={row => onUpdateNodeResource(row)}
qsConfig={QS_CONFIG}
showPageSizeOptions={false}
renderItem={item => (
headerRow={
<HeaderRow isExpandable={false} qsConfig={QS_CONFIG}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
</HeaderRow>
}
renderRow={(item, index) => (
<CheckboxListItem
rowIndex={index}
isSelected={!!(nodeResource && nodeResource.id === item.id)}
itemId={item.id}
key={item.id}
@ -99,12 +107,6 @@ function InventorySourcesList({ nodeResource, onUpdateNodeResource }) {
],
},
]}
toolbarSortColumns={[
{
name: t`Name`,
key: 'name',
},
]}
toolbarSearchableKeys={searchableKeys}
toolbarRelatedSearchableKeys={relatedSearchableKeys}
/>

2
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.test.jsx
View File

@ -66,7 +66,7 @@ describe('InventorySourcesList', () => {
).toBe(false);
wrapper
.find('CheckboxListItem[name="Test Inventory Source 2"]')
.simulate('click');
.prop('onSelect')();
expect(onUpdateNodeResource).toHaveBeenCalledWith({
id: 2,
name: 'Test Inventory Source 2',

22
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.jsx
View File

@ -6,9 +6,12 @@ import { func, shape } from 'prop-types';
import { JobTemplatesAPI } from '../../../../../../api';
import { getQSConfig, parseQueryString } from '../../../../../../util/qs';
import useRequest from '../../../../../../util/useRequest';
import PaginatedDataList from '../../../../../../components/PaginatedDataList';
import DataListToolbar from '../../../../../../components/DataListToolbar';
import CheckboxListItem from '../../../../../../components/CheckboxListItem';
import PaginatedTable, {
HeaderCell,
HeaderRow,
} from '../../../../../../components/PaginatedTable';
const QS_CONFIG = getQSConfig('job-templates', {
page: 1,
@ -57,15 +60,20 @@ function JobTemplatesList({ nodeResource, onUpdateNodeResource }) {
}, [fetchJobTemplates]);
return (
<PaginatedDataList
<PaginatedTable
contentError={error}
hasContentLoading={isLoading}
itemCount={count}
items={jobTemplates}
onRowClick={row => onUpdateNodeResource(row)}
qsConfig={QS_CONFIG}
renderItem={item => (
headerRow={
<HeaderRow isExpandable={false} qsConfig={QS_CONFIG}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
</HeaderRow>
}
renderRow={(item, index) => (
<CheckboxListItem
rowIndex={index}
isSelected={!!(nodeResource && nodeResource.id === item.id)}
itemId={item.id}
key={`${item.id}-listItem`}
@ -97,12 +105,6 @@ function JobTemplatesList({ nodeResource, onUpdateNodeResource }) {
key: 'modified_by__username__icontains',
},
]}
toolbarSortColumns={[
{
name: t`Name`,
key: 'name',
},
]}
toolbarSearchableKeys={searchableKeys}
toolbarRelatedSearchableKeys={relatedSearchableKeys}
/>

3
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.test.jsx
View File

@ -61,7 +61,6 @@ describe('JobTemplatesList', () => {
);
});
wrapper.update();
// expect(wrapper.debug()).toBe(false);
expect(
wrapper.find('CheckboxListItem[name="Test Job Template"]').props()
.isSelected
@ -72,7 +71,7 @@ describe('JobTemplatesList', () => {
).toBe(false);
wrapper
.find('CheckboxListItem[name="Test Job Template 2"]')
.simulate('click');
.prop('onSelect')();
expect(onUpdateNodeResource).toHaveBeenCalledWith({
id: 2,
name: 'Test Job Template 2',

22
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/ProjectsList.jsx
View File

@ -6,9 +6,12 @@ import { func, shape } from 'prop-types';
import { ProjectsAPI } from '../../../../../../api';
import { getQSConfig, parseQueryString } from '../../../../../../util/qs';
import useRequest from '../../../../../../util/useRequest';
import PaginatedDataList from '../../../../../../components/PaginatedDataList';
import DataListToolbar from '../../../../../../components/DataListToolbar';
import CheckboxListItem from '../../../../../../components/CheckboxListItem';
import PaginatedTable, {
HeaderCell,
HeaderRow,
} from '../../../../../../components/PaginatedTable';
const QS_CONFIG = getQSConfig('projects', {
page: 1,
@ -55,15 +58,20 @@ function ProjectsList({ nodeResource, onUpdateNodeResource }) {
}, [fetchProjects]);
return (
<PaginatedDataList
<PaginatedTable
contentError={error}
hasContentLoading={isLoading}
itemCount={count}
items={projects}
onRowClick={row => onUpdateNodeResource(row)}
qsConfig={QS_CONFIG}
renderItem={item => (
headerRow={
<HeaderRow isExpandable={false} qsConfig={QS_CONFIG}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
</HeaderRow>
}
renderRow={(item, index) => (
<CheckboxListItem
rowIndex={index}
isSelected={!!(nodeResource && nodeResource.id === item.id)}
itemId={item.id}
key={item.id}
@ -106,12 +114,6 @@ function ProjectsList({ nodeResource, onUpdateNodeResource }) {
key: 'created_by__username__icontains',
},
]}
toolbarSortColumns={[
{
name: t`Name`,
key: 'name',
},
]}
toolbarSearchableKeys={searchableKeys}
toolbarRelatedSearchableKeys={relatedSearchableKeys}
/>

2
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/ProjectsList.test.jsx
View File

@ -62,7 +62,7 @@ describe('ProjectsList', () => {
expect(
wrapper.find('CheckboxListItem[name="Test Project 2"]').props().isSelected
).toBe(false);
wrapper.find('CheckboxListItem[name="Test Project 2"]').simulate('click');
wrapper.find('CheckboxListItem[name="Test Project 2"]').prop('onSelect')();
expect(onUpdateNodeResource).toHaveBeenCalledWith({
id: 2,
name: 'Test Project 2',

22
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/WorkflowJobTemplatesList.jsx
View File

@ -6,9 +6,12 @@ import { func, shape } from 'prop-types';
import { WorkflowJobTemplatesAPI } from '../../../../../../api';
import { getQSConfig, parseQueryString } from '../../../../../../util/qs';
import useRequest from '../../../../../../util/useRequest';
import PaginatedDataList from '../../../../../../components/PaginatedDataList';
import DataListToolbar from '../../../../../../components/DataListToolbar';
import CheckboxListItem from '../../../../../../components/CheckboxListItem';
import PaginatedTable, {
HeaderCell,
HeaderRow,
} from '../../../../../../components/PaginatedTable';
const QS_CONFIG = getQSConfig('workflow-job-templates', {
page: 1,
@ -62,15 +65,20 @@ function WorkflowJobTemplatesList({ nodeResource, onUpdateNodeResource }) {
}, [fetchWorkflowJobTemplates]);
return (
<PaginatedDataList
<PaginatedTable
contentError={error}
hasContentLoading={isLoading}
itemCount={count}
items={workflowJobTemplates}
onRowClick={row => onUpdateNodeResource(row)}
qsConfig={QS_CONFIG}
renderItem={item => (
headerRow={
<HeaderRow isExpandable={false} qsConfig={QS_CONFIG}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
</HeaderRow>
}
renderRow={(item, index) => (
<CheckboxListItem
rowIndex={index}
isSelected={!!(nodeResource && nodeResource.id === item.id)}
itemId={item.id}
key={item.id}
@ -106,12 +114,6 @@ function WorkflowJobTemplatesList({ nodeResource, onUpdateNodeResource }) {
key: 'modified_by__username__icontains',
},
]}
toolbarSortColumns={[
{
name: t`Name`,
key: 'name',
},
]}
toolbarSearchableKeys={searchableKeys}
toolbarRelatedSearchableKeys={relatedSearchableKeys}
/>

2
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/WorkflowJobTemplatesList.test.jsx
View File

@ -68,7 +68,7 @@ describe('WorkflowJobTemplatesList', () => {
).toBe(false);
wrapper
.find('CheckboxListItem[name="Test Workflow Job Template 2"]')
.simulate('click');
.prop('onSelect')();
expect(onUpdateNodeResource).toHaveBeenCalledWith({
id: 2,
name: 'Test Workflow Job Template 2',