mirror of
https://github.com/ansible/awx.git
synced 2026-02-14 09:44:47 -03:30
Fix searching for a blank string creates a blank search filter
Fix searching for a blank string creates a blank search filter. Also, add unit-test to the related changes. closes: https://github.com/ansible/awx/issues/6511
This commit is contained in:
@@ -80,17 +80,19 @@ class Search extends React.Component {
|
|||||||
const { searchKey, searchValue } = this.state;
|
const { searchKey, searchValue } = this.state;
|
||||||
const { onSearch, qsConfig } = this.props;
|
const { onSearch, qsConfig } = this.props;
|
||||||
|
|
||||||
const isNonStringField =
|
if (searchValue) {
|
||||||
qsConfig.integerFields.find(field => field === searchKey) ||
|
const isNonStringField =
|
||||||
qsConfig.dateFields.find(field => field === searchKey);
|
qsConfig.integerFields.find(field => field === searchKey) ||
|
||||||
|
qsConfig.dateFields.find(field => field === searchKey);
|
||||||
|
|
||||||
const actualSearchKey = isNonStringField
|
const actualSearchKey = isNonStringField
|
||||||
? searchKey
|
? searchKey
|
||||||
: `${searchKey}__icontains`;
|
: `${searchKey}__icontains`;
|
||||||
|
|
||||||
onSearch(actualSearchKey, searchValue);
|
onSearch(actualSearchKey, searchValue);
|
||||||
|
|
||||||
this.setState({ searchValue: '' });
|
this.setState({ searchValue: '' });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSearchInputChange(searchValue) {
|
handleSearchInputChange(searchValue) {
|
||||||
@@ -276,13 +278,16 @@ class Search extends React.Component {
|
|||||||
onChange={this.handleSearchInputChange}
|
onChange={this.handleSearchInputChange}
|
||||||
onKeyDown={this.handleTextKeyDown}
|
onKeyDown={this.handleTextKeyDown}
|
||||||
/>
|
/>
|
||||||
<Button
|
<div css={!searchValue && `cursor:not-allowed`}>
|
||||||
variant={ButtonVariant.control}
|
<Button
|
||||||
aria-label={i18n._(t`Search submit button`)}
|
variant={ButtonVariant.control}
|
||||||
onClick={this.handleSearch}
|
isDisabled={!searchValue}
|
||||||
>
|
aria-label={i18n._(t`Search submit button`)}
|
||||||
<SearchIcon />
|
onClick={this.handleSearch}
|
||||||
</Button>
|
>
|
||||||
|
<SearchIcon />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</InputGroup>
|
</InputGroup>
|
||||||
)}
|
)}
|
||||||
</DataToolbarFilter>
|
</DataToolbarFilter>
|
||||||
|
|||||||
@@ -92,4 +92,53 @@ describe('<Search />', () => {
|
|||||||
.handleDropdownSelect({ target: { innerText: 'Description' } });
|
.handleDropdownSelect({ target: { innerText: 'Description' } });
|
||||||
expect(wrapper.state('searchKey')).toEqual('description');
|
expect(wrapper.state('searchKey')).toEqual('description');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('attempt to search with empty string', () => {
|
||||||
|
const searchButton = 'button[aria-label="Search submit button"]';
|
||||||
|
const searchTextInput = 'input[aria-label="Search text input"]';
|
||||||
|
const columns = [{ name: 'Name', key: 'name', isDefault: true }];
|
||||||
|
const onSearch = jest.fn();
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DataToolbar
|
||||||
|
id={`${QS_CONFIG.namespace}-list-toolbar`}
|
||||||
|
clearAllFilters={() => {}}
|
||||||
|
collapseListedFiltersBreakpoint="md"
|
||||||
|
>
|
||||||
|
<DataToolbarContent>
|
||||||
|
<Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
|
||||||
|
</DataToolbarContent>
|
||||||
|
</DataToolbar>
|
||||||
|
);
|
||||||
|
|
||||||
|
wrapper.find(searchTextInput).instance().value = '';
|
||||||
|
wrapper.find(searchTextInput).simulate('change');
|
||||||
|
wrapper.find(searchButton).simulate('click');
|
||||||
|
|
||||||
|
expect(onSearch).toHaveBeenCalledTimes(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('search with a valid string', () => {
|
||||||
|
const searchButton = 'button[aria-label="Search submit button"]';
|
||||||
|
const searchTextInput = 'input[aria-label="Search text input"]';
|
||||||
|
const columns = [{ name: 'Name', key: 'name', isDefault: true }];
|
||||||
|
const onSearch = jest.fn();
|
||||||
|
const wrapper = mountWithContexts(
|
||||||
|
<DataToolbar
|
||||||
|
id={`${QS_CONFIG.namespace}-list-toolbar`}
|
||||||
|
clearAllFilters={() => {}}
|
||||||
|
collapseListedFiltersBreakpoint="md"
|
||||||
|
>
|
||||||
|
<DataToolbarContent>
|
||||||
|
<Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
|
||||||
|
</DataToolbarContent>
|
||||||
|
</DataToolbar>
|
||||||
|
);
|
||||||
|
|
||||||
|
wrapper.find(searchTextInput).instance().value = 'test-321';
|
||||||
|
wrapper.find(searchTextInput).simulate('change');
|
||||||
|
wrapper.find(searchButton).simulate('click');
|
||||||
|
|
||||||
|
expect(onSearch).toHaveBeenCalledTimes(1);
|
||||||
|
expect(onSearch).toBeCalledWith('name__icontains', 'test-321');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user