fix(orders): re-render last column of orders table on data change (#3927)

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

@@ -145,8 +145,8 @@ export const OrderListManager = ({
           ref={gridRef}
           filter={filter}
           onGridReady={onGridReady}
-          cancel={cancel}
+          onCancel={cancel}
-          setEditOrder={setEditOrder}
+          onEdit={setEditOrder}
           onMarketClick={onMarketClick}
           onOrderTypeClick={onOrderTypeClick}
           onFilterChanged={onFilterChanged}

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

@@ -25,8 +25,8 @@ jest.mock('@vegaprotocol/react-helpers', () => ({
 
 const defaultProps: OrderListTableProps = {
   rowData: [],
-  setEditOrder: jest.fn(),
+  onEdit: jest.fn(),
-  cancel: jest.fn(),
+  onCancel: jest.fn(),
   isReadOnly: false,
 };
 
@@ -154,8 +154,8 @@ describe('OrderListTable', () => {
         render(
           generateJsx({
             rowData: [order],
-            setEditOrder: mockEdit,
+            onEdit: mockEdit,
-            cancel: mockCancel,
+            onCancel: mockCancel,
           })
         );
       });
@@ -179,8 +179,8 @@ describe('OrderListTable', () => {
         render(
           generateJsx({
             rowData: [order],
-            setEditOrder: mockEdit,
+            onEdit: mockEdit,
-            cancel: mockCancel,
+            onCancel: mockCancel,
             isReadOnly: true,
           })
         );

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

@@ -18,8 +18,8 @@ const Template: Story = (args) => {
     <div style={{ height: 1000 }}>
       <OrderListTable
         rowData={args.data}
-        cancel={cancel}
+        onCancel={cancel}
-        setEditOrder={() => {
+        onEdit={() => {
           return;
         }}
         isReadOnly={false}
@@ -47,8 +47,8 @@ const Template2: Story = (args) => {
       <div style={{ height: 1000 }}>
         <OrderListTable
           rowData={args.data}
-          cancel={cancel}
+          onCancel={cancel}
-          setEditOrder={setEditOrder}
+          onEdit={setEditOrder}
           isReadOnly={false}
         />
       </div>

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

@@ -32,8 +32,8 @@ import { Filter } from '../order-list-manager';
 
 export type OrderListTableProps = TypedDataAgGrid<Order> & {
   marketId?: string;
-  cancel: (order: Order) => void;
+  onCancel: (order: Order) => void;
-  setEditOrder: (order: Order) => void;
+  onEdit: (order: Order) => void;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
   filter?: Filter;
@@ -46,14 +46,7 @@ export const OrderListTable = memo<
 >(
   forwardRef<AgGridReact, OrderListTableProps>(
     (
-      {
+      { onCancel, onEdit, onMarketClick, onOrderTypeClick, filter, ...props },
-        cancel,
-        setEditOrder,
-        onMarketClick,
-        onOrderTypeClick,
-        filter,
-        ...props
-      },
       ref
     ) => {
       const showAllActions =
@@ -275,15 +268,11 @@ export const OrderListTable = memo<
           />
           <AgGridColumn
             colId="amend"
-            field="id"
             {...COL_DEFS.actions}
             minWidth={showAllActions ? 120 : COL_DEFS.actions.minWidth}
             maxWidth={showAllActions ? 120 : COL_DEFS.actions.minWidth}
-            cellRenderer={({
+            cellRenderer={({ data }: { data?: Order }) => {
-              data,
+              if (!data) return null;
-              value,
-            }: VegaICellRendererParams<Order, 'id'>) => {
-              if (!value || !data) return null;
 
               return (
                 <div className="flex gap-2 items-center justify-end">
@@ -291,19 +280,19 @@ export const OrderListTable = memo<
                     <>
                       <ButtonLink
                         data-testid="edit"
-                        onClick={() => setEditOrder(data)}
+                        onClick={() => onEdit(data)}
                       >
                         {t('Edit')}
                       </ButtonLink>
                       <ButtonLink
                         data-testid="cancel"
-                        onClick={() => cancel(data)}
+                        onClick={() => onCancel(data)}
                       >
                         {t('Cancel')}
                       </ButtonLink>
                     </>
                   )}
-                  <OrderActionsDropdown id={value} />
+                  <OrderActionsDropdown id={data?.id} />
                 </div>
               );
             }}