diff --git a/libs/datagrid/src/index.ts b/libs/datagrid/src/index.ts index 22fd937be..39d35a6d1 100644 --- a/libs/datagrid/src/index.ts +++ b/libs/datagrid/src/index.ts @@ -23,3 +23,4 @@ export * from './lib/type-helpers'; export * from './lib/cells/grid-progress-bar'; export * from './lib/use-datagrid-events'; +export * from './lib/pagination'; diff --git a/libs/datagrid/src/lib/pagination.spec.tsx b/libs/datagrid/src/lib/pagination.spec.tsx new file mode 100644 index 000000000..9d7049696 --- /dev/null +++ b/libs/datagrid/src/lib/pagination.spec.tsx @@ -0,0 +1,51 @@ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { Pagination } from './pagination'; + +describe('Pagination', () => { + const props = { + pageInfo: { + hasNextPage: true, + }, + count: 0, + onLoad: () => undefined, + showRetentionMessage: false, + hasDisplayedRows: false, + }; + + it('renders message for 0 rows', async () => { + const mockOnLoad = jest.fn(); + render(); + expect(screen.getByText('0 rows loaded')).toBeInTheDocument(); + await userEvent.click(screen.getByRole('button', { name: 'Load more' })); + expect(mockOnLoad).toHaveBeenCalled(); + }); + + it('renders mesasge for multiple rows', async () => { + const mockOnLoad = jest.fn(); + const count = 10; + render(); + expect(screen.getByText(`${count} rows loaded`)).toBeInTheDocument(); + await userEvent.click(screen.getByRole('button', { name: 'Load more' })); + expect(mockOnLoad).toHaveBeenCalled(); + }); + + it('renders message for a single row', async () => { + const mockOnLoad = jest.fn(); + const count = 1; + render(); + expect(screen.getByText(`${count} row loaded`)).toBeInTheDocument(); + await userEvent.click(screen.getByRole('button', { name: 'Load more' })); + expect(mockOnLoad).toHaveBeenCalled(); + }); + + it('renders the data rentention message', () => { + render(); + expect(screen.getByText(/data node retention/)).toBeInTheDocument(); + }); + + it('renders the row filter message', () => { + render(); + expect(screen.getByText(/No rows matching/)).toBeInTheDocument(); + }); +}); diff --git a/libs/datagrid/src/lib/pagination.tsx b/libs/datagrid/src/lib/pagination.tsx new file mode 100644 index 000000000..412f6d0e6 --- /dev/null +++ b/libs/datagrid/src/lib/pagination.tsx @@ -0,0 +1,53 @@ +import { TradingButton as Button } from '@vegaprotocol/ui-toolkit'; +import { t } from '@vegaprotocol/i18n'; + +export const Pagination = ({ + count, + pageInfo, + onLoad, + hasDisplayedRows, + showRetentionMessage, +}: { + count: number; + pageInfo: { hasNextPage?: boolean } | null; + onLoad: () => void; + hasDisplayedRows: boolean; + showRetentionMessage: boolean; +}) => { + let rowMessage = ''; + + if (count && !pageInfo?.hasNextPage) { + rowMessage = t('all %s rows loaded', count.toString()); + } else { + if (count === 1) { + rowMessage = t('%s row loaded', count.toString()); + } else { + rowMessage = t('%s rows loaded', count.toString()); + } + } + + return ( +
+
+ {false} + {showRetentionMessage && + t( + 'Depending on data node retention you may not be able see the "full" history' + )} +
+
+ {rowMessage} + {pageInfo?.hasNextPage ? ( + + ) : null} +
+ {count && hasDisplayedRows === false ? ( +
+ {t('No rows matching selected filters')} +
+ ) : null} +
+ ); +}; diff --git a/libs/fills/src/lib/fills-manager.tsx b/libs/fills/src/lib/fills-manager.tsx index cae669fe0..a2ed220fc 100644 --- a/libs/fills/src/lib/fills-manager.tsx +++ b/libs/fills/src/lib/fills-manager.tsx @@ -3,10 +3,10 @@ import { useCallback, useRef, useState } from 'react'; import { t } from '@vegaprotocol/i18n'; import { FillsTable } from './fills-table'; import type { useDataGridEvents } from '@vegaprotocol/datagrid'; +import { Pagination } from '@vegaprotocol/datagrid'; import { useDataProvider } from '@vegaprotocol/data-provider'; import type * as Schema from '@vegaprotocol/types'; import { fillsWithMarketProvider } from './fills-data-provider'; -import { TradingButton as Button } from '@vegaprotocol/ui-toolkit'; interface FillsManagerProps { partyId: string; @@ -52,31 +52,13 @@ export const FillsManager = ({ overlayNoRowsTemplate={error ? error.message : t('No fills')} {...props} /> - -
-
- {t( - 'Depending on data node retention you may not be able see the "full" history' - )} -
-
- {data?.length && !pageInfo?.hasNextPage - ? t('all %s items loaded', [data.length.toString()]) - : t('%s items loaded', [ - data?.length ? data.length.toString() : ' ', - ])} - {pageInfo?.hasNextPage ? ( - - ) : null} -
- {data?.length && hasDisplayedRow === false ? ( -
- {t('No fills matching selected filters')} -
- ) : null} -
+ ); }; diff --git a/libs/funding-payments/src/lib/funding-payments-manager.tsx b/libs/funding-payments/src/lib/funding-payments-manager.tsx index a4bf7d2fd..c8f890a09 100644 --- a/libs/funding-payments/src/lib/funding-payments-manager.tsx +++ b/libs/funding-payments/src/lib/funding-payments-manager.tsx @@ -2,10 +2,10 @@ import type { AgGridReact } from 'ag-grid-react'; import { useCallback, useRef, useState } from 'react'; import { t } from '@vegaprotocol/i18n'; import { FundingPaymentsTable } from './funding-payments-table'; +import { Pagination } from '@vegaprotocol/datagrid'; import type { useDataGridEvents } from '@vegaprotocol/datagrid'; import { useDataProvider } from '@vegaprotocol/data-provider'; import { fundingPaymentsWithMarketProvider } from './funding-payments-data-provider'; -import { TradingButton as Button } from '@vegaprotocol/ui-toolkit'; interface FundingPaymentsManagerProps { partyId: string; @@ -57,30 +57,13 @@ export const FundingPaymentsManager = ({ overlayNoRowsTemplate={error ? error.message : t('No funding payments')} {...props} /> -
-
- {t( - 'Depending on data node retention you may not be able see the "full" history' - )} -
-
- {data?.length && !pageInfo?.hasNextPage - ? t('all %s items loaded', [data.length.toString()]) - : t('%s items loaded', [ - data?.length ? data.length.toString() : ' ', - ])} - {pageInfo?.hasNextPage ? ( - - ) : null} -
- {data?.length && hasDisplayedRow === false ? ( -
- {t('No funding payments matching selected filters')} -
- ) : null} -
+ ); }; diff --git a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx index c74e4a659..acd6267dc 100644 --- a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx +++ b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx @@ -3,6 +3,7 @@ import { useCallback, useRef, useState, useEffect } from 'react'; import type { AgGridReact } from 'ag-grid-react'; import { OrderListTable } from '../order-list'; import type { useDataGridEvents } from '@vegaprotocol/datagrid'; +import { Pagination } from '@vegaprotocol/datagrid'; import { useDataProvider } from '@vegaprotocol/data-provider'; import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider'; import { normalizeOrderAmendment } from '@vegaprotocol/wallet'; @@ -11,7 +12,7 @@ import type { OrderTxUpdateFieldsFragment } from '@vegaprotocol/web3'; import { OrderEditDialog } from '../order-list/order-edit-dialog'; import type { Order } from '../order-data-provider'; import { OrderViewDialog } from '../order-list/order-view-dialog'; -import { Splash, TradingButton as Button } from '@vegaprotocol/ui-toolkit'; +import { Splash } from '@vegaprotocol/ui-toolkit'; export enum Filter { 'Open' = 'Open', @@ -90,61 +91,34 @@ export const OrderListManager = ({ return ( <> -
-
- { - onRowDataUpdated(event); - if (onFilterChanged) { - onFilterChanged(event); - } - }} - onRowDataUpdated={onRowDataUpdated} - isReadOnly={isReadOnly} - overlayNoRowsTemplate={noRowsMessage || t('No orders')} - {...props} - /> -
-
- {variables.filter?.liveOnly - ? null - : t( - 'Depending on data node retention you may not be able see the "full" history' - )} -
- {data ? ( -
- {data?.length && !pageInfo?.hasNextPage - ? t('all %s items loaded', [data.length.toString()]) - : t('%s items loaded', [ - data?.length ? data.length.toString() : ' ', - ])} - {pageInfo?.hasNextPage ? ( - - ) : null} -
- ) : null} - {data?.length && hasDisplayedRow === false ? ( -
- {t('No orders matching selected filters')} -
- ) : null} -
-
+
+ { + onRowDataUpdated(event); + if (onFilterChanged) { + onFilterChanged(event); + } + }} + onRowDataUpdated={onRowDataUpdated} + isReadOnly={isReadOnly} + overlayNoRowsTemplate={noRowsMessage || t('No orders')} + {...props} + /> +
{editOrder && ( -
-
- {t( - 'Depending on data node retention you may not be able see the "full" history' - )} -
-
- {data?.length && !pageInfo?.hasNextPage - ? t('all %s items loaded', [data.length.toString()]) - : t('%s items loaded', [ - data?.length ? data.length.toString() : ' ', - ])} - {pageInfo?.hasNextPage ? ( - - ) : null} -
- {data?.length && hasDisplayedRow === false ? ( -
- {t('No trades matching selected filters')} -
- ) : null} -
+
); };