chore(react-helpers): remove ag-grid deps (#3628)

apps/trading/client-pages/liquidity/liquidity.tsx

@@ -12,7 +12,7 @@ import {
   formatNumberPercentage,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { updateGridData } from '@vegaprotocol/react-helpers';
+import { updateGridData } from '@vegaprotocol/datagrid';
 import {
   NetworkParams,
   useNetworkParams,

apps/trading/client-pages/portfolio/deposits-container.tsx

@@ -2,7 +2,7 @@ import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import { useDepositDialog, DepositsTable } from '@vegaprotocol/deposits';
 import { depositsProvider } from '@vegaprotocol/deposits';
 import { t } from '@vegaprotocol/i18n';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useRef } from 'react';

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

@@ -1,6 +1,6 @@
 import { useRef, useMemo, memo, useCallback } from 'react';
 import { t } from '@vegaprotocol/i18n';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';

libs/datagrid/src/index.ts

@@ -11,6 +11,7 @@ export * from './lib/cells/vol-cell';
 export * from './lib/cells/centered-grid-cell';
 export * from './lib/cells/market-name-cell';
 export * from './lib/cells/order-type-cell';
+export * from './lib/cells/size';
 
 export * from './lib/filters/date-range-filter';
 export * from './lib/filters/set-filter';
@@ -19,3 +20,6 @@ export * from './lib/cell-class-rules';
 export * from './lib/type-helpers';
 
 export * from './lib/cells/grid-progress-bar';
+
+export * from './lib/ag-grid-update';
+export * from './lib/use-bottom-placeholder';

libs/datagrid/src/lib/ag-grid-update.ts

@@ -1,7 +1,8 @@
 import type { MutableRefObject, RefObject } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
-import type { IGetRowsParams } from 'ag-grid-community';
+
 type AnyArray = Array<any> | null; // eslint-disable-line @typescript-eslint/no-explicit-any
+
 export const isXOrWasEmpty = (prev?: AnyArray, curr?: AnyArray) =>
   Boolean(Number(!!prev?.length) ^ Number(!!curr?.length));
 
@@ -17,14 +18,3 @@ export const updateGridData = (
   }
   return !rerender;
 };
-
-export const makeGetRows =
-  (dataRef: MutableRefObject<AnyArray>) =>
-  () =>
-  async ({ successCallback, startRow, endRow }: IGetRowsParams) => {
-    const rowsThisBlock = dataRef.current
-      ? dataRef.current.slice(startRow, endRow)
-      : [];
-    const lastRow = dataRef.current ? dataRef.current.length : 0;
-    successCallback(rowsThisBlock, lastRow);
-  };

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

@@ -6,7 +6,7 @@ import { FillsTable } from './fills-table';
 import type { BodyScrollEvent, BodyScrollEndEvent } from 'ag-grid-community';
 import { useFillsList } from './use-fills-list';
 import type { Trade } from './fills-data-provider';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 
 interface FillsManagerProps {
   partyId: string;

libs/fills/src/lib/use-fills-list.ts

@@ -2,7 +2,7 @@ import type { RefObject } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
 import { useCallback, useRef } from 'react';
 import { makeInfiniteScrollGetRows } from '@vegaprotocol/data-provider';
-import { updateGridData } from '@vegaprotocol/react-helpers';
+import { updateGridData } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import type { Trade, TradeEdge } from './fills-data-provider';
 import { fillsWithMarketProvider } from './fills-data-provider';

libs/ledger/src/lib/ledger-entries-data-provider.ts

@@ -3,7 +3,7 @@ import { assetsProvider } from '@vegaprotocol/assets';
 import type { Market } from '@vegaprotocol/market-list';
 import { marketsProvider } from '@vegaprotocol/market-list';
 import { makeInfiniteScrollGetRows } from '@vegaprotocol/data-provider';
-import { updateGridData } from '@vegaprotocol/react-helpers';
+import { updateGridData } from '@vegaprotocol/datagrid';
 import {
   makeDataProvider,
   makeDerivedDataProvider,

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -7,7 +7,7 @@ import type { GridReadyEvent, FilterChangedEvent } from 'ag-grid-community';
 
 import { OrderListTable } from '../order-list/order-list';
 import { useHasAmendableOrder } from '../../order-hooks/use-has-amendable-order';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider';
 import {

libs/orders/src/lib/components/order-list/order-edit-dialog.tsx

@@ -6,7 +6,7 @@ import {
   validateAmount,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Size } from '@vegaprotocol/react-helpers';
+import { Size } from '@vegaprotocol/datagrid';
 import * as Schema from '@vegaprotocol/types';
 import {
   FormGroup,

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

@@ -6,7 +6,7 @@ import type { AgGridReact } from 'ag-grid-react';
 import * as Schema from '@vegaprotocol/types';
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
 import { t } from '@vegaprotocol/i18n';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 
 interface PositionsManagerProps {
   partyId: string;

libs/positions/src/lib/use-positions-data.tsx

@@ -4,7 +4,7 @@ import type { AgGridReact } from 'ag-grid-react';
 import type { Position } from './positions-data-providers';
 import { positionsMetricsProvider } from './positions-data-providers';
 import type { PositionsQueryVariables } from './__generated__/Positions';
-import { updateGridData } from '@vegaprotocol/react-helpers';
+import { updateGridData } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import type { GetRowsParams } from '@vegaprotocol/datagrid';
 import isEqual from 'lodash/isEqual';

libs/react-helpers/.eslintrc.json

@@ -9,6 +9,8 @@
           "error",
           "@apollo/client",
           "@vegaprotocol/data-provider",
+          "ag-grid-react",
+          "ag-grid-community",
           "graphql",
           "graphql-tag",
           "graphql-ws",

libs/react-helpers/src/hooks/index.ts

@@ -1,4 +1,3 @@
-export * from './use-apply-grid-transaction';
 export * from './use-fetch';
 export * from './use-local-storage';
 export * from './use-mutation-observer';
@@ -13,5 +12,4 @@ export * from './use-storybook-theme-observer';
 export * from './use-yesterday';
 export * from './use-previous';
 export * from './use-logger';
-export * from './use-bottom-placeholder';
 export * from './use-pane-layout';

libs/react-helpers/src/hooks/use-apply-grid-transaction.spec.ts

@@ -1,74 +0,0 @@
-import { useApplyGridTransaction } from './use-apply-grid-transaction';
-import { renderHook } from '@testing-library/react';
-
-type Items = Array<{ id: string; value: number }>;
-
-const item = {
-  id: '1',
-  value: 1,
-};
-const item2 = {
-  id: '2',
-  value: 2,
-};
-const items = [item, item2];
-
-function setup(items: Items, rowNodes: Items) {
-  const gridApiMock = {
-    applyTransaction: jest.fn(),
-    getRowNode: (id: string) => {
-      const node = rowNodes.find((i) => i.id === id);
-      if (node) {
-        return { data: node };
-      }
-      return undefined;
-    },
-  };
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  renderHook(() => useApplyGridTransaction(items, gridApiMock as any));
-  return gridApiMock;
-}
-
-it('Adds items', () => {
-  const gridApiMock = setup(items, []);
-  expect(gridApiMock.applyTransaction).toHaveBeenCalledWith({
-    update: [],
-    add: items,
-    addIndex: 0,
-  });
-});
-
-it('Doesnt update rows without changes', () => {
-  const rowNodes: Array<{ id: string; value: number }> = [...items];
-  const gridApiMock = setup(items, rowNodes);
-  expect(gridApiMock.applyTransaction).toHaveBeenCalledWith({
-    update: [],
-    add: [],
-    addIndex: 0,
-  });
-});
-
-it('Update rows with changes', () => {
-  const rowNodes = [...items];
-  const updatedItems = [
-    { id: '1', value: 10 },
-    { id: '2', value: 20 },
-  ];
-  const gridApiMock = setup(updatedItems, rowNodes);
-  expect(gridApiMock.applyTransaction).toHaveBeenCalledWith({
-    update: updatedItems,
-    add: [],
-    addIndex: 0,
-  });
-});
-
-it('Updates and adds at the same time', () => {
-  const newItem = { id: '3', value: 3 };
-  const updatedItem = { id: '2', value: 20 };
-  const gridApiMock = setup([newItem, updatedItem], [...items]);
-  expect(gridApiMock.applyTransaction).toHaveBeenCalledWith({
-    update: [updatedItem],
-    add: [newItem],
-    addIndex: 0,
-  });
-});

libs/react-helpers/src/hooks/use-apply-grid-transaction.ts

@@ -1,36 +0,0 @@
-import type { GridApi } from 'ag-grid-community';
-import { useEffect } from 'react';
-import isEqual from 'lodash/isEqual';
-
-export const useApplyGridTransaction = <T extends { id: string }>(
-  data: T[],
-  gridApi: GridApi | null
-) => {
-  useEffect(() => {
-    if (!gridApi) return;
-
-    const update: T[] = [];
-    const add: T[] = [];
-
-    // split into updates and adds
-    data.forEach((d) => {
-      if (!gridApi) return;
-
-      const rowNode = gridApi.getRowNode(d.id);
-
-      if (rowNode) {
-        if (!isEqual(rowNode.data, d)) {
-          update.push(d);
-        }
-      } else {
-        add.push(d);
-      }
-    });
-
-    gridApi.applyTransaction({
-      update,
-      add,
-      addIndex: 0,
-    });
-  }, [data, gridApi]);
-};

libs/react-helpers/src/lib/grid/index.ts

@@ -1,2 +0,0 @@
-export * from './size';
-export * from './summary-rows';

libs/react-helpers/src/lib/grid/summary-rows.spec.ts

@@ -1,75 +0,0 @@
-import type { GridApi, ColumnApi } from 'ag-grid-community';
-import { addSummaryRows } from './summary-rows';
-
-type RowMock = { group: string; count: string };
-
-const getGroupId = jest.fn();
-getGroupId.mockImplementation(
-  (data: { group: string; __summaryRow: boolean }) =>
-    data.__summaryRow ? null : data.group
-);
-const getGroupSummaryRow = jest.fn();
-getGroupSummaryRow.mockImplementation(
-  (data: RowMock[]): Partial<RowMock> | null => {
-    if (!data.length) {
-      return null;
-    }
-    const row: Partial<RowMock> = {
-      count: data.reduce((a, c) => a + parseFloat(c.count), 0).toString(),
-    };
-    return row;
-  }
-);
-
-const api = {
-  forEachNodeAfterFilterAndSort: jest.fn(),
-  applyTransactionAsync: jest.fn(),
-};
-
-const columnsApi = {};
-
-describe('addSummaryRows', () => {
-  it('should render search input and button', () => {
-    const nodes = [
-      { data: { group: 'a', count: 10 } },
-      { data: { group: 'a', count: 10, __summaryRow: true } },
-      { data: { group: 'a', count: 20 } },
-      { data: { group: 'b', count: 30 } },
-      { data: { group: 'c', count: 40 } },
-      { data: { group: 'c', count: 50 } },
-      { data: { group: 'c', count: 60 } },
-      { data: { group: 'd', count: 10, __summaryRow: true } },
-      { data: { group: 'd', count: 70 } },
-      { data: { group: 'd', count: 80 } },
-    ];
-    api.forEachNodeAfterFilterAndSort.mockImplementationOnce(
-      nodes.forEach.bind(nodes)
-    );
-    addSummaryRows(
-      api as unknown as GridApi,
-      columnsApi as unknown as ColumnApi,
-      getGroupId,
-      getGroupSummaryRow
-    );
-    expect(api.forEachNodeAfterFilterAndSort).toBeCalledTimes(1);
-    expect(api.applyTransactionAsync).toBeCalledTimes(5);
-    expect(api.applyTransactionAsync).toHaveBeenNthCalledWith(1, {
-      remove: [nodes[1].data],
-    });
-    expect(api.applyTransactionAsync).toHaveBeenNthCalledWith(2, {
-      add: [{ count: '30' }],
-      addIndex: 2,
-    });
-    expect(api.applyTransactionAsync).toHaveBeenNthCalledWith(3, {
-      remove: [nodes[7].data],
-    });
-    expect(api.applyTransactionAsync).toHaveBeenNthCalledWith(4, {
-      add: [{ count: '150' }],
-      addIndex: 7,
-    });
-    expect(api.applyTransactionAsync).toHaveBeenNthCalledWith(5, {
-      add: [{ count: '150' }],
-      addIndex: 10,
-    });
-  });
-});

libs/react-helpers/src/lib/grid/summary-rows.ts

@@ -1,47 +0,0 @@
-import type { ColumnApi, GridApi } from 'ag-grid-community';
-
-export interface SummaryRow {
-  __summaryRow?: boolean;
-}
-
-export function addSummaryRows<T extends SummaryRow>(
-  api: GridApi,
-  columnApi: ColumnApi,
-  getGroupId: (data: T, columnApi: ColumnApi) => string | null | undefined,
-  getGroupSummaryRow: (data: T[], columnApi: ColumnApi) => Partial<T> | null
-) {
-  let currentGroupId: string | null | undefined = undefined;
-  let group: T[] = [];
-  let addIndex = 0;
-  api.forEachNodeAfterFilterAndSort((node) => {
-    const nodeGroupId = getGroupId(node.data, columnApi);
-    if (currentGroupId === undefined) {
-      currentGroupId = nodeGroupId;
-    }
-    if (node.data.__summaryRow) {
-      api.applyTransactionAsync({
-        remove: [node.data],
-      });
-      addIndex -= 1;
-    } else if (currentGroupId !== undefined && currentGroupId !== nodeGroupId) {
-      if (group.length > 1) {
-        api.applyTransactionAsync({
-          add: [getGroupSummaryRow(group, columnApi)],
-          addIndex,
-        });
-        addIndex += 1;
-      }
-      group = [node.data];
-      currentGroupId = nodeGroupId;
-    } else if (currentGroupId) {
-      group.push(node.data);
-    }
-    addIndex += 1;
-  });
-  if (group.length > 1) {
-    api.applyTransactionAsync({
-      add: [getGroupSummaryRow(group, columnApi)],
-      addIndex,
-    });
-  }
-}

libs/react-helpers/src/lib/index.ts

@@ -1,4 +1,2 @@
-export * from './ag-grid-update';
 export * from './format';
-export * from './grid';
 export * from './validation';

libs/utils/.eslintrc.json

@@ -9,6 +9,8 @@
           "error",
           "@apollo/client",
           "@vegaprotocol/data-provider",
+          "ag-grid-react",
+          "ag-grid-community",
           "graphql",
           "graphql-tag",
           "graphql-ws",

libs/web3/src/lib/use-vega-transaction-toasts.tsx

@@ -48,7 +48,7 @@ import {
 import { useMarketList } from '@vegaprotocol/market-list';
 import type { Side } from '@vegaprotocol/types';
 import { OrderStatusMapping } from '@vegaprotocol/types';
-import { Size } from '@vegaprotocol/react-helpers';
+import { Size } from '@vegaprotocol/datagrid';
 
 const intentMap: { [s in VegaTxStatus]: Intent } = {
   Default: Intent.Primary,

libs/withdraws/src/lib/withdrawals-table.tsx

@@ -7,7 +7,7 @@ import {
   isNumeric,
   truncateByChars,
 } from '@vegaprotocol/utils';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import type {