fix(trading): empty items loaded text (#5158)

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';

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(<Pagination {...props} onLoad={mockOnLoad} />);
+    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(<Pagination {...props} count={count} onLoad={mockOnLoad} />);
+    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(<Pagination {...props} count={count} onLoad={mockOnLoad} />);
+    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(<Pagination {...props} showRetentionMessage={true} />);
+    expect(screen.getByText(/data node retention/)).toBeInTheDocument();
+  });
+
+  it('renders the row filter message', () => {
+    render(<Pagination {...props} count={1} hasDisplayedRows={false} />);
+    expect(screen.getByText(/No rows matching/)).toBeInTheDocument();
+  });
+});

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 (
+    <div className="flex items-center justify-between p-1 border-t border-default">
+      <div className="text-xs">
+        {false}
+        {showRetentionMessage &&
+          t(
+            'Depending on data node retention you may not be able see the "full" history'
+          )}
+      </div>
+      <div className="flex items-center text-xs">
+        <span>{rowMessage}</span>
+        {pageInfo?.hasNextPage ? (
+          <Button size="extra-small" className="ml-1" onClick={onLoad}>
+            {t('Load more')}
+          </Button>
+        ) : null}
+      </div>
+      {count && hasDisplayedRows === false ? (
+        <div className="absolute text-xs top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+          {t('No rows matching selected filters')}
+        </div>
+      ) : null}
+    </div>
+  );
+};

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}
       />
-
+      <Pagination
-      <div className="flex justify-between border-t border-default p-1 items-center">
+        count={data?.length || 0}
-        <div className="text-xs">
+        pageInfo={pageInfo}
-          {t(
+        showRetentionMessage={true}
-            'Depending on data node retention you may not be able see the "full" history'
+        onLoad={load}
-          )}
+        hasDisplayedRows={hasDisplayedRow || false}
-        </div>
+      />
-        <div className="flex text-xs items-center">
-          {data?.length && !pageInfo?.hasNextPage
-            ? t('all %s items loaded', [data.length.toString()])
-            : t('%s items loaded', [
-                data?.length ? data.length.toString() : ' ',
-              ])}
-          {pageInfo?.hasNextPage ? (
-            <Button size="extra-small" className="ml-1" onClick={() => load()}>
-              {t('Load more')}
-            </Button>
-          ) : null}
-        </div>
-        {data?.length && hasDisplayedRow === false ? (
-          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs">
-            {t('No fills matching selected filters')}
-          </div>
-        ) : null}
-      </div>
     </div>
   );
 };

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}
       />
-      <div className="flex justify-between border-t border-default p-1 items-center">
+      <Pagination
-        <div className="text-xs">
+        count={data?.length || 0}
-          {t(
+        pageInfo={pageInfo}
-            'Depending on data node retention you may not be able see the "full" history'
+        onLoad={load}
-          )}
+        hasDisplayedRows={hasDisplayedRow || false}
-        </div>
+        showRetentionMessage={true}
-        <div className="flex text-xs items-center">
+      />
-          {data?.length && !pageInfo?.hasNextPage
-            ? t('all %s items loaded', [data.length.toString()])
-            : t('%s items loaded', [
-                data?.length ? data.length.toString() : ' ',
-              ])}
-          {pageInfo?.hasNextPage ? (
-            <Button size="extra-small" className="ml-1" onClick={() => load()}>
-              {t('Load more')}
-            </Button>
-          ) : null}
-        </div>
-        {data?.length && hasDisplayedRow === false ? (
-          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs">
-            {t('No funding payments matching selected filters')}
-          </div>
-        ) : null}
-      </div>
     </div>
   );
 };

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 (
     <>
-      <div className="h-full relative">
+      <div className="relative flex flex-col h-full">
-        <div className="flex flex-col h-full">
+        <OrderListTable
-          <OrderListTable
+          rowData={data}
-            rowData={data}
+          ref={gridRef}
-            ref={gridRef}
+          filter={filter}
-            filter={filter}
+          onCancel={cancel}
-            onCancel={cancel}
+          onEdit={setEditOrder}
-            onEdit={setEditOrder}
+          onView={setViewOrder}
-            onView={setViewOrder}
+          onMarketClick={onMarketClick}
-            onMarketClick={onMarketClick}
+          onOrderTypeClick={onOrderTypeClick}
-            onOrderTypeClick={onOrderTypeClick}
+          onFilterChanged={(event) => {
-            onFilterChanged={(event) => {
+            onRowDataUpdated(event);
-              onRowDataUpdated(event);
+            if (onFilterChanged) {
-              if (onFilterChanged) {
+              onFilterChanged(event);
-                onFilterChanged(event);
+            }
-              }
+          }}
-            }}
+          onRowDataUpdated={onRowDataUpdated}
-            onRowDataUpdated={onRowDataUpdated}
+          isReadOnly={isReadOnly}
-            isReadOnly={isReadOnly}
+          overlayNoRowsTemplate={noRowsMessage || t('No orders')}
-            overlayNoRowsTemplate={noRowsMessage || t('No orders')}
+          {...props}
-            {...props}
+        />
-          />
+        <Pagination
-          <div className="flex justify-between border-t border-default p-1 items-center">
+          count={data?.length || 0}
-            <div className="text-xs">
+          pageInfo={pageInfo}
-              {variables.filter?.liveOnly
+          onLoad={load}
-                ? null
+          hasDisplayedRows={hasDisplayedRow || false}
-                : t(
+          showRetentionMessage={variables.filter?.liveOnly || true}
-                    'Depending on data node retention you may not be able see the "full" history'
+        />
-                  )}
-            </div>
-            {data ? (
-              <div className="flex text-xs items-center">
-                {data?.length && !pageInfo?.hasNextPage
-                  ? t('all %s items loaded', [data.length.toString()])
-                  : t('%s items loaded', [
-                      data?.length ? data.length.toString() : ' ',
-                    ])}
-                {pageInfo?.hasNextPage ? (
-                  <Button
-                    size="extra-small"
-                    className="ml-1"
-                    onClick={() => load()}
-                  >
-                    {t('Load more')}
-                  </Button>
-                ) : null}
-              </div>
-            ) : null}
-            {data?.length && hasDisplayedRow === false ? (
-              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs">
-                {t('No orders matching selected filters')}
-              </div>
-            ) : null}
-          </div>
-        </div>
       </div>
       {editOrder && (
         <OrderEditDialog

libs/trades/src/lib/trades-manager.tsx

@@ -3,10 +3,10 @@ import { tradesWithMarketProvider } from './trades-data-provider';
 import { TradesTable } from './trades-table';
 import { useDealTicketFormValues } from '@vegaprotocol/deal-ticket';
 import { t } from '@vegaprotocol/i18n';
+import { Pagination } from '@vegaprotocol/datagrid';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useCallback, useState } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
-import { TradingButton as Button } from '@vegaprotocol/ui-toolkit';
 
 interface TradesContainerProps {
   marketId: string;
@@ -49,30 +49,13 @@ export const TradesManager = ({
         overlayNoRowsTemplate={error ? error.message : t('No trades')}
         {...props}
       />
-      <div className="flex justify-between border-t border-default p-1 items-center">
+      <Pagination
-        <div className="text-xs">
+        count={data?.length || 0}
-          {t(
+        pageInfo={pageInfo}
-            'Depending on data node retention you may not be able see the "full" history'
+        onLoad={load}
-          )}
+        hasDisplayedRows={hasDisplayedRow || false}
-        </div>
+        showRetentionMessage={true}
-        <div className="flex text-xs items-center">
+      />
-          {data?.length && !pageInfo?.hasNextPage
-            ? t('all %s items loaded', [data.length.toString()])
-            : t('%s items loaded', [
-                data?.length ? data.length.toString() : ' ',
-              ])}
-          {pageInfo?.hasNextPage ? (
-            <Button size="extra-small" className="ml-1" onClick={() => load()}>
-              {t('Load more')}
-            </Button>
-          ) : null}
-        </div>
-        {data?.length && hasDisplayedRow === false ? (
-          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs">
-            {t('No trades matching selected filters')}
-          </div>
-        ) : null}
-      </div>
     </div>
   );
 };