This is an automated email from the ASF dual-hosted git repository. diegopucci pushed a commit to branch fix/d2d-modal-scroll-top in repository https://gitbox.apache.org/repos/asf/superset.git
commit cedf75bbf077e4135405cac648bbf7a41322fc6a Author: geido <[email protected]> AuthorDate: Mon Nov 14 16:09:19 2022 +0200 Add scrollTopOnPagination --- .../integration/dashboard/drilltodetail.test.ts | 17 ++++++++ .../Chart/DrillDetail/DrillDetailPane.tsx | 1 + .../src/components/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 f89435f1bc..926c4d3997 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 30ea2293a1..e90b30e1d7 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 9d28ca38b4..ff2079431a 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 25a403ff9e..5bf3933636 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<HTMLTableElement>(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 ( <> - <TableViewStyles {...props}> + <TableViewStyles {...props} ref={tableRef}> <TableCollection getTableProps={getTableProps} getTableBodyProps={getTableBodyProps} @@ -229,7 +239,7 @@ const TableView = ({ <Pagination totalPages={pageCount || 0} currentPage={pageCount ? pageIndex + 1 : 0} - onChange={(p: number) => gotoPage(p - 1)} + onChange={(p: number) => handleGotoPage(p - 1)} hideFirstAndLastPageLinks /> {showRowCount && (
