chore: make footer lower buttons floating over table rows - refactor solution

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

@@ -86,10 +86,6 @@ describe('AccountManager', () => {
     await waitFor(() => {
       expect(container).toBeInTheDocument();
     });
-    expect(
-      getAllByRole(container as HTMLDivElement, 'row').filter(
-        (elem) => elem.getAttribute('row-id') !== 'rowGroupFooter_ROOT_NODE_ID'
-      )
-    ).toHaveLength(2);
+    expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
   });
 });

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

@@ -1,4 +1,4 @@
-import { useRef, useMemo, memo } from 'react';
+import { useRef, useMemo, memo, useCallback } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
@@ -35,7 +35,17 @@ export const AccountManager = ({
     dataProvider: aggregatedAccountsDataProvider,
     variables,
   });
-  const bottomPlaceholderProps = useBottomPlaceholder({ gridRef });
+  const setId = useCallback(
+    (data: AccountFields) => ({
+      ...data,
+      asset: { ...data.asset, id: `${data.asset.id}-1` },
+    }),
+    []
+  );
+  const bottomPlaceholderProps = useBottomPlaceholder<AccountFields>({
+    gridRef,
+    setId,
+  });
 
   return (
     <div className="relative h-full">

libs/utils/src/lib/use-bottom-placeholder.tsx

@@ -1,39 +1,58 @@
 import type { RefObject } from 'react';
 import { useCallback, useMemo } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
-import type { ColDef } from 'ag-grid-community';
+import type { IsFullWidthRowParams } from 'ag-grid-community';
 
-const NO_HOVER_CSS_RULE = { 'no-hover': '!data' };
+const NO_HOVER_CSS_RULE = { 'no-hover': 'data.isLastPlaceholder' };
 
-interface Props {
+interface Props<T> {
   gridRef: RefObject<AgGridReact>;
+  setId?: (data: T) => T;
 }
-export const useBottomPlaceholder = ({ gridRef }: Props) => {
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const useBottomPlaceholder = <T extends {}>({
+  gridRef,
+  setId,
+}: Props<T>) => {
   const onBodyScrollEnd = useCallback(() => {
     const rowCont = gridRef.current?.api.getModel().getRowCount() ?? 0;
     const lastRowIndex = gridRef.current?.api.getLastDisplayedRow() ?? 0;
     if (lastRowIndex && rowCont - 1 === lastRowIndex) {
       const lastRow = gridRef.current?.api.getDisplayedRowAtIndex(lastRowIndex);
-      lastRow?.setRowHeight(50);
-      gridRef.current?.api.onRowHeightChanged();
+      if (lastRow?.data && !lastRow?.data.isLastPlaceholder) {
+        const newData = setId
+          ? setId({ ...lastRow.data, isLastPlaceholder: true })
+          : {
+              ...lastRow.data,
+              isLastPlaceholder: true,
+              id: `${lastRow.data?.id || '-'}-${1}`,
+            };
+        const add = [newData];
+        gridRef.current?.api.applyTransaction({
+          add,
+          addIndex: lastRowIndex + 1,
+        });
+        const newLastRow = gridRef.current?.api.getDisplayedRowAtIndex(
+          lastRowIndex + 1
+        );
+        newLastRow?.setRowHeight(50);
+        gridRef.current?.api.onRowHeightChanged();
+      }
     }
   }, []);
 
-  const autoGroupColumnDef = useMemo<ColDef>(() => {
-    return {
-      height: 50,
-      cellRendererParams: {
-        footerValueGetter: () => null,
-      },
-    };
-  }, []);
+  const isFullWidthRow = useCallback(
+    (params: IsFullWidthRowParams) => params.rowNode.data?.isLastPlaceholder,
+    []
+  );
+  const fullWidthCellRenderer = () => null;
 
   return useMemo(
     () => ({
       onBodyScrollEnd,
-      autoGroupColumnDef,
-      groupIncludeTotalFooter: true,
       rowClassRules: NO_HOVER_CSS_RULE,
+      isFullWidthRow,
+      fullWidthCellRenderer,
     }),
     []
   );

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

@@ -32,10 +32,6 @@ export const WithdrawalsTable = (
     (store) => store.create
   );
 
-  const onGridReady = useCallback(() => {
-    gridRef.current?.api.sizeColumnsToFit();
-  }, []);
-
   const bottomPlaceholderProps = useBottomPlaceholder({ gridRef });
   return (
     <AgGrid
@@ -50,7 +46,6 @@ export const WithdrawalsTable = (
       }}
       suppressCellFocus
       ref={gridRef}
-      onGridReady={onGridReady}
       {...bottomPlaceholderProps}
       {...props}
     >