feat: fix orders e2e tests, improve use bottom placeholder

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

@@ -139,7 +139,8 @@ describe('orders list', { tags: '@smoke', testIsolation: true }, () => {
 });
 
 describe('subscribe orders', { tags: '@smoke' }, () => {
-  before(() => {
+  let orderId = '0';
+  beforeEach(() => {
     const subscriptionMocks = getSubscriptionMocks();
     cy.spy(subscriptionMocks, 'OrdersUpdate');
     cy.mockTradingPage();
@@ -154,8 +155,8 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
         .click();
       cy.get('.ag-filter-apply-panel-button').click();
     });
+    orderId = (parseInt(orderId, 10) + 1).toString();
   });
-  const orderId = '1234567890';
   // 7002-SORD-053
   // 7002-SORD-040
   // 7003-MORD-001
@@ -299,7 +300,7 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
     });
     cy.get(`[row-id=${orderId}]`)
       .find('[col-id="price"]')
-      .should('have.text', '200.00');
+      .should('have.text', '-');
   });
 
   it('must see the time in force applied to the order', () => {

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

@@ -37,9 +37,9 @@ export const AccountManager = ({
     variables,
   });
   const setId = useCallback(
-    (data: AccountFields) => ({
+    (data: AccountFields, id: string) => ({
       ...data,
-      asset: { ...data.asset, id: `${data.asset.id}-1` },
+      asset: { ...data.asset, id },
     }),
     []
   );

libs/react-helpers/src/hooks/use-bottom-placeholder.tsx

@@ -1,16 +1,17 @@
 import type { RefObject } from 'react';
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
 import type { IsFullWidthRowParams, RowHeightParams } from 'ag-grid-community';
 
 const NO_HOVER_CSS_RULE = { 'no-hover': 'data?.isLastPlaceholder' };
+const ROW_ID = 'bottomPlaceholder';
 const fullWidthCellRenderer = () => null;
 const isFullWidthRow = (params: IsFullWidthRowParams) =>
   params.rowNode.data?.isLastPlaceholder;
 
 interface Props<T> {
   gridRef: RefObject<AgGridReact>;
-  setId?: (data: T) => T;
+  setId?: (data: T, id: string) => T;
   disabled?: boolean;
 }
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -19,34 +20,33 @@ export const useBottomPlaceholder = <T extends {}>({
   setId,
   disabled,
 }: Props<T>) => {
-  const placeholderRowRef = useRef<T | undefined>();
   const onBodyScrollEnd = useCallback(() => {
     const rowCont = gridRef.current?.api.getDisplayedRowCount() ?? 0;
-    if (!placeholderRowRef.current && rowCont) {
+    if (rowCont) {
       const lastRow = gridRef.current?.api.getDisplayedRowAtIndex(rowCont - 1);
       if (lastRow && lastRow.data) {
-        placeholderRowRef.current = setId
-          ? setId({ ...lastRow.data, isLastPlaceholder: true })
+        const placeholderRow = setId
+          ? setId({ ...lastRow.data, isLastPlaceholder: true }, ROW_ID)
           : {
               ...lastRow.data,
               isLastPlaceholder: true,
-              id: `${lastRow.data?.id || '-'}-1`,
+              id: ROW_ID,
             };
-        const transaction = {
-          add: [placeholderRowRef.current],
-        };
+        const transaction = gridRef.current?.api.getRowNode(ROW_ID)
+          ? { update: [placeholderRow] }
+          : { add: [placeholderRow] };
         gridRef.current?.api.applyTransaction(transaction);
       }
     }
   }, [gridRef, setId]);
 
   const onRowsChanged = useCallback(() => {
-    if (placeholderRowRef.current) {
+    const placeholderNode = gridRef.current?.api.getRowNode(ROW_ID);
+    if (placeholderNode) {
       const transaction = {
-        remove: [placeholderRowRef.current],
+        remove: [placeholderNode.data],
       };
       gridRef.current?.api.applyTransaction(transaction);
-      placeholderRowRef.current = undefined;
     }
     onBodyScrollEnd();
   }, [gridRef, onBodyScrollEnd]);