From 9d88f86e896b6e58a18e5ca26aa008be01cdcec4 Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Sat, 17 Aug 2024 02:51:53 +0200 Subject: [PATCH 1/2] Fix expanding table rows on non-plaintext cell Co-authored-by: Michal Zielenkiewicz --- .changelog/2040.bugfix.md | 1 + src/types/TypeSafeDataTable.tsx | 40 ++++++++++++++++++++++++++++++++- 2 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 .changelog/2040.bugfix.md diff --git a/.changelog/2040.bugfix.md b/.changelog/2040.bugfix.md new file mode 100644 index 0000000000..242f89281c --- /dev/null +++ b/.changelog/2040.bugfix.md @@ -0,0 +1 @@ +Fix expanding table rows on non-plaintext cell diff --git a/src/types/TypeSafeDataTable.tsx b/src/types/TypeSafeDataTable.tsx index 4c43fe6232..c4def5859c 100644 --- a/src/types/TypeSafeDataTable.tsx +++ b/src/types/TypeSafeDataTable.tsx @@ -1,3 +1,4 @@ +import { ReactNode } from 'react' // eslint-disable-next-line no-restricted-imports import DataTable, { IDataTableColumn, IDataTableProps } from 'react-data-table-component' @@ -10,11 +11,48 @@ export interface ITypeSafeDataTableProps extends Omit, 'ke columns: ITypeSafeDataTableColumn[] } +/** + * Helper component for react-data-table-component custom cells + * + * react-data-table-component handles expandableRows correctly only for text nodes + * or it requires to apply data-tag="allowRowEvents" to the innermost element which is hard to control + * + * To prevent expanding add `onClick={e => e.stopPropagation()}`. + */ +function ExpandableCell(props: { children: ReactNode }) { + return ( +
{ + if (e.currentTarget.parentElement?.getAttribute('data-tag') !== 'allowRowEvents') { + throw new Error('Could not find table cell') + } + e.currentTarget.parentElement!.click() + }} + > + {props.children} +
+ ) +} + /** * Overrides DataTable type to ensure: * - `keyField` on rows is not missing and is valid * - `id` on cols is not missing + * + * Fixes expanding rows when clicking non-plaintext cells. */ export function TypeSafeDataTable(props: ITypeSafeDataTableProps): React.ReactElement { - return + return ( + ({ + ...col, + cell: (row, rowIndex, column, id) => { + return {col.cell!(row, rowIndex, column, id)} + }, + })) as ITypeSafeDataTableColumn[] + } + /> + ) } From 5a9214aa456e6732aa0c62605cb3b8557abadaf7 Mon Sep 17 00:00:00 2001 From: lukaw3d Date: Sat, 17 Aug 2024 02:52:05 +0200 Subject: [PATCH 2/2] Update jest snapshots --- .../ActiveDelegationList.test.tsx.snap | 68 +++--- .../DebondingDelegationList.test.tsx.snap | 46 ++-- .../__snapshots__/index.test.tsx.snap | 204 ++++++++++-------- 3 files changed, 183 insertions(+), 135 deletions(-) diff --git a/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/ActiveDelegationList.test.tsx.snap b/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/ActiveDelegationList.test.tsx.snap index 31d76ac804..9725aefaa4 100644 --- a/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/ActiveDelegationList.test.tsx.snap +++ b/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/ActiveDelegationList.test.tsx.snap @@ -553,25 +553,29 @@ exports[` should match snapshot 1`] = ` data-tag="allowRowEvents" id="cell-icon-test-validator" role="gridcell" - /> + > +
+
- - - +
+ + + +
should match snapshot 1`] = ` id="cell-name-test-validator" role="gridcell" > - test-validator +
+ test-validator +
should match snapshot 1`] = ` id="cell-amount-test-validator" role="gridcell" > - -
- 0.00 -
- +
+ +
+ 0.00 +
- + + + - +
should match snapshot 1`] = ` id="cell-fee-test-validator" role="gridcell" > - 7% +
+ 7% +
diff --git a/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/DebondingDelegationList.test.tsx.snap b/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/DebondingDelegationList.test.tsx.snap index d5553d4194..b9c2e4b30c 100644 --- a/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/DebondingDelegationList.test.tsx.snap +++ b/src/app/pages/StakingPage/Features/DelegationList/__tests__/__snapshots__/DebondingDelegationList.test.tsx.snap @@ -560,14 +560,18 @@ exports[` should match snapshot 1`] = ` data-tag="allowRowEvents" id="cell-icon-test-validator+100" role="gridcell" - /> + > +
+
- test-validator +
+ test-validator +
should match snapshot 1`] = ` id="cell-amount-test-validator+100" role="gridcell" > - -
- 0.00 -
- +
+ +
+ 0.00 +
- + + + - +
should match snapshot 1`] = ` id="cell-debondingTimeEnd-test-validator+100" role="gridcell" > - - in 4 days - +
+ + in 4 days + +
diff --git a/src/app/pages/StakingPage/Features/ValidatorList/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/StakingPage/Features/ValidatorList/__tests__/__snapshots__/index.test.tsx.snap index b35beb98a4..b7b274c4ca 100644 --- a/src/app/pages/StakingPage/Features/ValidatorList/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/app/pages/StakingPage/Features/ValidatorList/__tests__/__snapshots__/index.test.tsx.snap @@ -728,25 +728,29 @@ exports[` list should match snapshot 1`] = ` data-tag="allowRowEvents" id="cell-icon-oasis1qpc4ze5zzq3aa5mu5ttu4ku4ctp5t6x0asemymfz" role="gridcell" - /> + > +
+
- - - +
+ + + +
list should match snapshot 1`] = ` id="cell-name-oasis1qpc4ze5zzq3aa5mu5ttu4ku4ctp5t6x0asemymfz" role="gridcell" > - test-validator1 +
+ test-validator1 +
list should match snapshot 1`] = ` id="cell-escrow-oasis1qpc4ze5zzq3aa5mu5ttu4ku4ctp5t6x0asemymfz" role="gridcell" > - -
- 0 -
- +
+ +
+ 0 +
- ROSE + + ROSE + - +
list should match snapshot 1`] = ` id="cell-fee-oasis1qpc4ze5zzq3aa5mu5ttu4ku4ctp5t6x0asemymfz" role="gridcell" > - 10% +
+ 10% +
list should match snapshot 1`] = ` data-tag="allowRowEvents" id="cell-icon-oasis1qrfe9n26nq3t6vc9hlu9gnupwf4rm6wr0uglh3r7" role="gridcell" - /> + > +
+
- - - +
+ + + +
list should match snapshot 1`] = ` id="cell-name-oasis1qrfe9n26nq3t6vc9hlu9gnupwf4rm6wr0uglh3r7" role="gridcell" > - test-validator3 +
+ test-validator3 +
list should match snapshot 1`] = ` id="cell-escrow-oasis1qrfe9n26nq3t6vc9hlu9gnupwf4rm6wr0uglh3r7" role="gridcell" > - -
- 0 -
- +
+ +
+ 0 +
- ROSE + + ROSE + - +
list should match snapshot 1`] = ` id="cell-fee-oasis1qrfe9n26nq3t6vc9hlu9gnupwf4rm6wr0uglh3r7" role="gridcell" > - 20% +
+ 20% +
list should match snapshot 1`] = ` data-tag="allowRowEvents" id="cell-icon-oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe" role="gridcell" - /> + > +
+
- - - +
+ + + +
list should match snapshot 1`] = ` id="cell-name-oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe" role="gridcell" > - test-validator2 +
+ test-validator2 +
list should match snapshot 1`] = ` id="cell-escrow-oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe" role="gridcell" > - -
- 0 -
- +
+ +
+ 0 +
- ROSE + + ROSE + - +
list should match snapshot 1`] = ` id="cell-fee-oasis1qzyqaxestzlum26e2vdgvkerm6d9qgdp7gh2pxqe" role="gridcell" > - 20% +
+ 20% +