Merge pull request #7614 from vjanssens/5626-add-item-count

Add pagination/item count to DataListToolbar

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

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,
@@ -36,6 +37,7 @@ class DataListToolbar extends React.Component {
       additionalControls,
       i18n,
       qsConfig,
+      pagination,
     } = this.props;
 
     const showExpandCollapse = onCompact && onExpand;
@@ -90,6 +92,9 @@ class DataListToolbar extends React.Component {
               <ToolbarItem key={control.key}>{control}</ToolbarItem>
             ))}
           </ToolbarGroup>
+          {pagination && itemCount > 0 && (
+            <ToolbarItem variant="pagination">{pagination}</ToolbarItem>
+          )}
         </ToolbarContent>
       </Toolbar>
     );
@@ -97,6 +102,7 @@ class DataListToolbar extends React.Component {
 }
 
 DataListToolbar.propTypes = {
+  itemCount: PropTypes.number,
   clearAllFilters: PropTypes.func,
   qsConfig: QSConfig.isRequired,
   searchColumns: SearchColumns.isRequired,
@@ -114,6 +120,7 @@ DataListToolbar.propTypes = {
 };
 
 DataListToolbar.defaultProps = {
+  itemCount: 0,
   clearAllFilters: null,
   showSelectAll: false,
   isAllSelected: false,

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;
@@ -118,6 +119,7 @@ class ListHeader extends React.Component {
         ) : (
           <Fragment>
             {renderToolbar({
+              itemCount,
               searchColumns,
               sortColumns,
               onSearch: this.handleSearch,
@@ -126,6 +128,7 @@ class ListHeader extends React.Component {
               onRemove: this.handleRemove,
               clearAllFilters: this.handleRemoveAll,
               qsConfig,
+              pagination,
             })}
           </Fragment>
         )}

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

@@ -121,6 +121,28 @@ class PaginatedDataList extends React.Component {
       );
     }
 
+    const 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,6 +152,7 @@ class PaginatedDataList extends React.Component {
           searchColumns={searchColumns}
           sortColumns={sortColumns}
           qsConfig={qsConfig}
+          pagination={ToolbarPagination}
         />
         {Content}
         {items.length ? (

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

@@ -55,7 +55,7 @@ describe('<PaginatedDataList />', () => {
       { context: { router: { history } } }
     );
 
-    const pagination = wrapper.find('Pagination');
+    const pagination = wrapper.find('Pagination').at(1);
     pagination.prop('onSetPage')(null, 2);
     expect(history.location.search).toEqual('?item.page=2');
     wrapper.update();
@@ -82,7 +82,7 @@ describe('<PaginatedDataList />', () => {
       { context: { router: { history } } }
     );
 
-    const pagination = wrapper.find('Pagination');
+    const pagination = wrapper.find('Pagination').at(1);
     pagination.prop('onPerPageSelect')(null, 25, 2);
     expect(history.location.search).toEqual('?item.page=2&item.page_size=25');
     wrapper.update();