diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx index 7db0bae778..2792c32985 100644 --- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx +++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx @@ -20,6 +20,7 @@ import { SearchColumns, SortColumns, QSConfig } from '../../types'; class DataListToolbar extends React.Component { render() { const { + itemCount, clearAllFilters, searchColumns, sortColumns, @@ -85,6 +86,9 @@ class DataListToolbar extends React.Component { )} + + {itemCount} {i18n._(t`results`)} + {additionalControls.map(control => ( {control} @@ -97,6 +101,7 @@ class DataListToolbar extends React.Component { } DataListToolbar.propTypes = { + itemCount: PropTypes.number, clearAllFilters: PropTypes.func, qsConfig: QSConfig.isRequired, searchColumns: SearchColumns.isRequired, @@ -114,6 +119,7 @@ DataListToolbar.propTypes = { }; DataListToolbar.defaultProps = { + itemCount: 0, clearAllFilters: null, showSelectAll: false, isAllSelected: false, diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx index b8b83ee6e2..34ad41e63c 100644 --- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx +++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx @@ -285,4 +285,21 @@ describe('', () => { const checkbox = toolbar.find('Checkbox'); expect(checkbox.prop('isChecked')).toBe(true); }); + + test('it shows item count', () => { + const searchColumns = [{ name: 'Name', key: 'name', isDefault: true }]; + const sortColumns = [{ name: 'Name', key: 'name' }]; + const itemCount = 5; + + toolbar = mountWithContexts( + + ); + const count = toolbar.find('#item-count'); + expect(count.at(0).text()).toEqual('5 results'); + }); }); diff --git a/awx/ui_next/src/components/ListHeader/ListHeader.jsx b/awx/ui_next/src/components/ListHeader/ListHeader.jsx index f1ac2a5ae8..ccd0c0b0fc 100644 --- a/awx/ui_next/src/components/ListHeader/ListHeader.jsx +++ b/awx/ui_next/src/components/ListHeader/ListHeader.jsx @@ -118,6 +118,7 @@ class ListHeader extends React.Component { ) : ( {renderToolbar({ + itemCount, searchColumns, sortColumns, onSearch: this.handleSearch,