From 93091ba43406abfd6d316d4e64fdb1c10227e435 Mon Sep 17 00:00:00 2001 From: Ewa Kowalska <30404388+ekowalsk@users.noreply.github.com> Date: Wed, 22 Sep 2021 15:52:14 +0200 Subject: [PATCH] Fix colouring issue when filtering (#6166) * WIP - fix coloring * Fix row coloring * Remove unnecessary test * Apply review suggestions * Update yarn lock file * Apply review suggestion * Restore row coloring in Extensions.tsx * Remove unused field index in class Row Co-authored-by: MiZiet --- package.json | 2 +- .../page-accounts/src/Accounts/Account.tsx | 7 ++-- .../page-accounts/src/Accounts/index.spec.ts | 36 ++++++++----------- packages/page-accounts/src/Accounts/index.tsx | 9 ++--- .../page-accounts/test/pages/accountsPage.tsx | 2 +- .../page-addresses/src/Contacts/Address.tsx | 7 ++-- .../page-addresses/src/Contacts/index.spec.ts | 7 ---- .../page-addresses/src/Contacts/index.tsx | 4 +-- packages/page-bounties/src/Bounties.tsx | 4 +-- packages/page-bounties/src/Bounty.tsx | 7 ++-- .../page-parachains/src/Crowdloan/Fund.tsx | 5 ++- .../page-parachains/src/Crowdloan/Funds.tsx | 6 ++-- .../page-settings/src/Metadata/Extensions.tsx | 2 +- packages/react-components/src/Table/index.tsx | 23 ++++++++---- .../test-support/src/pagesElements/Row.ts | 15 +------- .../test-support/src/pagesElements/Table.ts | 15 +------- yarn.lock | 12 +++---- 17 files changed, 61 insertions(+), 102 deletions(-) diff --git a/package.json b/package.json index a80f642303..665eeb451f 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "@polkadot/util-crypto": "^7.4.1", "@polkadot/wasm-crypto": "^4.2.1", "babel-core": "^7.0.0-bridge.0", - "styled-components": "^5.2.0", + "styled-components": "^5.3.1", "typescript": "^4.4.3" }, "scripts": { diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx index 89267e832d..60be75a269 100644 --- a/packages/page-accounts/src/Accounts/Account.tsx +++ b/packages/page-accounts/src/Accounts/Account.tsx @@ -47,7 +47,6 @@ interface Props { proxy?: [ProxyDefinition[], BN]; setBalance: (address: string, value: AccountBalance) => void; toggleFavorite: (address: string) => void; - isEven: boolean; } interface DemocracyUnlockable { @@ -100,7 +99,7 @@ const transformRecovery = { transform: (opt: Option) => opt.unwrapOr(null) }; -function Account ({ account: { address, meta }, className = '', delegation, filter, isEven, isFavorite, proxy, setBalance, toggleFavorite }: Props): React.ReactElement | null { +function Account ({ account: { address, meta }, className = '', delegation, filter, isFavorite, proxy, setBalance, toggleFavorite }: Props): React.ReactElement | null { const { t } = useTranslation(); const [isExpanded, toggleIsExpanded] = useToggle(false); const { theme } = useContext(ThemeContext); @@ -402,7 +401,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt return ( <> - + - +
{ await rows[0].assertTags('my tagSuper Tag'); }); - it('account details rows keep colouring from their primary rows', async () => { - accountsPage.renderDefaultAccounts(3); - const accountsTable = await accountsPage.getTable(); - - await accountsTable.assertColoring(); - }); - it('account details rows toggled on icon toggle click', async () => { accountsPage.renderDefaultAccounts(1); const row = (await accountsPage.getAccountRows())[0]; @@ -286,7 +279,7 @@ describe('Accounts page', () => { const accountsTable = await accountsPage.getTable(); - await accountsTable.assertRowsOrderAndColoring([3, 1, 2]); + await accountsTable.assertRowsOrder([3, 1, 2]); }); describe('when sorting is used', () => { @@ -316,52 +309,51 @@ describe('Accounts page', () => { it('sorts by parent if asked', async () => { await accountsPage.sortBy('parent'); - await accountsTable.assertRowsOrderAndColoring([3, 1, 2]); + await accountsTable.assertRowsOrder([3, 1, 2]); }); it('sorts by name if asked', async () => { await accountsPage.sortBy('name'); - await accountsTable.assertRowsOrderAndColoring([3, 2, 1]); + await accountsTable.assertRowsOrder([3, 2, 1]); }); it('sorts by date if asked', async () => { await accountsPage.sortBy('date'); - await accountsTable.assertRowsOrderAndColoring([3, 1, 2]); + await accountsTable.assertRowsOrder([3, 1, 2]); }); it('sorts by balances if asked', async () => { await accountsPage.sortBy('balances'); - await accountsTable.assertRowsOrderAndColoring([1, 2, 3]); + await accountsTable.assertRowsOrder([1, 2, 3]); }); it('sorts by type if asked', async () => { await accountsPage.sortBy('type'); - await accountsTable.assertRowsOrderAndColoring([3, 1, 2]); + await accountsTable.assertRowsOrder([3, 1, 2]); }); it('implements stable sort', async () => { // Notice that sorting by 'type' results in different order // depending on the previous state. await accountsPage.sortBy('name'); - await accountsTable.assertRowsOrderAndColoring([3, 2, 1]); + await accountsTable.assertRowsOrder([3, 2, 1]); await accountsPage.sortBy('type'); - await accountsTable.assertRowsOrderAndColoring([3, 1, 2]); + await accountsTable.assertRowsOrder([3, 1, 2]); await accountsPage.sortBy('balances'); - await accountsTable.assertRowsOrderAndColoring([1, 2, 3]); + await accountsTable.assertRowsOrder([1, 2, 3]); await accountsPage.sortBy('type'); - await accountsTable.assertRowsOrderAndColoring([1, 3, 2]); - await accountsTable.assertColoring(); + await accountsTable.assertRowsOrder([1, 3, 2]); }); it('respects reverse button', async () => { await accountsPage.sortBy('name'); - await accountsTable.assertRowsOrderAndColoring([3, 2, 1]); + await accountsTable.assertRowsOrder([3, 2, 1]); await accountsPage.sortBy('balances'); - await accountsTable.assertRowsOrderAndColoring([1, 2, 3]); + await accountsTable.assertRowsOrder([1, 2, 3]); await accountsPage.reverseSortingOrder(); - await accountsTable.assertRowsOrderAndColoring([3, 2, 1]); + await accountsTable.assertRowsOrder([3, 2, 1]); await accountsPage.sortBy('name'); - await accountsTable.assertRowsOrderAndColoring([1, 2, 3]); + await accountsTable.assertRowsOrder([1, 2, 3]); }); }); }); diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx index ae4f70456b..50149c97ae 100644 --- a/packages/page-accounts/src/Accounts/index.tsx +++ b/packages/page-accounts/src/Accounts/index.tsx @@ -6,7 +6,7 @@ import type { ActionStatus } from '@polkadot/react-components/Status/types'; import type { AccountId, ProxyDefinition, ProxyType, Voting } from '@polkadot/types/interfaces'; import type { AccountBalance, Delegation, SortedAccount } from '../types'; -import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import styled from 'styled-components'; import { Button, FilterInput, SortDropdown, SummaryBox, Table } from '@polkadot/react-components'; @@ -279,13 +279,10 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen ("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")} header={header.current} + withCollapsibleRows > {!isLoading && - sortedAccounts.map(({ address }, index) => { - const account = accountComponents[address]; - - return account && React.cloneElement(account as ReactElement, { isEven: !!(index % 2) }); - }) + sortedAccounts.map(({ address }) => accountComponents[address]) }
diff --git a/packages/page-accounts/test/pages/accountsPage.tsx b/packages/page-accounts/test/pages/accountsPage.tsx index 61559c1357..ad5a9936ba 100644 --- a/packages/page-accounts/test/pages/accountsPage.tsx +++ b/packages/page-accounts/test/pages/accountsPage.tsx @@ -21,7 +21,7 @@ export class AccountsPage extends Page { const table = await this.getTable(); const rows = await table.getRows(); - return rows.map((row) => new AccountRow(row.primaryRow, row.detailsRow, row.rowIndex)); + return rows.map((row) => new AccountRow(row.primaryRow, row.detailsRow)); } async reverseSortingOrder (): Promise { diff --git a/packages/page-addresses/src/Contacts/Address.tsx b/packages/page-addresses/src/Contacts/Address.tsx index 590c8f1d0e..841b0a5605 100644 --- a/packages/page-addresses/src/Contacts/Address.tsx +++ b/packages/page-addresses/src/Contacts/Address.tsx @@ -21,14 +21,13 @@ interface Props { address: string; className?: string; filter: string; - isEven: boolean; isFavorite: boolean; toggleFavorite: (address: string) => void; } const isEditable = true; -function Address ({ address, className = '', filter, isEven, isFavorite, toggleFavorite }: Props): React.ReactElement | null { +function Address ({ address, className = '', filter, isFavorite, toggleFavorite }: Props): React.ReactElement | null { const { t } = useTranslation(); const { theme } = useContext(ThemeContext); const api = useApi(); @@ -165,7 +164,7 @@ function Address ({ address, className = '', filter, isEven, isFavorite, toggleF return ( <> - + - +
{ await rows[0].assertTags('Super Tagmy tag'); }); - it('details rows keep colouring from their primary rows', async () => { - addressesPage.renderDefaultContacts(3); - const addressesTable = await addressesPage.getTable(); - - await addressesTable.assertColoring(); - }); - it('contact details rows toggled on icon toggle click', async () => { addressesPage.renderDefaultContacts(1); const row = (await addressesPage.getAddressesRows())[0]; diff --git a/packages/page-addresses/src/Contacts/index.tsx b/packages/page-addresses/src/Contacts/index.tsx index eb7b1231aa..beb59aec37 100644 --- a/packages/page-addresses/src/Contacts/index.tsx +++ b/packages/page-addresses/src/Contacts/index.tsx @@ -75,12 +75,12 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen ('no addresses saved yet, add any existing address')} header={headerRef.current} + withCollapsibleRows > - {!isLoading && sortedAddresses?.map(({ address, isFavorite }, index): React.ReactNode => ( + {!isLoading && sortedAddresses?.map(({ address, isFavorite }): React.ReactNode => (
('No open bounties')} header={headerRef.current} + withCollapsibleRows > {bounties && bestNumber && bounties .sort((a, b) => b.index.cmp(a.index)) - .map(({ bounty, description, index, proposals }, count) => ( + .map(({ bounty, description, index, proposals }) => ( diff --git a/packages/page-bounties/src/Bounty.tsx b/packages/page-bounties/src/Bounty.tsx index 5856e6ac0d..bf997a20f1 100644 --- a/packages/page-bounties/src/Bounty.tsx +++ b/packages/page-bounties/src/Bounty.tsx @@ -29,13 +29,12 @@ interface Props { className?: string; description: string; index: BountyIndex; - isEven: boolean; proposals?: DeriveCollectiveProposal[]; } const EMPTY_CELL = '-'; -function Bounty ({ bestNumber, bounty, className = '', description, index, isEven, proposals }: Props): React.ReactElement { +function Bounty ({ bestNumber, bounty, className = '', description, index, proposals }: Props): React.ReactElement { const { t } = useTranslation(); const [isExpanded, setIsExpanded] = useState(false); @@ -64,7 +63,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, isEve return ( <> -
+ - + + - +

{formatNumber(index)}
{t('Proposer')}
diff --git a/packages/page-parachains/src/Crowdloan/Fund.tsx b/packages/page-parachains/src/Crowdloan/Fund.tsx index d4101a24e9..7a25ee555c 100644 --- a/packages/page-parachains/src/Crowdloan/Fund.tsx +++ b/packages/page-parachains/src/Crowdloan/Fund.tsx @@ -20,7 +20,6 @@ interface Props { bestHash?: string; bestNumber?: BN; className?: string; - isOdd?: boolean; isOngoing?: boolean; leasePeriod?: LeasePeriod; value: Campaign; @@ -31,7 +30,7 @@ interface LastChange { prevLength: number; } -function Fund ({ bestHash, bestNumber, className, isOdd, isOngoing, leasePeriod, value: { info: { cap, depositor, end, firstPeriod, lastPeriod, raised, verifier }, isCapped, isEnded, isWinner, paraId } }: Props): React.ReactElement { +function Fund ({ bestHash, bestNumber, className = '', isOngoing, leasePeriod, value: { info: { cap, depositor, end, firstPeriod, lastPeriod, raised, verifier }, isCapped, isEnded, isWinner, paraId } }: Props): React.ReactElement { const { t } = useTranslation(); const { api } = useApi(); const { isAccount } = useAccounts(); @@ -79,7 +78,7 @@ function Fund ({ bestHash, bestNumber, className, isOdd, isOngoing, leasePeriod, }, [contributorsHex, blockHash]); return ( -

{formatNumber(paraId)}

 diff --git a/packages/page-parachains/src/Crowdloan/Funds.tsx b/packages/page-parachains/src/Crowdloan/Funds.tsx index 527c0dead5..032602d001 100644 --- a/packages/page-parachains/src/Crowdloan/Funds.tsx +++ b/packages/page-parachains/src/Crowdloan/Funds.tsx @@ -94,11 +94,10 @@ function Funds ({ bestNumber, className, leasePeriod, value }: Props): React.Rea empty={value && activeSorted && t('No active campaigns found')} header={headerActiveRef.current} > - {activeSorted?.map((fund, index) => ( + {activeSorted?.map((fund) => ( ('No completed campaigns found')} header={headedEndedRef.current} > - {endedSorted?.map((fund, index) => ( + {endedSorted?.map((fund) => (