Add item count to DataListToolbar

Signed-off-by: Vadiem Janssens <info@vadiemjanssens.nl>

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 {
               </Fragment>
             </ToolbarGroup>
           )}
+          <ToolbarItem id="item-count">
+            {itemCount} {i18n._(t`results`)}
+          </ToolbarItem>
           <ToolbarGroup>
             {additionalControls.map(control => (
               <ToolbarItem key={control.key}>{control}</ToolbarItem>
@@ -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,

awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx

@@ -285,4 +285,21 @@ describe('<DataListToolbar />', () => {
     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(
+      <DataListToolbar
+        qsConfig={QS_CONFIG}
+        searchColumns={searchColumns}
+        sortColumns={sortColumns}
+        itemCount={itemCount}
+      />
+    );
+    const count = toolbar.find('#item-count');
+    expect(count.at(0).text()).toEqual('5 results');
+  });
 });

awx/ui_next/src/components/ListHeader/ListHeader.jsx

@@ -118,6 +118,7 @@ class ListHeader extends React.Component {
         ) : (
           <Fragment>
             {renderToolbar({
+              itemCount,
               searchColumns,
               sortColumns,
               onSearch: this.handleSearch,