chore(2104): make account table ready for change from being empty to full and back (#2302)

* chore: split ag-grid table for make one empty ready for new records

* chore: split ag-grid table for make one empty fix linter issues

* chore: split ag-grid table for make one empty change implnt. Add unit test

* chore: split ag-grid table for make one empty fix failing int test

apps/trading-e2e/src/integration/trading-portfolio.cy.ts

@@ -32,7 +32,9 @@ describe('Portfolio page', { tags: '@smoke' }, () => {
             cy.wrap($header).should('have.text', headers[i]);
           });
       });
-      cy.get('.ag-center-cols-container .ag-row').should(
+      cy.get(
+        '[data-testid="tab-ledger-entries"] .ag-center-cols-container .ag-row'
+      ).should(
         'have.length',
         generateLedgerEntries().ledgerEntries.edges.length
       );

libs/accounts/src/lib/accounts-manager.spec.tsx

@@ -1,12 +1,23 @@
-import { act, render } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
-import { AccountManager } from './accounts-manager';
 import * as helpers from '@vegaprotocol/react-helpers';
+import type { AccountFields } from './accounts-data-provider';
+import { AccountManager } from './accounts-manager';
 
+let mockedUpdate: ({
+  delta,
+  data,
+}: {
+  delta?: never;
+  data: AccountFields[] | null;
+}) => boolean;
 jest.mock('@vegaprotocol/react-helpers', () => ({
   ...jest.requireActual('@vegaprotocol/react-helpers'),
-  useDataProvider: jest.fn(() => ({
+  useDataProvider: jest.fn((args) => {
-    data: [],
+    mockedUpdate = args.update;
-  })),
+    return {
+      data: [],
+    };
+  }),
 }));
 
 describe('AccountManager', () => {
@@ -24,4 +35,22 @@ describe('AccountManager', () => {
       (helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables.partyId
     ).toEqual('partyTwo');
   });
+
+  it('update method should return proper result', async () => {
+    await act(() => {
+      render(<AccountManager partyId="partyOne" onClickAsset={jest.fn} />);
+    });
+    await waitFor(() => {
+      expect(screen.getByText('No accounts')).toBeInTheDocument();
+    });
+    expect(mockedUpdate({ data: [] })).toEqual(true);
+    expect(
+      mockedUpdate({ data: [{ party: { id: 't1' } }] as AccountFields[] })
+    ).toEqual(false);
+    expect(
+      mockedUpdate({ data: [{ party: { id: 't2' } }] as AccountFields[] })
+    ).toEqual(true);
+    expect(mockedUpdate({ data: [] })).toEqual(false);
+    expect(mockedUpdate({ data: [] })).toEqual(true);
+  });
 });

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

@@ -1,4 +1,4 @@
-import { useDataProvider } from '@vegaprotocol/react-helpers';
+import { t, useDataProvider } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
 import { useRef, useMemo, useCallback, memo } from 'react';
@@ -14,55 +14,60 @@ interface AccountManagerProps {
   onClickDeposit?: (assetId?: string) => void;
 }
 
-export const AccountManager = memo(
+export const AccountManager = ({
-  ({
+  onClickAsset,
-    onClickAsset,
+  onClickWithdraw,
-    onClickWithdraw,
+  onClickDeposit,
-    onClickDeposit,
+  partyId,
-    partyId,
+}: AccountManagerProps) => {
-  }: AccountManagerProps) => {
+  const gridRef = useRef<AgGridReact | null>(null);
-    const gridRef = useRef<AgGridReact | null>(null);
+  const dataRef = useRef<AccountFields[] | null>(null);
-    const dataRef = useRef<AccountFields[] | null>(null);
+  const variables = useMemo(() => ({ partyId }), [partyId]);
-    const variables = useMemo(() => ({ partyId }), [partyId]);
+  const update = useCallback(
-    const update = useCallback(
+    ({ data }: { data: AccountFields[] | null }) => {
-      ({ data }: { data: AccountFields[] | null }) => {
+      const isEmpty = !dataRef.current?.length;
-        dataRef.current = data;
+      dataRef.current = data;
-        gridRef.current?.api?.refreshInfiniteCache();
+      gridRef.current?.api?.refreshInfiniteCache();
-        return true;
+      return Boolean((isEmpty && !data?.length) || (!isEmpty && data?.length));
-      },
+    },
-      [gridRef]
+    [gridRef]
-    );
+  );
 
-    const { data, loading, error } = useDataProvider<AccountFields[], never>({
+  const { data, loading, error } = useDataProvider<AccountFields[], never>({
-      dataProvider: aggregatedAccountsDataProvider,
+    dataProvider: aggregatedAccountsDataProvider,
-      update,
+    update,
-      variables,
+    variables,
-    });
+  });
-    const getRows = async ({
+  const getRows = useCallback(
-      successCallback,
+    async ({ successCallback, startRow, endRow }: GetRowsParams) => {
-      startRow,
-      endRow,
-    }: GetRowsParams) => {
       const rowsThisBlock = dataRef.current
         ? dataRef.current.slice(startRow, endRow)
         : [];
       const lastRow = dataRef.current?.length ?? -1;
       successCallback(rowsThisBlock, lastRow);
-    };
+    },
-    return (
+    []
-      <AsyncRenderer data={data || []} error={error} loading={loading}>
+  );
-        <AccountTable
+  return (
-          rowModelType={data?.length ? 'infinite' : 'clientSide'}
+    <div className="relative h-full">
-          rowData={data?.length ? undefined : []}
+      <AccountTable
-          ref={gridRef}
+        rowModelType="infinite"
-          datasource={{ getRows }}
+        ref={gridRef}
-          onClickAsset={onClickAsset}
+        datasource={{ getRows }}
-          onClickDeposit={onClickDeposit}
+        onClickAsset={onClickAsset}
-          onClickWithdraw={onClickWithdraw}
+        onClickDeposit={onClickDeposit}
+        onClickWithdraw={onClickWithdraw}
+      />
+      <div className="pointer-events-none absolute inset-0 top-5">
+        <AsyncRenderer
+          data={data?.length ? data : null}
+          error={error}
+          loading={loading}
+          noDataMessage={t('No accounts')}
         />
-      </AsyncRenderer>
+      </div>
-    );
+    </div>
-  }
+  );
-);
+};
 
 export default memo(AccountManager);