fix: [#413] display when orders are updated as they are ordered by updatedAt and createdAt (#514)

libs/order-list/src/lib/order-data-provider.spec.ts

@@ -0,0 +1,88 @@
+import {
+  OrderType,
+  OrderStatus,
+  Side,
+  OrderTimeInForce,
+} from '@vegaprotocol/types';
+import { sortOrders } from './orders-data-provider';
+import type { Orders_party_orders } from './__generated__/Orders';
+
+const marketOrder: Orders_party_orders = {
+  __typename: 'Order',
+  id: 'order-id',
+  market: {
+    __typename: 'Market',
+    id: 'market-id',
+    name: 'market-name',
+    decimalPlaces: 2,
+    tradableInstrument: {
+      __typename: 'TradableInstrument',
+      instrument: {
+        __typename: 'Instrument',
+        code: 'instrument-code',
+      },
+    },
+  },
+  size: '10',
+  type: OrderType.Market,
+  status: OrderStatus.Active,
+  side: Side.Buy,
+  remaining: '5',
+  price: '',
+  timeInForce: OrderTimeInForce.IOC,
+  createdAt: new Date('2022-2-3').toISOString(),
+  updatedAt: null,
+  expiresAt: null,
+  rejectionReason: null,
+};
+
+const limitOrder: Orders_party_orders = {
+  __typename: 'Order',
+  id: 'order-id',
+  market: {
+    __typename: 'Market',
+    id: 'market-id',
+    name: 'market-name',
+    decimalPlaces: 2,
+    tradableInstrument: {
+      __typename: 'TradableInstrument',
+      instrument: {
+        __typename: 'Instrument',
+        code: 'instrument-code',
+      },
+    },
+  },
+  size: '10',
+  type: OrderType.Limit,
+  status: OrderStatus.Active,
+  side: Side.Sell,
+  remaining: '5',
+  price: '12345',
+  timeInForce: OrderTimeInForce.GTT,
+  createdAt: new Date('2022-3-3').toISOString(),
+  expiresAt: new Date('2022-3-5').toISOString(),
+  updatedAt: null,
+  rejectionReason: null,
+};
+
+describe('OrderDataProvider', () => {
+  const orders = [marketOrder, limitOrder];
+
+  describe('sortOrders', () => {
+    it('should sort the orders from the most recent placed to the oldest', () => {
+      expect(sortOrders(orders)).toStrictEqual([limitOrder, marketOrder]);
+    });
+
+    it('should sort the orders from the most recent updated to the oldest', () => {
+      const updatedOrder = {
+        ...limitOrder,
+        updatedAt: new Date('2022-3-4').toISOString(),
+      };
+      expect(sortOrders([...orders, updatedOrder])).toStrictEqual([
+        updatedOrder,
+        limitOrder,
+        marketOrder,
+      ]);
+    });
+  });
+});

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

@@ -40,7 +40,7 @@ const marketOrder: Orders_party_orders = {
   remaining: '5',
   price: '',
   timeInForce: OrderTimeInForce.IOC,
-  createdAt: new Date().toISOString(),
+  createdAt: new Date('2022-2-3').toISOString(),
   updatedAt: null,
   expiresAt: null,
   rejectionReason: null,
@@ -81,7 +81,7 @@ it('Correct columns are rendered', async () => {
   });
 
   const headers = screen.getAllByRole('columnheader');
-  expect(headers).toHaveLength(8);
+  expect(headers).toHaveLength(9);
   expect(headers.map((h) => h.textContent?.trim())).toEqual([
     'Market',
     'Amount',
@@ -91,6 +91,7 @@ it('Correct columns are rendered', async () => {
     'Price',
     'Time In Force',
     'Created At',
+    'Updated At',
   ]);
 });
 
@@ -109,10 +110,9 @@ it('Correct formatting applied for market order', async () => {
     '-',
     marketOrder.timeInForce,
     getDateTimeFormat().format(new Date(marketOrder.createdAt)),
+    '-',
   ];
-  cells.forEach((cell, i) => {
-    expect(cell).toHaveTextContent(expectedValues[i]);
-  });
+  cells.forEach((cell, i) => expect(cell).toHaveTextContent(expectedValues[i]));
 });
 
 it('Correct formatting applied for GTT limit order', async () => {
@@ -131,6 +131,7 @@ it('Correct formatting applied for GTT limit order', async () => {
       new Date(limitOrder.expiresAt ?? '')
     )}`,
     getDateTimeFormat().format(new Date(limitOrder.createdAt)),
+    '-',
   ];
   cells.forEach((cell, i) => {
     expect(cell).toHaveTextContent(expectedValues[i]);

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

@@ -83,6 +83,12 @@ export const OrderList = forwardRef<AgGridReact, OrderListProps>(
             return getDateTimeFormat().format(new Date(value));
           }}
         />
+        <AgGridColumn
+          field="updatedAt"
+          valueFormatter={({ value }: ValueFormatterParams) => {
+            return value ? getDateTimeFormat().format(new Date(value)) : '-';
+          }}
+        />
       </AgGrid>
     );
   }