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}
-
+
);
};