feat: add pagination to change dataset modal

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

@@ -44,6 +44,10 @@ export interface TableViewProps {
   isPaginationSticky?: boolean;
   showRowCount?: boolean;
   scrollTable?: boolean;
+  customGotoPage?: (p: any) => void;
+  customPageCount?: number;
+  customPageIndex?: number;
+  resourceCount?: number;
 }
 
 const EmptyWrapper = styled.div`
@@ -99,6 +103,10 @@ const TableView = ({
   emptyWrapperType = EmptyWrapperType.Default,
   noDataText,
   showRowCount = true,
+  customGotoPage,
+  customPageCount,
+  customPageIndex,
+  resourceCount,
   ...props
 }: TableViewProps) => {
   const initialState = {
@@ -107,16 +115,16 @@ const TableView = ({
     sortBy: initialSortBy,
   };
 
-  const {
+  /* const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     page,
     rows,
     prepareRow,
-    pageCount,
+    pageCount: tablePageCount,
     gotoPage,
-    state: { pageIndex, pageSize },
+    state: { pageIndex: tablePageIndex, pageSize },
   } = useTable(
     {
       columns,
@@ -126,7 +134,31 @@ const TableView = ({
     useFilters,
     useSortBy,
     usePagination,
+  ); */
+  const states = useTable(
+    {
+      columns,
+      data,
+      initialState,
+    },
+    useFilters,
+    useSortBy,
+    usePagination,
   );
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    page,
+    rows,
+    prepareRow,
+    pageCount: tablePageCount,
+    gotoPage,
+    state: { pageIndex: tablePageIndex, pageSize },
+  } = states;
+  console.log(states);
+  const pageCount = customPageCount || tablePageCount;
+  const pageIndex = customPageIndex || tablePageIndex;
 
   const content = withPagination ? page : rows;
 
@@ -143,7 +175,6 @@ const TableView = ({
   }
 
   const isEmpty = !loading && content.length === 0;
-
   return (
     <TableViewStyles {...props}>
       <TableCollection
@@ -172,7 +203,13 @@ const TableView = ({
           <Pagination
             totalPages={pageCount || 0}
             currentPage={pageCount ? pageIndex + 1 : 0}
-            onChange={(p: number) => gotoPage(p - 1)}
+            onChange={(p: number) => {
+              if (customGotoPage) {
+                customGotoPage(p);
+              } else {
+                gotoPage(p - 1);
+              }
+            }}
             hideFirstAndLastPageLinks
           />
           {showRowCount && (
@@ -182,7 +219,7 @@ const TableView = ({
                   '%s-%s of %s',
                   pageSize * pageIndex + (page.length && 1),
                   pageSize * pageIndex + page.length,
-                  data.length,
+                  resourceCount || data.length,
                 )}
             </div>
           )}

superset-frontend/src/datasource/ChangeDatasourceModal.tsx

@@ -24,7 +24,8 @@ import React, {
   useCallback,
 } from 'react';
 import Alert from 'src/components/Alert';
-import { SupersetClient, t, styled } from '@superset-ui/core';
+import { SupersetClient, t, styled, css, makeApi } from '@superset-ui/core';
+import rison from 'rison';
 import TableView, { EmptyWrapperType } from 'src/components/TableView';
 import StyledModal from 'src/components/Modal';
 import Button from 'src/components/Button';
@@ -108,10 +109,12 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
   const [confirmChange, setConfirmChange] = useState(false);
   const [confirmedDataset, setConfirmedDataset] = useState<Datasource>();
   const searchRef = useRef<AntdInput>(null);
+  const [pageIndex, setPageIndex] = useState(0);
 
   const {
-    state: { loading, resourceCollection },
+    state: { resourceCount, loading, resourceCollection },
     fetchData,
+    setResourceCollection,
   } = useListViewResource<Dataset>('dataset', t('dataset'), addDangerToast);
 
   const selectDatasource = useCallback((datasource: Datasource) => {
@@ -208,6 +211,22 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
     return data;
   };
 
+  const customGotoPage = (p: number) => {
+    const queryParams = rison.encode({
+      order_column: 'changed_on_delta_humanized',
+      order_direction: 'desc',
+      page: p - 1,
+      page_size: 20,
+    });
+
+    makeApi({ method: 'GET', endpoint: '/api/v1/dataset' })(
+      `q=${queryParams}`,
+    ).then(resources => {
+      setPageIndex(p - 1);
+      setResourceCollection(resources.result);
+    });
+  };
+
   return (
     <StyledModal
       show={show}
@@ -217,6 +236,13 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
       width={confirmChange ? '432px' : ''}
       height={confirmChange ? 'auto' : '480px'}
       hideFooter={!confirmChange}
+      css={theme => css`
+        .table-condensed {
+          height: 300px;
+          margin-bottom: ${theme.gridUnit * 4};
+          overflow: auto;
+        }
+      `}
       footer={
         <>
           {confirmChange && (
@@ -264,7 +290,12 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({
                 pageSize={20}
                 className="table-condensed"
                 emptyWrapperType={EmptyWrapperType.Small}
-                scrollTable
+                initialPageIndex={0}
+                customGotoPage={customGotoPage}
+                customPageCount={Math.ceil(resourceCount / 20)}
+                customPageIndex={pageIndex}
+                resourceCount={resourceCount}
+                withPagination
               />
             )}
           </>