From 30a499b785e543975f316607ab0e9625ff4fbe92 Mon Sep 17 00:00:00 2001
From: Vadiem Janssens <info@vadiemjanssens.nl>
Date: Mon, 13 Jul 2020 20:32:08 +0200
Subject: [PATCH 1/3] Add item count to DataListToolbar

Signed-off-by: Vadiem Janssens <info@vadiemjanssens.nl>
---
 .../DataListToolbar/DataListToolbar.jsx         |  6 ++++++
 .../DataListToolbar/DataListToolbar.test.jsx    | 17 +++++++++++++++++
 .../src/components/ListHeader/ListHeader.jsx    |  1 +
 3 files changed, 24 insertions(+)

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 {
               </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,
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('<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');
+  });
 });
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 {
         ) : (
           <Fragment>
             {renderToolbar({
+              itemCount,
               searchColumns,
               sortColumns,
               onSearch: this.handleSearch,

From 8e4edca85d21b1a81daff1f6886cc81d268f6d6e Mon Sep 17 00:00:00 2001
From: Vadiem Janssens <info@vadiemjanssens.nl>
Date: Thu, 16 Jul 2020 09:23:28 +0200
Subject: [PATCH 2/3] Replace itemCount with DataListToolbar pagination

---
 .../DataListToolbar/DataListToolbar.jsx       |  9 ++++---
 .../src/components/ListHeader/ListHeader.jsx  |  5 +++-
 .../PaginatedDataList/PaginatedDataList.jsx   | 26 ++++++++++++++++++-
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index 2792c32985..c38823a81a 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/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>
     );
diff --git a/awx/ui_next/src/components/ListHeader/ListHeader.jsx b/awx/ui_next/src/components/ListHeader/ListHeader.jsx
index ccd0c0b0fc..255120f74c 100644
--- a/awx/ui_next/src/components/ListHeader/ListHeader.jsx
+++ b/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);
diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
index e69775fd6f..da2e485134 100644
--- a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
+++ b/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

From 36316ae9a577025c2b5f1eca4001a61fe8a46126 Mon Sep 17 00:00:00 2001
From: Vadiem Janssens <info@vadiemjanssens.nl>
Date: Sun, 26 Jul 2020 20:54:49 +0200
Subject: [PATCH 3/3] Fix tests

Signed-off-by: Vadiem Janssens <info@vadiemjanssens.nl>
---
 .../DataListToolbar/DataListToolbar.jsx         | 10 ++++------
 .../DataListToolbar/DataListToolbar.test.jsx    | 17 -----------------
 .../src/components/ListHeader/ListHeader.jsx    |  7 +++----
 .../PaginatedDataList/PaginatedDataList.jsx     |  7 +++----
 .../PaginatedDataList.test.jsx                  |  4 ++--
 5 files changed, 12 insertions(+), 33 deletions(-)

diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index c38823a81a..cc4b44dc72 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@@ -37,7 +37,7 @@ class DataListToolbar extends React.Component {
       additionalControls,
       i18n,
       qsConfig,
-      pagination
+      pagination,
     } = this.props;
 
     const showExpandCollapse = onCompact && onExpand;
@@ -92,11 +92,9 @@ class DataListToolbar extends React.Component {
               <ToolbarItem key={control.key}>{control}</ToolbarItem>
             ))}
           </ToolbarGroup>
-          {(pagination && itemCount > 0) &&
-            <ToolbarItem variant="pagination">
-              {pagination}
-            </ToolbarItem>
-          }
+          {pagination && itemCount > 0 && (
+            <ToolbarItem variant="pagination">{pagination}</ToolbarItem>
+          )}
         </ToolbarContent>
       </Toolbar>
     );
diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
index 34ad41e63c..b8b83ee6e2 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
@@ -285,21 +285,4 @@ 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');
-  });
 });
diff --git a/awx/ui_next/src/components/ListHeader/ListHeader.jsx b/awx/ui_next/src/components/ListHeader/ListHeader.jsx
index 255120f74c..305c741a47 100644
--- a/awx/ui_next/src/components/ListHeader/ListHeader.jsx
+++ b/awx/ui_next/src/components/ListHeader/ListHeader.jsx
@@ -98,7 +98,7 @@ class ListHeader extends React.Component {
       renderToolbar,
       qsConfig,
       location,
-      pagination
+      pagination,
     } = this.props;
     const params = parseQueryString(qsConfig, location.search);
     const isEmpty = itemCount === 0 && Object.keys(params).length === 0;
@@ -128,7 +128,7 @@ class ListHeader extends React.Component {
               onRemove: this.handleRemove,
               clearAllFilters: this.handleRemoveAll,
               qsConfig,
-              pagination
+              pagination,
             })}
           </Fragment>
         )}
@@ -143,11 +143,10 @@ 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);
diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
index da2e485134..d25ad79e6b 100644
--- a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
@@ -121,7 +121,7 @@ class PaginatedDataList extends React.Component {
       );
     }
 
-    let ToolbarPagination = (
+    const ToolbarPagination = (
       <Pagination
         isCompact
         dropDirection="down"
@@ -141,7 +141,7 @@ class PaginatedDataList extends React.Component {
         onSetPage={this.handleSetPage}
         onPerPageSelect={this.handleSetPageSize}
       />
-    )
+    );
 
     return (
       <Fragment>
@@ -153,8 +153,7 @@ class PaginatedDataList extends React.Component {
           sortColumns={sortColumns}
           qsConfig={qsConfig}
           pagination={ToolbarPagination}
-        >
-        </ListHeader>
+        />
         {Content}
         {items.length ? (
           <Pagination
diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.test.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.test.jsx
index b3a60aa2da..fe4b85b0b0 100644
--- a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.test.jsx
+++ b/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();