External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-13 17:24:45 -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
parent 8343552dfc 90cac2ec35
commit 0f42782feb
3 changed files with 94 additions and 52 deletions
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> <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

@@ -19,6 +19,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 },
@@ -29,10 +33,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
qsConfig={QS_CONFIG} qsConfig={QS_CONFIG}
@@ -81,8 +81,6 @@ describe('<DataListToolbar />', () => {
{ name: 'Baz', key: 'baz' }, { name: 'Baz', key: 'baz' },
]; ];
const onSort = jest.fn();
toolbar = mountWithContexts( toolbar = mountWithContexts(
<DataListToolbar <DataListToolbar
qsConfig={QS_CONFIG} qsConfig={QS_CONFIG}
@@ -210,9 +208,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
@@ -233,4 +228,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);
});
}); });

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

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