fix pagination for list views (#9425)

superset-frontend/package.json

@@ -147,6 +147,7 @@
     "react-syntax-highlighter": "^7.0.4",
     "react-table": "^7.0.0-rc.15",
     "react-transition-group": "^2.5.3",
+    "react-ultimate-pagination": "^1.2.0",
     "react-virtualized": "9.19.1",
     "react-virtualized-select": "^3.1.3",
     "reactable-arc": "0.14.42",
@@ -178,6 +179,7 @@
     "@types/react-redux": "^7.1.7",
     "@types/react-select": "^3.0.10",
     "@types/react-table": "^7.0.2",
+    "@types/react-ultimate-pagination": "^1.2.0",
     "@types/yargs": "12 - 15",
     "@typescript-eslint/eslint-plugin": "^2.20.0",
     "@typescript-eslint/parser": "^2.20.0",

superset-frontend/spec/javascripts/components/ListView/ListView_spec.jsx

@@ -22,6 +22,7 @@ import { act } from 'react-dom/test-utils';
 import { MenuItem, Pagination } from 'react-bootstrap';
 
 import ListView from 'src/components/ListView/ListView';
+import ListViewPagination from 'src/components/ListView/Pagination';
 import { areArraysShallowEqual } from 'src/reduxUtils';
 
 describe('ListView', () => {
@@ -159,10 +160,15 @@ describe('ListView', () => {
                   ]
             `);
   });
-
+  it('renders pagination controls', () => {
+    expect(wrapper.find(Pagination).exists()).toBe(true);
+    expect(wrapper.find(Pagination.Prev).exists()).toBe(true);
+    expect(wrapper.find(Pagination.Item).exists()).toBe(true);
+    expect(wrapper.find(Pagination.Next).exists()).toBe(true);
+  });
   it('calls fetchData on page change', () => {
     act(() => {
-      wrapper.find(Pagination).prop('onSelect')(2);
+      wrapper.find(ListViewPagination).prop('onChange')(2);
     });
     wrapper.update();
 

superset-frontend/spec/javascripts/views/dashboardList/DashboardList_spec.jsx

@@ -94,8 +94,7 @@ describe('DashboardList', () => {
       `"/http//localhost/api/v1/dashboard/?q={%22order_column%22:%22changed_on%22,%22order_direction%22:%22desc%22,%22page%22:0,%22page_size%22:25}"`,
     );
   });
-
-  it('edits', async () => {
+  it('edits', () => {
     expect(wrapper.find(PropertiesModal)).toHaveLength(0);
     wrapper
       .find('.fa-pencil')

superset-frontend/src/components/ListView/ListView.tsx

@@ -24,7 +24,6 @@ import {
   DropdownButton,
   FormControl,
   MenuItem,
-  Pagination,
   Row,
   // @ts-ignore
 } from 'react-bootstrap';
@@ -33,8 +32,8 @@ import SelectComponent from 'react-select';
 // @ts-ignore
 import VirtualizedSelect from 'react-virtualized-select';
 import IndeterminateCheckbox from '../IndeterminateCheckbox';
-import './ListViewStyles.less';
 import TableCollection from './TableCollection';
+import Pagination from './Pagination';
 import {
   FetchDataConfig,
   Filters,
@@ -50,6 +49,8 @@ import {
   useListViewState,
 } from './utils';
 
+import './ListViewStyles.less';
+
 interface Props {
   columns: any[];
   data: any[];
@@ -101,8 +102,6 @@ const ListView: FunctionComponent<Props> = ({
     headerGroups,
     rows,
     prepareRow,
-    canPreviousPage,
-    canNextPage,
     pageCount = 1,
     gotoPage,
     setAllFilters,
@@ -340,16 +339,10 @@ const ListView: FunctionComponent<Props> = ({
           </Col>
           <Col md={8} className="text-center">
             <Pagination
-              prev={canPreviousPage}
-              first={pageIndex > 1}
-              next={canNextPage}
-              last={pageIndex < pageCount - 2}
-              items={pageCount}
-              activePage={pageIndex + 1}
-              ellipsis
-              boundaryLinks
-              maxButtons={5}
-              onSelect={(p: number) => gotoPage(p - 1)}
+              totalPages={pageCount || 0}
+              currentPage={pageCount ? pageIndex + 1 : 0}
+              onChange={(p: number) => gotoPage(p - 1)}
+              hideFirstAndLastPageLinks
             />
           </Col>
           <Col md={2}>

superset-frontend/src/components/ListView/Pagination.tsx

@@ -0,0 +1,53 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+// @ts-ignore
+import { Pagination } from 'react-bootstrap';
+import {
+  createUltimatePagination,
+  ITEM_TYPES,
+} from 'react-ultimate-pagination';
+
+const ListViewPagination = createUltimatePagination({
+  WrapperComponent: Pagination,
+  itemTypeToComponent: {
+    [ITEM_TYPES.PAGE]: ({ value, isActive, onClick }) => (
+      <Pagination.Item active={isActive} onClick={onClick}>
+        {value}
+      </Pagination.Item>
+    ),
+    [ITEM_TYPES.ELLIPSIS]: ({ isActive, onClick }) => (
+      <Pagination.Ellipsis disabled={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.FIRST_PAGE_LINK]: ({ isActive, onClick }) => (
+      <Pagination.First disabled={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.PREVIOUS_PAGE_LINK]: ({ isActive, onClick }) => (
+      <Pagination.Prev disabled={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.NEXT_PAGE_LINK]: ({ isActive, onClick }) => (
+      <Pagination.Next disabled={isActive} onClick={onClick} />
+    ),
+    [ITEM_TYPES.LAST_PAGE_LINK]: ({ isActive, onClick }) => (
+      <Pagination.Last disabled={isActive} onClick={onClick} />
+    ),
+  },
+});
+
+export default ListViewPagination;