fix: order filters

apps/trading/components/orders-container/orders-container.tsx

@@ -11,6 +11,19 @@ import {
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import type { DataGridStore } from '../../stores/datagrid-store-slice';
+import { OrderStatus } from '@vegaprotocol/types';
+
+const FilterStatusValue = {
+  [Filter.Open]: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
+  [Filter.Closed]: [
+    OrderStatus.STATUS_CANCELLED,
+    OrderStatus.STATUS_EXPIRED,
+    OrderStatus.STATUS_FILLED,
+    OrderStatus.STATUS_PARTIALLY_FILLED,
+    OrderStatus.STATUS_STOPPED,
+  ],
+  [Filter.Rejected]: [OrderStatus.STATUS_REJECTED],
+};
 
 export interface OrderContainerProps {
   marketId?: string;
@@ -24,13 +37,34 @@ export const OrdersContainer = ({ marketId, filter }: OrderContainerProps) => {
   const gridStore = useOrderListStore((store) => {
     switch (filter) {
       case Filter.Open: {
-        return store.open;
+        return {
+          columnState: store.open.columnState,
+          filterModel: {
+            status: {
+              value: FilterStatusValue[Filter.Open],
+            },
+          },
+        };
       }
       case Filter.Closed: {
-        return store.closed;
+        return {
+          columnState: store.closed.columnState,
+          filterModel: {
+            status: {
+              value: FilterStatusValue[Filter.Closed],
+            },
+          },
+        };
       }
       case Filter.Rejected: {
-        return store.rejected;
+        return {
+          columnState: store.rejected.columnState,
+          filterModel: {
+            status: {
+              value: FilterStatusValue[Filter.Rejected],
+            },
+          },
+        };
       }
       default: {
         return store.all;

libs/datagrid/src/lib/use-datagrid-events.ts

@@ -3,7 +3,7 @@ import type {
   ColumnResizedEvent,
   ColumnState,
   FilterChangedEvent,
-  GridColumnsChangedEvent,
+  GridReadyEvent,
   SortChangedEvent,
 } from 'ag-grid-community';
 import { useCallback, useMemo } from 'react';
@@ -37,7 +37,7 @@ export const useDataGridEvents = (
 
   // check if we have stored column states or filter models and apply if we do
   const onGridReady = useCallback(
-    ({ api, columnApi }: GridColumnsChangedEvent) => {
+    ({ api, columnApi }: GridReadyEvent) => {
       if (!api || !columnApi) return;
 
       if (state.columnState) {

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

@@ -2,8 +2,6 @@ import { t } from '@vegaprotocol/i18n';
 import { useCallback, useRef, useState } from 'react';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
-import type { GridReadyEvent } from 'ag-grid-community';
-
 import { OrderListTable } from '../order-list/order-list';
 import { useHasAmendableOrder } from '../../order-hooks/use-has-amendable-order';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
@@ -16,7 +14,6 @@ import {
 import type { OrderTxUpdateFieldsFragment } from '@vegaprotocol/wallet';
 import { OrderEditDialog } from '../order-list/order-edit-dialog';
 import type { Order } from '../order-data-provider';
-import { OrderStatus } from '@vegaprotocol/types';
 
 export enum Filter {
   'Open',
@@ -24,18 +21,6 @@ export enum Filter {
   'Rejected',
 }
 
-const FilterStatusValue = {
-  [Filter.Open]: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
-  [Filter.Closed]: [
-    OrderStatus.STATUS_CANCELLED,
-    OrderStatus.STATUS_EXPIRED,
-    OrderStatus.STATUS_FILLED,
-    OrderStatus.STATUS_PARTIALLY_FILLED,
-    OrderStatus.STATUS_STOPPED,
-  ],
-  [Filter.Rejected]: [OrderStatus.STATUS_REJECTED],
-};
-
 export interface OrderListManagerProps {
   partyId: string;
   marketId?: string;
@@ -46,19 +31,6 @@ export interface OrderListManagerProps {
   gridProps?: ReturnType<typeof useDataGridEvents>;
 }
 
-const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
-  <div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end px-[11px] py-2 absolute bottom-0 right-3 rounded">
-    <Button
-      variant="primary"
-      size="sm"
-      onClick={onClick}
-      data-testid="cancelAll"
-    >
-      {t('Cancel all')}
-    </Button>
-  </div>
-);
-
 export const OrderListManager = ({
   partyId,
   marketId,
@@ -80,13 +52,6 @@ export const OrderListManager = ({
   const { data, error } = useDataProvider({
     dataProvider: ordersWithMarketProvider,
     variables,
-    update: ({ data }) => {
-      if (data && gridRef.current?.api) {
-        gridRef.current.api.setRowData(data);
-        return true;
-      }
-      return false;
-    },
   });
 
   const cancel = useCallback(
@@ -102,19 +67,6 @@ export const OrderListManager = ({
     [create]
   );
 
-  const onGridReady = useCallback(
-    ({ api }: GridReadyEvent) => {
-      if (filter !== undefined) {
-        api.setFilterModel({
-          status: {
-            value: FilterStatusValue[filter],
-          },
-        });
-      }
-    },
-    [filter]
-  );
-
   const cancelAll = useCallback(() => {
     create({
       orderCancellation: {},
@@ -125,10 +77,9 @@ export const OrderListManager = ({
     <>
       <div className="h-full relative">
         <OrderListTable
-          rowData={data as Order[]}
+          rowData={data}
           ref={gridRef}
           filter={filter}
-          onGridReady={onGridReady}
           onCancel={cancel}
           onEdit={setEditOrder}
           onMarketClick={onMarketClick}
@@ -179,3 +130,16 @@ export const OrderListManager = ({
     </>
   );
 };
+
+const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
+  <div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end px-[11px] py-2 absolute bottom-0 right-3 rounded">
+    <Button
+      variant="primary"
+      size="sm"
+      onClick={onClick}
+      data-testid="cancelAll"
+    >
+      {t('Cancel all')}
+    </Button>
+  </div>
+);