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

Merge pull request #4804 from AlexSCorey/4616-4766-JTAddBtn-ToolBarCheckBox

Browse Source 
ToolBar checkbox checks, JT Add Button closes and Test Clean up

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot] 2019-09-26 20:41:27 +00:00 committed by GitHub
commit 0f42782feb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 94 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -19,6 +19,10 @@ describe('<DataListToolbar />', () => {
}
});
const onSearch = jest.fn();
const onSort = jest.fn();
const onSelectAll = jest.fn();
test('it triggers the expected callbacks', () => {
const columns = [
{ name: 'Name', key: 'name', isSortable: true, isSearchable: true },
@ -29,10 +33,6 @@ describe('<DataListToolbar />', () => {
const selectAll = 'input[aria-label="Select all"]';
const sort = 'button[aria-label="Sort"]';
const onSearch = jest.fn();
const onSort = jest.fn();
const onSelectAll = jest.fn();
toolbar = mountWithContexts(
<DataListToolbar
qsConfig={QS_CONFIG}
@ -81,8 +81,6 @@ describe('<DataListToolbar />', () => {
{ name: 'Baz', key: 'baz' },
];
const onSort = jest.fn();
toolbar = mountWithContexts(
<DataListToolbar
qsConfig={QS_CONFIG}
@ -210,9 +208,6 @@ describe('<DataListToolbar />', () => {
const columns = [
{ name: 'Name', key: 'name', isSortable: true, isSearchable: true },
];
const onSearch = jest.fn();
const onSort = jest.fn();
const onSelectAll = jest.fn();
toolbar = mountWithContexts(
<DataListToolbar
@ -233,4 +228,26 @@ describe('<DataListToolbar />', () => {
expect(button).toHaveLength(1);
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);
});
});

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

@ -60,11 +60,16 @@ class TemplatesList extends Component {
componentDidUpdate(prevProps) {
const { location } = this.props;
if (location !== prevProps.location) {
this.loadTemplates();
}
}
componentWillUnmount() {
document.removeEventListener('click', this.handleAddToggle, false);
}
handleDeleteErrorClose() {
this.setState({ deletionError: null });
}
@ -84,9 +89,19 @@ class TemplatesList extends Component {
}
}
handleAddToggle() {
handleAddToggle(e) {
const { isAddOpen } = this.state;
this.setState({ isAddOpen: !isAddOpen });
document.addEventListener('click', this.handleAddToggle, false);
if (this.node && this.node.contains(e.target) && isAddOpen) {
document.removeEventListener('click', this.handleAddToggle, false);
this.setState({ isAddOpen: false });
} else if (this.node && this.node.contains(e.target) && !isAddOpen) {
this.setState({ isAddOpen: true });
} else {
this.setState({ isAddOpen: false });
document.removeEventListener('click', this.handleAddToggle, false);
}
}
async handleTemplateDelete() {
@ -216,28 +231,33 @@ class TemplatesList extends Component {
pluralizedItemName="Templates"
/>,
canAdd && (
<Dropdown
<div
ref={node => {
this.node = node;
}}
key="add"
isPlain
isOpen={isAddOpen}
position={DropdownPosition.right}
onSelect={this.handleAddSelect}
toggle={
<ToolbarAddButton onClick={this.handleAddToggle} />
}
dropdownItems={[
<DropdownItem key="job">
<Link to={`${match.url}/job_template/add/`}>
{i18n._(t`Job Template`)}
</Link>
</DropdownItem>,
<DropdownItem key="workflow">
<Link to={`${match.url}_workflow/add/`}>
{i18n._(t`Workflow Template`)}
</Link>
</DropdownItem>,
]}
/>
>
<Dropdown
isPlain
isOpen={isAddOpen}
position={DropdownPosition.right}
toggle={
<ToolbarAddButton onClick={this.handleAddToggle} />
}
dropdownItems={[
<DropdownItem key="job">
<Link to={`${match.url}/job_template/add/`}>
{i18n._(t`Job Template`)}
</Link>
</DropdownItem>,
<DropdownItem key="workflow">
<Link to={`${match.url}_workflow/add/`}>
{i18n._(t`Workflow Template`)}
</Link>
</DropdownItem>,
]}
/>
</div>
),
]}
/>
@ -254,26 +274,31 @@ class TemplatesList extends Component {
)}
emptyStateControls={
canAdd && (
<Dropdown
<div
ref={node => {
this.node = node;
}}
key="add"
isPlain
isOpen={isAddOpen}
position={DropdownPosition.right}
onSelect={this.handleAddSelect}
toggle={<ToolbarAddButton onClick={this.handleAddToggle} />}
dropdownItems={[
<DropdownItem key="job">
<Link to={`${match.url}/job_template/add/`}>
{i18n._(t`Job Template`)}
</Link>
</DropdownItem>,
<DropdownItem key="workflow">
<Link to={`${match.url}_workflow/add/`}>
{i18n._(t`Workflow Template`)}
</Link>
</DropdownItem>,
]}
/>
>
<Dropdown
isPlain
isOpen={isAddOpen}
position={DropdownPosition.right}
toggle={<ToolbarAddButton onClick={this.handleAddToggle} />}
dropdownItems={[
<DropdownItem key="job">
<Link to={`${match.url}/job_template/add/`}>
{i18n._(t`Job Template`)}
</Link>
</DropdownItem>,
<DropdownItem key="workflow">
<Link to={`${match.url}_workflow/add/`}>
{i18n._(t`Workflow Template`)}
</Link>
</DropdownItem>,
]}
/>
</div>
)
}
/>