Replace itemCount with DataListToolbar pagination

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

@@ -37,6 +37,7 @@ class DataListToolbar extends React.Component {
       additionalControls,
       i18n,
       qsConfig,
+      pagination
     } = this.props;
 
     const showExpandCollapse = onCompact && onExpand;
@@ -86,14 +87,16 @@ 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>
             ))}
           </ToolbarGroup>
+          {(pagination && itemCount > 0) &&
+            <ToolbarItem variant="pagination">
+              {pagination}
+            </ToolbarItem>
+          }
         </ToolbarContent>
       </Toolbar>
     );

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

@@ -98,6 +98,7 @@ class ListHeader extends React.Component {
       renderToolbar,
       qsConfig,
       location,
+      pagination
     } = this.props;
     const params = parseQueryString(qsConfig, location.search);
     const isEmpty = itemCount === 0 && Object.keys(params).length === 0;
@@ -127,6 +128,7 @@ class ListHeader extends React.Component {
               onRemove: this.handleRemove,
               clearAllFilters: this.handleRemoveAll,
               qsConfig,
+              pagination
             })}
           </Fragment>
         )}
@@ -141,10 +143,11 @@ ListHeader.propTypes = {
   searchColumns: SearchColumns.isRequired,
   sortColumns: SortColumns.isRequired,
   renderToolbar: PropTypes.func,
+  pagination: PropTypes.element
 };
 
 ListHeader.defaultProps = {
-  renderToolbar: props => <DataListToolbar {...props} />,
+  renderToolbar: props => <DataListToolbar {...props} />
 };
 
 export default withRouter(ListHeader);

awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -121,6 +121,28 @@ class PaginatedDataList extends React.Component {
       );
     }
 
+    let ToolbarPagination = (
+      <Pagination
+        isCompact
+        dropDirection="down"
+        itemCount={itemCount}
+        page={queryParams.page || 1}
+        perPage={queryParams.page_size}
+        perPageOptions={
+          showPageSizeOptions
+            ? [
+                { title: '5', value: 5 },
+                { title: '10', value: 10 },
+                { title: '20', value: 20 },
+                { title: '50', value: 50 },
+              ]
+            : []
+        }
+        onSetPage={this.handleSetPage}
+        onPerPageSelect={this.handleSetPageSize}
+      />
+    )
+
     return (
       <Fragment>
         <ListHeader
@@ -130,7 +152,9 @@ class PaginatedDataList extends React.Component {
           searchColumns={searchColumns}
           sortColumns={sortColumns}
           qsConfig={qsConfig}
-        />
+          pagination={ToolbarPagination}
+        >
+        </ListHeader>
         {Content}
         {items.length ? (
           <Pagination