From cedf75bbf077e4135405cac648bbf7a41322fc6a Mon Sep 17 00:00:00 2001 From: geido Date: Mon, 14 Nov 2022 16:09:19 +0200 Subject: [PATCH] Add scrollTopOnPagination --- .../dashboard/drilltodetail.test.ts | 17 +++++++ .../Chart/DrillDetail/DrillDetailPane.tsx | 1 + .../TableView/TableView.stories.tsx | 1 + .../src/components/TableView/TableView.tsx | 48 +++++++++++-------- 4 files changed, 48 insertions(+), 19 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts index f89435f1bc152..926c4d3997d87 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/drilltodetail.test.ts @@ -196,6 +196,23 @@ describe('Drill to detail modal', () => { .then($rows => { expect($rows).to.contain('Victoria'); }); + + // verify scroll top on pagination + cy.getBySelLike('Number-modal') + .find('.table-condensed') + .scrollTo(0, 100); + + cy.get("[role='rowgroup'] [role='row']") + .contains('Miguel') + .should('not.be.visible'); + + cy.get(".pagination-container [role='navigation'] [role='button']") + .eq(1) + .click(); + + cy.get("[role='rowgroup'] [role='row']") + .contains('Aaron') + .should('be.visible'); }); }); diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx index 30ea2293a1cd5..e90b30e1d7a7f 100644 --- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx +++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx @@ -243,6 +243,7 @@ export default function DrillDetailPane({ margin-bottom: 0; } `} + scrollTopOnPagination /> ); } diff --git a/superset-frontend/src/components/TableView/TableView.stories.tsx b/superset-frontend/src/components/TableView/TableView.stories.tsx index 9d28ca38b44d2..ff2079431a393 100644 --- a/superset-frontend/src/components/TableView/TableView.stories.tsx +++ b/superset-frontend/src/components/TableView/TableView.stories.tsx @@ -77,6 +77,7 @@ InteractiveTableView.args = { showRowCount: true, withPagination: true, columnsForWrapText: ['Summary'], + scrollTopOnPagination: false, }; InteractiveTableView.argTypes = { diff --git a/superset-frontend/src/components/TableView/TableView.tsx b/superset-frontend/src/components/TableView/TableView.tsx index 25a403ff9e60f..5bf393363669b 100644 --- a/superset-frontend/src/components/TableView/TableView.tsx +++ b/superset-frontend/src/components/TableView/TableView.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef } from 'react'; import isEqual from 'lodash/isEqual'; import { styled, t } from '@superset-ui/core'; import { useFilters, usePagination, useSortBy, useTable } from 'react-table'; @@ -49,6 +49,7 @@ export interface TableViewProps { isPaginationSticky?: boolean; showRowCount?: boolean; scrollTable?: boolean; + scrollTopOnPagination?: boolean; small?: boolean; columnsForWrapText?: string[]; } @@ -130,6 +131,7 @@ const TableView = ({ serverPagination = false, columnsForWrapText, onServerPagination = () => {}, + scrollTopOnPagination = false, ...props }: TableViewProps) => { const initialState = { @@ -161,22 +163,6 @@ const TableView = ({ useSortBy, usePagination, ); - useEffect(() => { - if (serverPagination && pageIndex !== initialState.pageIndex) { - onServerPagination({ - pageIndex, - }); - } - }, [pageIndex]); - - useEffect(() => { - if (serverPagination && !isEqual(sortBy, initialState.sortBy)) { - onServerPagination({ - pageIndex: 0, - sortBy, - }); - } - }, [sortBy]); const content = withPagination ? page : rows; @@ -194,10 +180,34 @@ const TableView = ({ const isEmpty = !loading && content.length === 0; const hasPagination = pageCount > 1 && withPagination; + const tableRef = useRef(null); + const handleGotoPage = (p: number) => { + if (scrollTopOnPagination) { + tableRef?.current?.scroll(0, 0); + } + gotoPage(p); + }; + + useEffect(() => { + if (serverPagination && pageIndex !== initialState.pageIndex) { + onServerPagination({ + pageIndex, + }); + } + }, [pageIndex]); + + useEffect(() => { + if (serverPagination && !isEqual(sortBy, initialState.sortBy)) { + onServerPagination({ + pageIndex: 0, + sortBy, + }); + } + }, [sortBy]); return ( <> - + gotoPage(p - 1)} + onChange={(p: number) => handleGotoPage(p - 1)} hideFirstAndLastPageLinks /> {showRowCount && (