External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-04-06 18:49:21 -02:30
Code Issues Packages Projects Releases Wiki Activity

ToolBar checkbox checks and JT Add Button closes and Test Clean up

Browse Source 
The Select-All check box in the DataList Toolbar will be checked when the
user clicks on it. Also, the JT Add button closes when the user clicks
elsewhere on the page as well as when the user clicks on the button a second time.
I also cleaned up some tests in the DataListToolBar file.
This commit is contained in:
Alex Corey
2019-09-20 16:25:05 -04:00
parent b00fc29cdc
commit ce1d9793ce
3 changed files with 65 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
View File

@@ -109,7 +109,7 @@ class DataListToolbar extends React.Component {
<Fragment> <Fragment>
<ToolbarItem> <ToolbarItem>
<Checkbox <Checkbox
checked={isAllSelected} isChecked={isAllSelected}
onChange={onSelectAll} onChange={onSelectAll}
aria-label={i18n._(t`Select all`)} aria-label={i18n._(t`Select all`)}
id="select-all" id="select-all"

35
awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
View File

@@ -12,6 +12,10 @@ describe('<DataListToolbar />', () => {
} }
}); });
const onSearch = jest.fn();
const onSort = jest.fn();
const onSelectAll = jest.fn();
test('it triggers the expected callbacks', () => { test('it triggers the expected callbacks', () => {
const columns = [ const columns = [
{ name: 'Name', key: 'name', isSortable: true, isSearchable: true }, { name: 'Name', key: 'name', isSortable: true, isSearchable: true },
@@ -22,10 +26,6 @@ describe('<DataListToolbar />', () => {
const selectAll = 'input[aria-label="Select all"]'; const selectAll = 'input[aria-label="Select all"]';
const sort = 'button[aria-label="Sort"]'; const sort = 'button[aria-label="Sort"]';
const onSearch = jest.fn();
const onSort = jest.fn();
const onSelectAll = jest.fn();
toolbar = mountWithContexts( toolbar = mountWithContexts(
<DataListToolbar <DataListToolbar
isAllSelected={false} isAllSelected={false}
@@ -73,8 +73,6 @@ describe('<DataListToolbar />', () => {
{ name: 'Baz', key: 'baz' }, { name: 'Baz', key: 'baz' },
]; ];
const onSort = jest.fn();
toolbar = mountWithContexts( toolbar = mountWithContexts(
<DataListToolbar <DataListToolbar
sortedColumnKey="foo" sortedColumnKey="foo"
@@ -198,9 +196,6 @@ describe('<DataListToolbar />', () => {
const columns = [ const columns = [
{ name: 'Name', key: 'name', isSortable: true, isSearchable: true }, { name: 'Name', key: 'name', isSortable: true, isSearchable: true },
]; ];
const onSearch = jest.fn();
const onSort = jest.fn();
const onSelectAll = jest.fn();
toolbar = mountWithContexts( toolbar = mountWithContexts(
<DataListToolbar <DataListToolbar
@@ -220,4 +215,26 @@ describe('<DataListToolbar />', () => {
expect(button).toHaveLength(1); expect(button).toHaveLength(1);
expect(button.text()).toEqual('click'); expect(button.text()).toEqual('click');
}); });
test('it triggers the expected callbacks', () => {
const columns = [
{ name: 'Name', key: 'name', isSortable: true, isSearchable: true },
];
toolbar = mountWithContexts(
<DataListToolbar
isAllSelected
showExpandCollapse
sortedColumnKey="name"
sortOrder="ascending"
columns={columns}
onSearch={onSearch}
onSort={onSort}
onSelectAll={onSelectAll}
showSelectAll
/>
);
const checkbox = toolbar.find('Checkbox');
expect(checkbox.prop('isChecked')).toBe(true);
});
}); });

61
awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
View File

@@ -56,6 +56,7 @@ class TemplatesList extends Component {
componentDidMount() { componentDidMount() {
this.loadTemplates(); this.loadTemplates();
document.addEventListener('click', this.handleAddToggle, false);
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
@@ -65,6 +66,10 @@ class TemplatesList extends Component {
} }
} }
componentWillUnmount() {
document.removeEventListener('click', this.handleAddToggle, false);
}
handleDeleteErrorClose() { handleDeleteErrorClose() {
this.setState({ deletionError: null }); this.setState({ deletionError: null });
} }
@@ -84,9 +89,15 @@ class TemplatesList extends Component {
} }
} }
handleAddToggle() { handleAddToggle(e) {
const { isAddOpen } = this.state; const { isAddOpen } = this.state;
this.setState({ isAddOpen: !isAddOpen }); if (this.node && this.node.contains(e.target) && isAddOpen) {
this.setState({ isAddOpen: false });
} else if (this.node && this.node.contains(e.target) && !isAddOpen) {
this.setState({ isAddOpen: true });
} else {
this.setState({ isAddOpen: false });
}
} }
async handleTemplateDelete() { async handleTemplateDelete() {
@@ -215,28 +226,32 @@ class TemplatesList extends Component {
itemName={i18n._(t`Template`)} itemName={i18n._(t`Template`)}
/>, />,
canAdd && ( canAdd && (
<Dropdown <div
ref={node => {
this.node = node;
}}
key="add" key="add"
isPlain >
isOpen={isAddOpen} <Dropdown
position={DropdownPosition.right} isPlain
onSelect={this.handleAddSelect} isOpen={isAddOpen}
toggle={ position={DropdownPosition.right}
<ToolbarAddButton onClick={this.handleAddToggle} /> onSelect={this.handleAddSelect}
} toggle={<ToolbarAddButton onClick={() => {}} />}
dropdownItems={[ dropdownItems={[
<DropdownItem key="job"> <DropdownItem key="job" isPlain>
<Link to={`${match.url}/job_template/add/`}> <Link to={`${match.url}/job_template/add/`}>
{i18n._(t`Job Template`)} {i18n._(t`Job Template`)}
</Link> </Link>
</DropdownItem>, </DropdownItem>,
<DropdownItem key="workflow"> <DropdownItem key="workflow" isPlain>
<Link to={`${match.url}_workflow/add/`}> <Link to={`${match.url}_workflow/add/`}>
{i18n._(t`Workflow Template`)} {i18n._(t`Workflow Template`)}
</Link> </Link>
</DropdownItem>, </DropdownItem>,
]} ]}
/> />
</div>
), ),
]} ]}
/> />