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,